css+div 制作网页导航栏

课程开始：

前三节课， 我们知道了什么是 “内容块状元素和内联元素” ， 以及 XHTML+CSS 布局的

核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”， 这

次我们就利用这三个概念， 来制作一款， 经典的导航条， 别看它其貌不扬， 可是网上所有的

导航条都可以再它的基础上修改而来哟~， 厉害吧~！ 其实理论都是一样的， 只要你能理解并

学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！

OK！我们要做的导航条的效果如下：

鼠标移动上去背景变黑，并且字体颜色变成白色

OK！我们要做的导航条的效果如下：

鼠标移动上去背景变黑，并且字体颜色变成白色

其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着 KwooJan 做就是了，呵呵

【第一步】我们要先做一个容器（要求：ID 为“nav”，宽度为 960px，高度为：35px，位

于页面水平正中， 与浏览器顶部的距离是 30px；),这个容器就是放我们的导航的哟~代码如

下：

HTML 代码：

<div id="nav"></div>

CSS 代码：

#nav{

width:960px;

height:35px;

background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/

margin:0 auto;/*水平居中*/

margin-top:30px;/*顶部 30px*/

}

还有一点需要提醒的是， 为了页面在浏览器的兼容性， 不要忘记在 CSS 文件顶部加入标签重

置代码哟~

代码：

body,div{padding:0; margin:0;}

这里就不多说了，不明白的就看，课程顶部的课程关键词

怎么样， 作出来了没有， 效果是不是一个灰色条， 位于页面的正中间， 并且所有浏览器效果

一样呢~呵呵

(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的，本身我把整个

XHTML+CSS 的理论都压缩到教程里了，或者说教程的“知识点浓度”很高，有时需要你一字

不漏的去品我说的话，不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了，

KwooJan 保证你以后只要做出个页面就很 Easy 的兼容各种浏览器，并且代码绝对的精简！

CSS 文件加载速度大大提升哟~)

【第二步】

盒子做好了，我们就要往里面放导航条中的内容了“CSS 学习 学前准备 入门教程 提高教

程 布局教程 精彩应用” ， 如果我们把这内容(目前有 6 个)， 当成酒杯的话， 如果直接放到

盒子里面的话， 肯定会乱， 并且还会东倒西歪， 一点顺序都没有， 但是我们平时会用一个隔

板将每个酒杯隔开， 这样就是酒杯很有序的放入盒子， 并且牢稳而且防震， 方便使用！ 现在

我们把这个隔板叫做“有序列表”起个英文名字叫：ul,里面的每个单元格我们也给起个英

文名字叫“li”，大家想想里面的这个 ul 是不是和盒子里面的空间一样大，小了，酒杯放

不进去， 大了杯子就会不稳， 所以我们定义 UL 的时候大小一定也要和外面的盒子一样大哟~,

所以呢，我们的代码就知道怎么写了吧

HTML 代码

<div id="nav">

<ul>

<li>CSS 学习</li>

<li>学前准备</li>

<li>入门教程</li>

<li>提高教程</li>

<li>布局教程</li>

<li>精彩应用</li>

</ul>

</div>

CSS 代码：

#nav ul{

width:960px;

height:35px;

}

效果作出来了没有， 下面是在 IE6 和 FF 中显示效果(其他浏览器效果大家自己测试， 总结规

律)：

效果不一样吧，没关系，IE6 中盒子被撑大，FF 中却没有，但是我们的“酒杯”却出来了，

还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~

想出来了没有？什么没有？

没关系，我带着大家想想，因为<li>标签也是块状元素，所以他也有块状元素的“霸道”，

不允许其他元素和自己处于同一行，总共六个<li>,所以他们六个就像台阶似的纵向排列起

来了，我提示到这里，大家应该知道怎么做才能让这些“酒杯”横向排列了吧！^_^

对喽~用浮动 Float！可是让谁浮动呢，当然是<li>标签喽~代码如下：

#nav ul li{ float:left;}

效果是不是和下面的一样呢

大家会发现虽然“酒杯”横向排列了，但 IE6 和 FF 中的效果还是不一样的

