代码教程——第十六章导航条（一）-易看设计

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

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

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

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

</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;

}