RSS

Posts Tagged ‘导航栏’

CSS打造简洁的导航栏

0 Comments | This entry was posted on Nov 15 2009

Demo

其实要考虑的问题只有两个：一个是两个栏目直接的间隔线，另一个是鼠标放到栏目上时背景颜色的变化。
我们一个一个来解决。

间隔线其实是由一条颜色为#DDD和一条颜色为#FFF的边框组成，可以由border-left 或者 border-right实现。

.leftborder{ background:#EEE;border-left:1px solid #FFF;}
.rightborder{ background:#EEE; border-right:1px solid #DDD;}

这是所有浏览器都能实现的方法。但如果你用的是Firefox浏览器，那么还有更简单的方法。因为Firefox支持border-colors(详见CSS3.0参考手册),所以你可以直接把两种颜色同时加到一个边框里。代码如下。

.ffrightborder{ -moz-border-right-colors:#FFF #DDD; border-right-width:2px; border-right-style:solid;}

这样就搞定了第一个问题。然后给出第二个问题的代码，我负责解释。

ul{position:relative; clear:both; padding-top:20px;}
ul li{ width:100px;  float:left; list-style:none; text-align:center;}
ul li a,ul li a:visited{position:relative; display:block; text-decoration:none; color:#005A9C;}
ul li a:hover{display:block; background: #FAFAFA; margin:0 auto; width:100%; color:#424242;}

应该都很好理解，重点在于 “display:block;”，这个属性让整个<li>区域的背景都改变的关键，否则只是文字的背景发生变化。

好吧，给出Demo你自己看看就知道了：http://leqcany.com/demo/nav.html

PS: 在Firefox下可看到两个导航栏具有同样的效果。

,
Web Design