网页中的导航栏的实现

网页中导航栏的实现一般用ul li，

细节：一般一个页面中不可能只用一次ul li  所以在实现导航栏的时候，我们会对ul设置#nav（#menu）。

技术点（1）：要对ul中的li设置成一排，所以用display:inline，将li并排布局。

技术点（2）：li里面的a标签 需要设置为块级元素 + 但a标签 父级 li 不设置具体宽度，所以用display:inline-block；这样做是为了让 a 随着 li 并排继承，同时对a 设置宽度和高度等样式生效。

 

细节部分：ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
 A：这里ul和#nav紧贴没有空格，代表#nav只针对ul标签设置，标签只有ul标签使用id=”nav”设置样式才能生效。

 B:上代码没有在ul外再设置DIV，这样可以节约一个DIV实现同样布局。

 

原地址：http://www.divcss5.com/shili/s731.shtml

 

例子如下：

css部分

 

* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei";
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

#Top {
    min-width: 1024px;
    height: 70px;
}

#Top .top-wrap {
    position: relative;
    max-width: 1300px;
    height: 100%;
    margin: 0 auto;
    border-left: 1px solid blue;
    border-right: 1px solid blue;
}

#Foot {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 1024px;
}

#Foot .nav-warp {
    width: 280px;
    height: 100%;
}

#Foot .nav-warp ul#nav-ul {
    width: 100%;
    height: 100%;
    font-size: 0px;
}

ul#nav-ul>li>a {
    display: inline-block;
    width: 200px;
    line-height: 55px;
    border-bottom: 2px solid #cccccc;
    font-size: 16px;
    color: #ffffff;
    font-weight: 700;
    padding-left: 80px;
    background-color: #00a2ca;
}
ul#nav-ul>li>a>.arrows{
    width: 13px;
    height: 13px;
    display: inline-block;
    float: right;
    margin-right: 30px;
    margin-top: 22px;
    background-image: url("../images/right.png");
    background-repeat: no-repeat;
    background-position: center center;
}
/*二级菜单样式 开始*/
ul.nav-ul2>li>a {
    display: inline-block;
    width: 200px;
    line-height: 40px;
    font-weight: inherit;
    font-size: 14px;
    color: #ffffff;
    background-color: #0095bb;
    border-bottom: 2px solid #C3C3C3;
    padding-left: 80px;
}
/*二级菜单样式 结束*/


/*二级菜单隐藏块*/
.li_hidden{
    display: none;
}
.li_block{
     display: block;
 }
/*二级菜单隐藏块 结束*/

View Code