首页 > 代码库 > simple水平导航条
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水平导航条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。