CSS3实现导航栏_html/css

来源：测品娱乐

导航栏是Web中常用的UI组件，在Bootstrap等CSS框架中基本都会提供。既然导航栏这么重要，下面我们便来手动实现一个导航栏。这个过程还是需要掌握一些排版技巧和CSS3特性的。

列表样式

导航栏通常使用来标记：

 First Item
 Second Item
 Third Item
 Fourth Item

首先便要去掉列表的那些默认样式，比如左边的向目标记（小圆点）和边距：

ul { left-margin: 0; /* IE/Opera 默认使用外边距 */ left-padding: 0; /* Safari/Firefox 默认使用内边距 */ list-style-type: none; /* 左侧向目标记 */}

这样便去掉了浏览器给设置的默认样式了。至于如何自定义左侧的项目标记，可参考那些 CSS 背景图的技巧一文。

既然有这么多默认样式，为什么不直接用来做导航呢？这有悖于HTML语义标签的精神，HTML标记应尽可能包含语义，对搜索引擎和屏幕阅读器友好，样式信息应当抽离到CSS文件中。

一个垂直的导航栏效果应当如下图，其中高亮（深色的）项目表示当前激活项，表示鼠标悬停或当前页面。

上图使用的仍然是前述的HTML片段，下面主要考虑CSS的实现。按照前述办法清除列表的默认样式后，来设置列表项的样式：

ul a{ display: block; width: 200px; height: 40px; line-height: 40px; background: #f8f8f8;}

首先将设置为块级元素来设置它的宽高，然后设置行高与高相同来使文本居中。最后设置一个背景来凸显一下导航栏。

注意IE会给

上下添加额外的空白，可以设置

为 display: inline; 来克服。

接着来设置一些边框和圆角：

ul a{ border-radius: 3px; border: 1px solid #e7e7e7; padding: 0 15px;}

设置边框为稍微深的颜色，再加3像素圆角。设置内边距来让文字和边框有一定的距离。 border-radius 是CSS3特性，此前设置圆角还需要背景图的辅助，见那些 CSS 背景图的技巧。

注意设置 border 后，相邻项目的上下边框会连在一起形成2像素的边框。可以设置负的外边距（让项目重叠1像素）来克服，但需要将最后一个项目的边距恢复为0。

ul a{ margin-bottom: -1px;}ul li:last-child a{ margin-bottom: 0;}

也许细心的读者可能注意到了，前述HTML片段中有一项

设置了 active 的CSS类。它是为了标明当前高亮项目的。需要如下的样式：

ul .active a, ul a:hover{ background: #e7e7e7;}

水平导航有多种方式来实现。可以把

设置为 inline-block 让它水平排列，也可以设置 float:left 让

水平浮动。我们介绍后者，先看图：

设置

水平浮动后，会使得父容器的高度坍缩为零，它的背景设置将会失效。在利用浮动和清除浮动进行布局一文中提到两种解决办法：一是添加额外元素来清除浮动，二是让父容器也浮动。请看：

ul li{ float: left;}ul{ float: left;}

与垂直导航类似，边框在水平方向会叠加起来。解决方法也是类似的：

ul a{ margin-right: -1px;}ul li:last-child a{ margin-right: 0;}

上图中还给加了这样的样式： width: 70px; text-align: center; 。