稻米鼠 · 更新于 2018-05-24 22:00:34

第十六章 导航条(一)

所有的读者都可以通过此链接(https://code.pubu.im/reg/b6mebkgg18lbtrr)注册,来和我们交流

已付费的读者请与我联系,告知我您的支付宝账号与常用邮箱,我会邀请您加入 VIP 交流频道,方便我们更深入的探讨代码。

我就一直在想,我们应该把这个页面写成什么样的,是高大上还是……还好,后来我的懒惰打败了我——写个简单的!

但是不管怎么说,再懒也得动手了,先写个导航,嗯,虽然是个单页面网站,但是还是可以有导航的。反正也没老板指手画脚,所以随心所欲点挺好的。

其实说呢,写个导航很简单的,有啥啊?咱们合计合计啊,要个 Logo,几个导航项(什么首页啊,联系啊,关于啊这类的),一个搜索(前边我们学了主要功能代码),最多再加个登陆注册。这就是一般导航条(放这么多东西还叫导航条?)的所有内容。

我说啦,咱就一个单页面网站,一个 Logo 和一组导航项妥妥的了~。那我们就把他们写出来哦~

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

这段代码写在哪里知道吧,上一章的代码里我已经标识出来了哦,

然后我们同步的去写 CSS,就是在我们前边的 CSS 文件里写下如下代码:

#nav {
    width:100%;
    height:50px;
    background:#F3F3F3;
}

开始解释啊,因为这是第一次,我会努力说的很详细,以后会简单些。

#nav 是说 id="nav" 的元素,就是先说名字,再说事情,那个张二狗啊,今天的戏里你去扮演旺财,穿黄色的戏服,再戴上长耳朵哦。叫了名字,就告诉他,大括号里就是你今天的行头,都穿上就对了。

然后我们看看 #nav 今天都有什么行头哦。width:100%; 这个是说宽度,宽度 100%,这里就又有问题了,这是谁的 100% ?百分比是有参照物的,那么在这里的百分比是说父元素的百分之多少,什么是父元素?顾名思义就是他上一层的元素,换言之是套在他外边紧挨着的那一层(不是套在外边就行,是紧挨着的!),所以 #nav 的父元素就是 <body></body>。为什么不是 <html></html> ?虽然也是套在外面,但他不是紧挨着的,中间还套了一层 <body></body>。所以, <body></body> 是父元素,而如果非要论起来 <html></html> 就是爷爷元素了(事实上没人这么说,也没这个名词,在此只是为了解释)。

现在 #nav 的宽度就和 body 的宽度一样了,那高度呢?我们写了 50px,这个就没啥解释的了。最后 background 设置的是背景,背景色的值为 #F3F3F3 (这个看不懂的朋友去研究一下 RGB 颜色的 HEX 格式),当然颜色也可以用 red,blue 之类颜色名称表示。

然后我们就可以看看效果了,如果你写对了的话基本应该是这个样子的:

来注意看灰色那块就是我们刚才写出来的效果。

然后你说了,看起来你想做的这个导航应该是通栏的,但是好像左右没到头,上边也差一点啊!嗯,我来解释一下,这不是我的另类的设计,这是我们写代码遇到的第一个问题,作为一个通栏导航,我当然希望他的上左右三面都紧贴着边的,可是现在没成功,为什么呢?

是因为浏览器对每个元素(标签)都有一个默认的样式(所以前边我们说 div 的默认样式几乎为零,所以很好用),那么根据我刚给出的这个条件来判断,虽然我们还不是很了解情况,但是也基本可以判断出问题更可能出在 body 身上。

确实的,这里是因为 body 默认有一个外补(margin)造成的,关于外补(margin)我们晚些再讲,现在先来解决问题,方法当然很简单,就是把外补(margin)设置为零就可以了。但是一般的一些谨小慎微,希望不出任何意外的朋友会把内补(padding)顺便也设置为 0 ,而且既然 body 设置了,为什么不顺便给 html 也来一发呢?所以 CSS 里面添加如下内容:

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

大家注意了哦,上面代码中的 html 和 body 分别指的是两个标签,二者两个标签有相同的 CSS 属性,所以我们放在一起定义,我们用一个英文逗号来分隔两个选择器,然后后面大括号写上他们的共同属性,当然了更多个元素也是这样的格式去写,很方便是不是?就好像张三,李四你俩穿一样的行头!一个意思。

因为这个定义是最外层的,我们本着从整体到局部的原则,把他写在前边,而 #nav 的定义因为是内层,所以放在后面,这样符合逻辑顺序的 CSS 是为了方便我们日后的阅读,是一个习惯问题。

所以我们现在的 main.css 文件全文如下:

/* 这是我写的第一个 CSS 文件,内心十分的激动,在这心潮澎湃之余,我想到了一个真理 —— 稻米鼠真帅! */
html, body {
    margin:0;
    padding:0;
}
#nav {
    width:100%;
    height:50px;
    background:#F3F3F3;
}

index.html 文件全文:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我们的目标是抢前端的饭碗!</title>
        <link href="styles/main.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="nav">
        </div>
    </body>
</html>

来看看现在的效果哦:

终于三边都挨上了,欧耶~

那么大家都看到了,其实 CSS 文件就是这样一条一条的去定义元素的样式,我们只要知道这个元素有什么样式,和这个样式都可以有什么属性值就好。当然这些要靠我们的日常练习去积累,而不是死记硬背,一定要记住这一点。然后补充一些小知识哦~

在 CSS 里数值如果有单位就必须带上单位,否则会出错。但是有一个特殊情况是 0,因为无论什么单位,0 是等价的(幸好不用考虑摄氏度和华氏度),不会因为没有单位产生歧义。

Html 里的属性值我们却常常省略单位,因为在 Html 里的属性值若不特别说明,则默认单位是 px(像素)


本章学习卡片:卡片 16

本章代码下载:本章代码


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

alay9999@163.com (刘源)

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

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