代码教程——第二十一章 导航条（六）

上次我们把导航条写了一个雏形，就是看起来还行（这么难看居然说还行……我眼瞎）。我们的计划是现在给它加上链接，让他成为一个能干活的导航。

加链接这种事情对于现在的我们来说没什么难度了吧。如果你坚持做练习的话一定觉得小事一桩了。但是我们现在遇到一个问题：我们要给谁加链接？

这还有疑问吗？有！我要不说肯定会有人这么写：

为啥错啦，因为你女盆友用的 IE6 浏览器不支持，这个理由够用吧～

可是你不依不饶啊，那为啥错了？你先记着，a 标签里面的元素只能是文字和图片哦，后面我们再去慢慢研究他。

现在我们把这个修改一下，于是我们的导航代码变成了：

大家说，你这链接地址好奇特，咋不是个网址啊，咱说了，这个问题留到后面处理，先别着急。咱们先来看看视觉效果。

你说你开始怀疑人生，至少是怀疑我的教程。你等等，你究竟觉得有啥不好的？文字的颜色和下划线的问题我们讲过怎么解决了吧？

看看前边的这部分 CSS ：

把它复制一下，修改成：

注意选择器，现在是三层选择器了，下边的属性都看得懂了，因为前边说过了，那么来看看效果哦：

文字样式终于看的过去了，但是这位置……现在我们开始正式研究这个问题了哦～～强迫症的同学已经期待已久了吧？（嘿，别拍我，尊师重道！）

右键“审查元素”（Firefox 里是“查看元素”，以后我不说了），来看看 #nav-items 这个元素哦～

看到啦，他左侧有个 40px 的内补（图中蓝紫色的位置），上下各有 16px 的外补（图中黄色位置）。你望着左上角问我：“哪有数值？”来，转头，看看右下角的盒模型。

这些属性是我们设置的吗？我们查了一下 CSS 文件，发现不是，那么他又是浏览器给的默认属性。这些默认属性是我们想要的吗？内补好像有用，因为我们的导航项要与 logo 拉开一些距离。但是上下的外补明显不是我们想要的。所以去掉他。

看看 CSS 里已经定义过 #nav-items 了，所以给他的大括号里追加上 margin:0; 就好了。然后来看下一个问题：

现在位置没问题了，但是你看每个导航项的可点击区域（就是你可以点击到这个链接的范围）才这么大（上图蓝色的区域），你觉得体验会好么？请各位读者瞄准了点击，否则后果自负～～

这肯定是不行的，你说，好办，给 a 加上宽高，你可以试试看，我猜他不行啊，为啥不行？在这里我们要引入一个新的属性了。display，显示，这个元素怎么显示呢？

先说一下他的常用属性值：

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

果然除了第一句，剩下的我也没看懂呢，还是用我的话来说吧，block 是个块，就像 div ，是个已经打包好了的箱子，很乖，说什么听什么，好处理；inline，字面是在行里边，就是跟文字一样的特性，没打包的一堆东西，跑来跑去的，不很听话，你跟他说宽高内补外补的他跟你假装没听懂。剩下的问题咱们在使用中慢慢体会就好。

我们想想啊，一段文字加上链接，如果一行没显示下，是不是会分成两行显示？这个凭经验我们也知道——是的。于是链接跟文字特性很像，那他就是内联元素（inline），所以就解释了为啥给他宽高他不听话了。可是不听话不行啊，咱们要让他听话的，所以要把他设置为 block，所以给 a 填上相应的属性：

顺便高度 50px 也没有异议，那么宽度……你想过没有，要是出来一个导航项是五个字，你把它和两个字的导航项设置一样的宽度，他能好看吗？所以实际上我们要设置的是什么？是文字之间的间隔，对不对？只要两个导航项之间的文字间隔是一致的，就会显得很协调。这肯定就是内补或者外补了，现在的问题就是：加给谁？加什么？

告诉你啊，还加给 a ，加内补，为啥呢？无论是内补还是外补，无论是加给 a 还是加给 li 在外观上都是没啥区别的。但是 a 的可点击范围有区别。你说对对，还有这一茬呢，那加给 a 就对了，为啥是内补？简言之对我们点击进行反应的是箱子，而与箱子外面的泡泡纸无关，外补不算箱子的范围，但是内补算。所以我们给一个巧克力豆周边加上大量的填充物，然后弄个大箱子装就可以说是一大箱巧克力豆了。但是要是一个小盒子，装上巧克力豆再裹上半米泡泡纸，你说是一大箱就说不过去。现在需要箱子有一定的体积就往里塞喽～

再来看看效果：

是不是看起来舒服多了？下一节我们继续……写导航。

特别补充说明：本教程目前的 CSS 书写并不十分复合规范。

不是本人不知道规范，而是为了便于理解循序渐进，

现在是根据需求直接追加，只求达到效果，暂时不考虑细节。

等后面讲的差不多了再作规范，要不然都没认识几个 CSS 属性，我说谁先谁后你们也搞不明白。

本章代码下载