你的位置:首页 > 网页设计

[网页设计]simple水平导航条


话不多说,看代码:

html部分

<body> <ul>  <li><a href="#">Home</a></li>  <li><a href="#">About</a></li>  <li><a href="#">Our Services</a></li>  <li><a href="#">Our Work</a></li>  <li><a href="#">News</a></li>  <li><a class="last" href="#">Contact</a></li> </ul></body>

 

css处理

ul { padding: 0; margin: 0; list-style: none; width: 980px; float: left; background: #FAA819;}ul li { float: left;}ul a { display: block; padding: 0.2em; line-height: 2.1em; text-decoration: none; color: #fff;}ul a:after { content: " |";}ul a.last:after { content: "";}

 

注意的是,如何添加分割线是一个麻烦。可以采用含有分割线的背景图片加载到a标签里,但这样加载出来效果比较慢,也可以采用a:after {content: " |";},这样其实也有点麻烦,暂时想不出其他好方法。

效果图: