你的位置:首页 > 网站技术 > 正文
14
十月
分类:网站技术 | 评论数:17 | 点击数:8675 | 发表日期时间: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>
  
  

本文标签:
源码
猜你喜欢:
评论:

17楼   龙岗钟爱一生婚纱照  2012-9-25 15:08:44  回复该评论

哦。。。好好

16楼   婴儿湿疹  2011-10-17 17:48:41  回复该评论

学好div+css很重要的

15楼   科士威团队  2011-10-17 16:42:55  回复该评论

看见代码就晕了..

14楼   佛山SEO  2011-10-17 16:30:47  回复该评论

不错,先收藏了!

13楼   屠龙  2011-10-17 14:53:36  回复该评论

这功能还不错。

12楼   美国主机  2011-10-16 19:31:11  回复该评论

不错,学习了

11楼   静脉曲张袜哪个牌子好  2011-10-16 11:26:37  回复该评论

隐藏确实有好处,客户体验很好

10楼   学习一点通  2011-10-15 22:22:25  回复该评论

非常实用的方法

9楼   醴陵SEO  2011-10-15 10:02:59  回复该评论

我正要呢!!!!!!!!!!!!!!1

8楼   扁平疣治疗方法  2011-10-15 1:18:56  回复该评论

方法不错哦~~~

7楼   21世纪最佳创业平台  2011-10-15 0:08:10  回复该评论

一个普通人创业的平台,一个手把手教你赚钱的系统。大量事实证明,只要有梦想,肯行动,三个月可以组建自己的团队框架,六个月实现月入过万。两年时间,让你有钱有闲。合理可行, 咨询QQ:2447851467

6楼   龙口装修公司  2011-10-14 18:23:51  回复该评论

懂了!谢谢,不过暂时还没用到

5楼   自来水博客  2011-10-14 15:34:39  回复该评论

经验,学习啦!

4楼   万书华博客  2011-10-14 14:11:35  回复该评论

学习经验来了

3楼   松鼠网  2011-10-14 13:32:24  回复该评论

博主的广告放的非常好。

2楼   一起玩具商城  2011-10-14 13:15:21  回复该评论

这个小问题还真的没有关注过!!

1楼   SEO人  2011-10-14 13:14:45  回复该评论

沙发支持下!!!!

昵称(必填)

邮箱

网址

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。