1）盒子(#nav)高度不一样

2) 在 FF 中“酒杯”前面有个大黑圆点，而 IE6 中却没有！

解决上面这两个问题，也很容易，如下

1）做到这里标签 ul 和 li 有没有进行重置？只要我们在页面中新写一个标签，就要进行重

置，做法是，将 ul、li 标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”

2） “酒杯”前面的大黑圆点，是 FF 给 li 标签定义的默认样式，我们只需要将 li 的默认样

式去掉就是了，在 li 标签的 CSS 属性中加入“list-style:none;”就 OK 了

现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~

如果你做到这里的效果和我说的不一样， 没关系， 我把做到目前第二步的代码发出来， 你对

着上面说的再看看，绝对可以学会

【第三步】

第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴

着前面的文字。

好~！我们现在就将他们分开！设置<li>标签的宽度为 100 像素：

CSS 代码：

#nav ul li{

width:100px;

float:left;

list-style:none;

}

为了便于观察我们暂且将<li>标签的背景设置成红色(设置背景色，是页面布局中一个很重

要的方法，便于查看块状元素区域范围)

CSS 代码：

#nav ul li{

width:100px;

float:left;

list-style:none;

background:#900;

}

效果如下：

瞧瞧，发现问题了吧，我们的<li>标签的高度并没有和我们的盒子的高度一样，这就是为

什么在布局页面的时候， 经常会设置一下背景色， 就是这个道理， 不然的话， 你是发下不了

隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低哟~

现在暂不把<li>标签的背景色去掉，当我们把它调成我们需要的效果的时候再去掉！

继续，我们把 li 的高度设置成盒子的高度 35 像素，代码自己写，怎么样，高度一样了吧，

但是文字却位于顶端， 如何将它设置成居中呢， 对喽~设置行距(如果你不会， 建议你看看这

篇文章《两种方法实现垂直居中》)，在<li>的 CSS 代码中再加入下面这句代码：

line-height:35px;

效果是不是和下图一样呢

好垂直居中解决了， 轮到水平居中了， 这个就容易了吧， 直接在<li>的 CSS 代码中再加入下

面这句代码：

text-align:center;

怎么样，效果有点意思了吧~到这里我再发一次代码，保证大家每个步骤都学会！

好~！ 做到这里， 大家有没有想过一个问题， 因为我们的<li>标签是设置了宽度为 100 像素，

已经限定了它的宽度， 如果文字多了它不会自动伸缩的自适应的， 那这时候我们就需要去掉

其宽度， 这时候<li>的宽度就会缩小至文字的宽度， 也就是说， 如果我们再添加一些文字(把

我们的酒杯换成一个大个的)，这个<li>也会跟着变大，大家去掉宽度后试试，是不是这个

样子，这样我们的导航条就比较灵活了，不会对“酒杯”的大小有所顾忌了！

虽然这个宽度自适应解决了， 但是给文字的空间太少， 视觉上感觉不舒服， 那么我们就帮它

扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就 ok 了，这

里设置边距为 10px，在<li>标签加上下面代码，顺便把背景颜色去掉

padding:0 10px;

效果是不是这样

无论你的 “杯子” 是增大还是缩小， <li>不但宽度会随之增大缩小， 但是杯子和杯子之间的

距离永远不变！怎么样有点意思吧~！

我们将导航条做成了下面的效果

但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条

【第四步】

我们需要将上面的导航条做以下几个修改

1）给上面的导航加上链接；

2）链接文字大小修改为 12px;

3）并且规定链接样式，鼠标移上去和拿开的效果

修改方法如下

1）导航加链接，HTML 代码如下：

<div id="nav">

<ul>

<li><a href="#">CSS 学习</a></li>

<li><a href="#">学前准备</a></li>

<li><a href="#">入门教程下载</a></li>

<li><a href="#">提高教程</a></li>

<li><a href="#">布局基础教程</a></li>

<li><a href="#">精彩应用</a></li>

</ul>

</div>

2) 文字大小 12 像素，CSS 代码如下

a{font-size:12px;}

3）鼠标移动上面和拿开效果

#nav ul li a{color:#333; text-decoration:none;}

#nav ul li a:hover{color:#fff; text-decoration:underline;}

