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

一、前言

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

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

二、基本的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的结合。这也是我所认为的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值