导航条的核心

分享一下我在《高德之声》第二期上面的一篇关于导航条的文章，呵呵有些班门弄斧了，就当做一个工作总结吧！至少在第二期里面算是最有价值的文章之一吧！如今拿出来晒晒，希望对网页设计师们有一丢丢的帮助吧！

导航条的核心

在日异月新的IT行业里，我们一直穿行在各种混杂的行业里面，因为我们实在是微不足道，大家也知道，这是一个吃青春饭的行当，他需要敏捷的思维与创造力，还需要非常的抗压能力，那就是网页设计师，在整个IT行业里面我们被称之为“美工“这绝对不是一个褒义的名词，随着年龄增长一批替换一批，我也不例外。在此将自己所掌握的一些心得与同行的朋友们分享一下，以下是我总结各类网站关于导航条的一点心得，希望各位同行们指正学习。

导航条也算是整个网站的开始，也是整个网站的导航，那么我们就从导航条开始，以下主要介绍一些我们经常使用的导航条样式，在这些样式中，HTML结构都是尽可能的保持一致（绝大部分导航条的HTML结构是一模一样的，具体结构如下：

在上面的HTML结构中，.nav 表示当前容器为一个导航，ul或者ol都可以作为导航的链接列表容器，.active表示的是当前页的链接，.first和.last分别表示第一项和最后一项。
这样我们得到了基本导航元素，这样的公共类我们给他一个共同的样式 .nav，让这个类下面所有的 ul 与 ol 都实现 横向导航条的布局，CSS代码如下：

这样我们得到了横向导航条的基本布局，然后我们再给他样式，很多为css3样式，虽然IE这些不符合标准的浏览器还在统领中国浏览器市场，但相信有一天，终究会被取代，因为社会是向前发展的。

我们来看看效果

样式表：

效果2

样式表：

效果3

样式表：

效果4

样式表：

效果5

样式表：

例子太多，不一一举例了！亲们看懂的举手！