效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接

到这里，基本上一个导航条就出来了~不过为了能让大家再提高一个层次，KwooJan 就帮大

家对上面的导航条进行一下修改，算是抛砖引玉！

我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤

首先把链接 a 加上一个背景，以方便看出来链接 a 的区域

#nav ul li a{color:#333; text-decoration:none; background:#0FF;}

怎么样，知道 a 的区域了吧

现在我要将 a 的高度设定为 35px 和盒子一样高度， 这样我在把刚才的亮蓝色背景就可以完

全覆盖下面盒子的灰色了

于是我插入下面红色的代码：

#nav ul li a{height:35px; color:#333; text-decoration:none; background:#0FF;}

可是不管我怎么刷新浏览器，高度都没有任何变化，这是为什么呢？！

原因就在于 a 属于内联元素，内联元素是无法设置宽度和高度的，width 和 height 只是针

对块状元素， 说道这里， 解决办法就出来了， 只要我们把内联元素 a 转化成块状元素就可以

了，我们用“display:block;”将内联元素转化成块状元素。大家先不要加这段代码，闭上

眼想想界面会变成什么样子？

#nav ul li a{display:block; height:35px; color:#333; text-decoration:none;

background:#0FF;}

实际效果：

IE6 和 FF 显示效果居然大相径庭， IE6 中为什么所有链接纵向排列了呢？其实这个也很简单，

IE 认为 a 既然转化成块状元素，就拥有块状元素的特性---霸道，它是不允许其他元素和它

同一行，再加上也没有对 a 的宽度进行设定，所以才导致 IE6 中这么显示，不过 FF 中为什

么不这样呢， 和我们想象的一样， 那是因为 FireFox 认为 a 即使为块状元素， 也应该受到外

面<li>元素的影响，所以如此现实，究竟以谁标准，因为大家都认为 FF 是标准浏览器，所

以大家可以以 FF 为标准，不过 KwooJan 认为，不用管谁标准不标准，那都是相对的，我认

为 IE 标准，FF 就不标准了呢，我不愿意在这个问题上浪费精力，我更喜欢将精力用在思考

如何提高页面的浏览器兼容性！

看到这里我想大家应该知道如何让页面在 IE6 中显示的和 FF 中一样，很简单，只需要在 a

的 CSS 代码中加入“float:left;”

#nav ul li a{display:block; height:35px; color:#333; text-decoration:none;

background:#0FF; float:left;}

问题迎刃而解，这还是用到前三节的课程内容，如果你想不起来如何解决，说明前面的课，

特别是第二节的课，你没有真正理解！怎么做，你应该知道....回去再品品去

但是这样你不觉着，每个连接的左边和右边是不是太挤了，紧贴着 a 区域的左侧和右侧， 应

该怎么做？还是很简单，只需要再加上一句话“ padding:0 10px;”

#nav ul li a{display:block; height:35px; color:#333; text-decoration:none;

background:#0FF; float:left; padding:0 10px;}

现在再瞅瞅，是不是下面的效果

这样看看是不是不挤了吧，哈哈，看着舒服了吧，但是这离我们的想要的效果只有一步了，

因为现在看到的连接效果是，鼠标移上去和拿开背景都是蓝色的，我们现在只需要将，a 链

接中的背景去掉，移到 a:hover 的 CSS 代码中，并且颜色变成“#000”就 ok 了~

#nav ul li a{display:block; height:35px; color:#333; text-decoration:none;

float:left; padding:0 10px;}

#nav ul li a:hover{color:#fff; text-decoration:underline; background:#000;}

怎么样，和下面的效果一样么？

效果好多了吧，这下是我们想要的效果了吧~

当然！ 大家还可以把背景不设置成黑色， 用个图片也可以！ 现在大家明白， 为什么一开始我

说这款导航栏可以演变出成千上万的不同特色的导航栏了吧~万变不离其宗！

第四课的思路就是这样的，如果吃透了这节课，那么以后什么样子的导航都很轻易作出来，

如果你在和 js 很好的结合起来用~你就可以很自信的向老板提出加薪了！！！^_^

下节节课我将给大家用浮动方法布局一个页面，敬请期待！