css 简单菜单栏的设置

1.制作简易 菜单栏选项

      <script src="../static/js/jquery-2.2.3.js"></script>
  <style type="text/css">
.list-box{
    border-top: 2px solid #eee;
    padding: 10px;
    width:200px;
}
.list-box ul li{
    height: 30px;
    border: 1px solid #00a7d2;#设置边框的样式
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    list-style:none;
    color:#00a7d2;#设置字体的颜色
}
.list-box ul li.active2{
    background-color: #00a7d2;
    color: #fff;
}


  </style>
  <script type="text/javascript">
function clickRelationName(obj){

$(obj).addClass("active2").siblings().removeClass("active2");
}

  </script>
 </head>

 <div class="list-box">
                            <ul class="list-none" >
                                <li οnclick="clickRelationName(this)" value="abc123">收购</li>
                                <li οnclick="clickRelationName(this)"  value="abc1">担保</li>
                                <li οnclick="clickRelationName(this)"  value="abcasdfds123">增资</li>
                                <li οnclick="clickRelationName(this)"  value="abasdfc123">法人</li>
                                <li οnclick="clickRelationName(this)"  value="abc12dd3">董事长</li>
                                <li οnclick="clickRelationName(this)"  value="abcdd123">股东</li>
                            </ul>
    </div>

执行效果：

2.使用overflow属性，实现滚动条显示

#tt{height:100px;width:200px;overflow:auto;background:red;}

<div id="tt">
as</br>
liu</br>
liu</br>
liu</br>
liu</br>
liu</br>

</div>

效果：

3.css中的box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

#tt{height:100px;width:200px;overflow:auto;background:red;}
#outer{width:300px;height:300px;margin-top:20px;border:1px solid gray}
#dleft{width:150px;height:30px;float:left;background:green;border:1px solid black;box-sizing:border-box;}
#dright{width:150px;height:30px;float:right;background:yellow;border:1px solid black;box-sizing:border-box;}

<div id="dleft">我是左边 </div>
<div id="dright">我是右边 </div>
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
<div>

效果：

最后

以上就是文艺面包为你收集整理的css 简单菜单栏的设置的全部内容，希望文章能够帮你解决css 简单菜单栏的设置所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。