代码教程——第十六章 导航条(一)

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

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

其实说呢,写个导航很简单的,有啥啊?咱们合计合计啊,要个 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(像素)

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 代码教程——第十六章 导航条(一)

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