话不多说，看代码：
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: " |";}，这样其实也有点麻烦，暂时想不出其他好方法。
效果图：
时间： 2024-11-04 23:11:37