返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

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

时间:2016-03-11 12:58来源:电脑教程学习网 www.etwiki.cn 编辑:admin

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>

------分隔线----------------------------
标签(Tag):css
------分隔线----------------------------
推荐内容
猜你感兴趣