代码教程——第二十四章 导航条（九）

很多同学问，你看他们那谁家的小谁做的那个导航，鼠标一滑过还有变化，他们怎么做的？

那今天我们来讲一些更好玩的伪类，首先是 ：hover，这个讲的是某元素被鼠标滑过的时候的样式。当然如果不定义的话就是没有变化喽，就像我们前边写的那样，但是如果我定义一下呢？

然后我们去看看鼠标划过的效果：

看到变化啦，嗯，图上没有鼠标指针，但也猜得出来，我的鼠标放在下载上他的背景色发生了变化。你看他的文字大小啊、颜色啊，什么什么的其他东东是不是都没有变化？所以 :hover 是基于元素以前的样式进行变化的，我们只要把变化的内容写上就好了，相同的部分不需要重复的去定义。

原来鼠标滑过发生变化的代码竟然这么简单，曾经我们还当做一个什么什么的特效来看的啊！那么我们就再来点稍微复杂哦，看我改写成如下的样式：

我一下修改了好多内容，看看真复杂！但是仔细分析一下也就明白了，高度改成了 40px，所以 line-height 也改成 40px，这是为了垂直居中所做的相应的修改，而刚才高度上减少的 10px 则通过顶部内补 5px，底部增加 5px 的边框补回来了。因为上下是对称着添加的，所以文字依然垂直居中（看起来似乎没有变化），然后内补和边框都算作元素的范围之内（快递箱以及里面的填充物都算作整个箱子的范围之内），所以也不会影响 a 本身已经设定好的点击范围。

我们看看划过效果：

就是酱紫的效果了，怎么样？大家根据自己的理解修改上面的属性试试看有什么变化？

然后再说几个 链接元素常用的伪类：

:active 当前鼠标点下链接的时候

:hover 当鼠标悬浮在元素上方时

:link 当链接还未被访问过时

:visited 当链接被访问过之后

现在我们也很少用这么多，设置一两种就不少了，比如导航部分的链接，设置一个 :hover 和一个 :active 就差不多，这个几个的用法一样，大家可以自行进行各种惨无人道的变态实验，以便使自己确实掌握这些伪类。

至此我们对导航条的美化也算简单的告一段落，如果你愿意，可以开动脑筋看看还可以做些什么样的美化，虽然我们现在学的 CSS 属性不是很多，但是通过有机的结合以就可以做出很多养眼的效果，希望大家多动手练习一下哦～

那么是不是我们的导航到此就算做完了呢？不是的，其实还有一个小小的问题没有解决。我们把浏览器窗口调小看一下哦～

你说，哎呀，怎么都出去？其实不是都出去了，而是根本就不在里面。不信你把 #nav 的高度去掉试试看，他的高度就会变为 0 ，根本没有被里面的元素撑起来。为什么会这样呢？因为里面的这些元素都进行了浮动，但是 #nav 并没有浮动。

浮动的和没有浮动的元素仿佛是不在一个频道的两群人，总觉的他们相互之间对不上频率，那怎么对上频率呢？两个办法：第一、浮动到底，要是所有的元素都浮动那自然就在一个频率上了，但是想想都觉得超麻烦；第二、清除浮动，就是在浮动结束之后清除一下，表示我浮动完了，咱们还是好朋友哦，不许再闹别扭啦，乖～

所以我们用完浮动之后一定要记得清除浮动，清除浮动的方法有很多，但是我们现在先来讲一种，是最容易理解的哦。

首先 #logo 和后面两个 ul ，以及 ul 里面的 li 都已经进行了浮动，那么在这样的局部范围内也算是全部浮动，于是他们之间相安无事，问题出在这些浮动的元素和外部没有浮动的元素 #nav 之间，所以我们要在 #nav 的内部这些浮动元素之后加一个： <div class="clear"></div>,

于是变成了：

然后在 CSS 里面写上：

这样就可以了，为什么要这么写呢，这样定义以后，下次我们需要清除浮动的话，只需要复制 <div class="clear"></div> 过去就可以了，定义一次，可以多处使用，也算是很方便的，当然这种办法会多出一个空白的 div，虽然不影响界面，但是强迫症会比较难受，额……这个我们以后再讲其他办法。（强迫症别杀我……）

好了，现在我们去掉 #nav 的高度看一下效果。

这样就不会出来了……只是浏览器窗口较小的时候好难看………我们下节课再解决……（不要追杀我呀！）

本章代码