经典背景自适应导航栏布局之我见

一、前言

说起导航栏，几乎是每个网站必不可少的，也是极为重要的一部分。

开始介绍一下我所认为的一种比较好的自适应导航栏实现。

二、基本的HTML实现

html是一切网页的基础，也是最最重要的一部分，它决定了你怎么写CSS，JS。这里可以大概参考我之前写的一篇，论HTML的主要性。

<ul class="nav cf">
                <li><a class="current" href="/"><span>首页</span></a></li>
                <li><a href="/index/jobs"><span>招聘职位</span></a></li>
                <li><a href="/index/plan"><span>招聘行程</span></a></li>
                <li><a href="/index/history"><span>美团发展史</span></a></li>
                <li><a href="/index/people"><span>美团人</span></a></li>
                <li><a href="/index/help"><span>常见问题</span></a></li>
            </ul>

这里采用了美团校园招聘的头部方式。

三、CSS的实现

像上面说的那样，CSS是建立在HTML的基础之上的。

.nav { margin-left:352px; font-weight:bold; } 
.nav li { float:left; padding-left:1px; } 
.nav a { display:block; position:relative; margin:0 -1px; padding-left:20px; color:#FFF; }
.nav span { display:block; padding:42px 20px 18px 0; }
.nav .current { cursor:default; }
.nav .current,
.nav a:hover { z-index:2; text-decoration:none; background:url(i/bg-nav.png) no-repeat 0 0; } 
.nav .current span,
.nav a:hover span { background:url(i/bg-nav.png) no-repeat right 0; }

CSS的主要作用点是在a标签，之所以造成这样子的原因是因为可爱的IE6只有a标签支持:hover属性。;)

其中bg-nav.png为一整块背景图片。 这里省去了相关的reset CSS，即需要对应的样式重置。但我想这是每个公司都基础的部分，也是都默认包含的部分。

四、其中的亮点地方

1. 选中每一项栏目都不会有跳动的感觉；
2. 选中的一项保持在上方；
3. 精炼短小的代码和结构；
4. 其实上面都不是亮点，一切的一切都是为了自适应。;)

五、后话

前端开发可谓知易行难。不一样的人写出的代码会绝然不同。

看处和亮点我觉得还是在html和css的结合。这也是我所认为的。