水平导航条的制作示例

黄振国

html页面：
<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Clients</a></li>
</ul>



css样式：
/*首先清除ul的list-style、margin和padding*/
ul{
margin:0;
padding:0;
list-style:none;
width:720px;
float:left;/*使ul不会因没有内容而没有了高度，使背景不能显示，也可以在最后加上空的div，然后用clear实现*/
background:#0099FF;
}

/*然后，可以将li的display属性设置了inline或者设置float为left，display li可能会出现bug，所以我一般用float left的方法*/
ul li{
float:left;
}

ul a{
display:block;
float:left;/*跨浏览设置*/
padding:0 2em;
line-height:2.1em;
text-decoration:none;
color:#fff;
}

ul .first a{
background:none;/*去掉第一个链接的背景，（待测试验证）*/
}

ul a:hover{
color:#333;
}