离线下载
获取电子书

稻米鼠 · 更新于 2018-02-24 13:01:00

第二十一章 导航条(六)

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

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

这还有疑问吗?有!我要不说肯定会有人这么写:

<a href="#"><li>这是错误的写法</li></a>

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

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

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

<ul id="nav-items">
    <li class="nav-item"><a href="#">首页</a></li>
    <li class="nav-item"><a href="#download">下载</a></li>
    <li class="nav-item"><a href="#feature">特点</a></li>
    <li class="nav-item"><a href="#about">关于</a></li>
</ul>

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

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

看看前边的这部分 CSS :

#logo a {
    color:#333;
    text-decoration: none;
    font-size:24px;
    font-weight: 700;
    line-height: 50px;
}

把它复制一下,修改成:

#nav-items .nav-item a {
    color:#333;
    text-decoration: none;
    font-size:16px;
    line-height: 50px;
}

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

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

右键“审查元素”(Firefox 里是“查看元素”,以后我不说了),来看看 #nav-items 这个元素哦~

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

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

#nav-items {
    margin:0;
}

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

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

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

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

none 此元素不会被显示。

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

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

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

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

#nav-items .nav-item a {
    color:#333;
    text-decoration: none;
    font-size:16px;
    line-height: 50px;
    display: block;
    height: 50px;
}

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

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

#nav-items .nav-item a {
    color:#333;
    text-decoration: none;
    font-size:16px;
    line-height: 50px;
    display: block;
    height: 50px;
    padding: 0 20px;
}

再来看看效果:

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

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

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

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

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


本章学习卡片:卡片 21

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me