如何去掉CSS导航条的最后的竖线

十月

分类：网站技术 | 评论数：17 | 点击数：20502 | 发表日期时间：2011-10-14 11:53:37

分享到：

本文导读：

　　CSS导航条相信已是老生常谈了，网上的免费源码一大堆，要多炫有多炫。只是作为初学者，我相信我还是喜欢使用简单容易实现，够用就行了。以下是我常用的一段CSS导航的CSS代码，用于取代复杂的表格代码。取消了最后的末尾的一条竖线。

正文

　　如何去掉CSS导航条的最后的竖线
　　
　　CSS导航条相信已是老生常谈了，网上的免费源码一大堆，要多炫有多炫。只是作为初学者，我相信我还是喜欢使用简单容易实现，够用就行了。
　　
　　以下是我常用的一段CSS导航的CSS代码，用于取代复杂的表格代码。取消了最后的末尾的一条竖线，因为大家都喜欢使用竖线分隔栏目名称，而使用“border-right:1pxsolid#FFF;”将会在末尾添加了一条竖线，很不美观。现在只需添加一行代码即可以解决。
　　
　　CSS导航的源码：
　　
　　1、CSS内容
　　
　　.menu{
　　
　　 color:#FFF;
　　
　　 font-weight:bold;
　　
　　}
　　
　　.menu ul{
　　
　　 list-style:none;
　　
　　 margin:0px;
　　
　　}
　　
　　.menu li{
　　
　　 display:inline;
　　
　　 text-align:center;
　　
　　 padding:0px10px010px;
　　
　　 border-right:1pxsolid#FFF;/*竖线*/
　　
　　 text-decoration:none;
　　
　　 margin-right:-1px;/*取消最后的竖线*/
　　
　　 }
　　
　　.menu a{
　　
　　color:#ffffff;
　　
　　font-weight:bold;
　　
　　}
　　
　　.menu a:hover{
　　
　　color:#fff;
　　
　　font-weight:bold;
　　
　　text-decoration:none;
　　
　　}
　　
　　2、页面内容
　　
　　<tdclass="menu">
　　
　　<ul>
　　
　　<li><ahref="#">首页</a></li>
　　
　　<li><ahref="#">栏目一</a></li>
　　
　　<li><ahref="#">栏目二</a></li>
　　
　　<li><ahref="#">栏目三</a></li>
　　
　　</ul>
　　
　　</td>
　　
　　