星空网 > 软件开发 > 网页设计

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: " |";},这样其实也有点麻烦,暂时想不出其他好方法。

效果图:simple水平导航条

 




原标题:simple水平导航条

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流