仿站

制作网站导航部分其实有很多种写法，比如 html5 里有专门的 nav 标签。不过这次我们写的是一个老气的页面，而且是很简单的网站导航制作，时候初学者，所以我们也用一些常用的东西，这样你都别人代码的时候才不会太过震惊，这东西居然还这么用？

首先导航部分我们先把他总的给括起来：

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

建立一个 id 为 nav 的 div ，用来包含所有导航部分。那么我们希望导航的背景色是接近黑色的灰，比如 #2D2D2D，那么我们在 css 里写上：

#nav {
background:#2D2D2D;
}

当然，如果你这时候去看页面，会看到依然是空白一片的，为什么呢？因为这个div 里没有任何东西，然后他的大小是 0 * 0，自然也就没有任何显示了。那么我们来规定一下它的大小吧，比如高度 45 px，那宽度呢？从左到右，我希望是通栏的啊，对吧，要不跟下面的通栏海报不搭配啊。那么宽度就是 100%。这个百分比是相对的，相对于他的上一级元素，那么 #nav 的上一级元素是谁呢？我们还没写别的，他的上级只可能是 body 标签了。

好，我们把 css 里填写上高度和宽度：

#nav {
background:#2D2D2D;
height:45px;
width:100%;
}

预期中网站导航效果应该是这个样子的：

希望你也成功做到了这一步，如果你检查了每一个字幕，每一个标点都没发现问题，但是就是显示一片空白或者连标题都是乱码的话，你在 Notepad++ 菜单里找“格式”，把两个文件都设置为 utf-8 就好了，如下图：记得每个文件都要设置一下，这就好像作图的时候使用 RGB 色彩还是 CMYK 色彩一样的问题。

然后回过头来注意我们这个页面的效果，我们不禁要说：“我累个擦，怎么还有白边啊？”导航上边不是应该紧贴顶边的么？都设置宽度 100% 了，左右还没填满？这个问题出在 body 身上，浏览器会给一些页面元素一些默认的属性，比如字体多大啊，什么字体啊什么什么的。这个是body 默认有个外补（外补这个东西后面讲），那么我们需要消除这些默认属性对我们的影响，所以我们还要为此加上一些css：

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

然后我们的代码变成了这样：

我把它们放在了 #nav 的前面，当然其实他们的先后顺序并不重要，但是按照他们的层级去写还是有助于以后我们阅读代码和查询的，一般的全局的要写在最前面，上一层要写在下一层的前面。

好了，再看代码，选择器我写了 html, body ，其实这俩我单独写哪个你都能看明白，就是给某个标签的元素指定他的 css 样式。那么现在两个选择器中间用逗号（英文逗号）隔开呢？也没啥特殊的，就是给他两都设置如下的 css 属性。

margin 是外补，就是在元素外边补充空白，padding 是内补，就是在元素里边补充空白。这两个我们会在后面专门的去讲解，现在就先知道有这么个事情继续可以了。我把他俩都设置为零，于是就相当于没有他们什么事了，也就消除了影响。

零是个很特殊的东西啊，我说过在 css 里数值要写单位，但是 0 却可以不写单位，因为无论什么单位 ，0 都是等价的。别抬杠，我知道 0°C 和 0°F 和 0°K 不是一码事，但是我们写网页目前还用不到温度这样的属性。看看效果：

看看，多好，多黑！反正预期效果有了。

下面我们准备往里放内容。但是在这之前我们要先讲一讲内补和外补。

我先举个例子，现在快递很暴力，我们的包裹都要多层保护才安心。所以我在我的纸箱外面包了一层塑料，厚度是五厘米（夸张了，别在意这个细节）。那么我的纸箱和其他纸箱放在一起，纸箱和纸箱间的距离是多少？就是隔着的那五厘米塑料，对吧？要是两个纸箱都裹着五厘米塑料呢？那就相距 5+5 = 10 厘米。这好像小学一年级数学题。这个裹塑料就是外补。

那么其实保护我们的物品还有一种方法，就是在箱子里面垫上海绵，假设我垫了三厘米海绵再放货物，那货物距离箱子多远？当然就是隔着的这三厘米海绵（别跟我说货物沉把海绵压扁了，我买的劣质海绵，就是不变形）。这就是内补。外补（margin）和内补（padding）都可以指定特定的方向（上下左右，top，bottom，left，right），写法如下：

margin-top:5px;

这就是在元素上面空出五像素来。其他方向以此类推。不写方向的话就是一起设置四个方向，规矩有些复杂，我说说，你听听，记不住的话就等后面慢慢理解。

margin:5px;

这个是四个方向都外补 五像素。

margin:5px 10px 8px 0;

四个数值的话就是上右下左的顺序，从上开始，顺时针。就好像时钟从十二点开始转起，这样想就记住了。

margin:5px 10px;

两个数值的话，平均分配啊，第一个数值代表上下（上下两个方向相同的数值），第二个数值是左右。两两相对，想到这个词就记住了。

margin:5px 10px 8px;

还能再变态点吗？第一个数值是上，最后一个数值是下，剩下的不够分了，左右共用中间的一个数值。这个上下级总是要分开的，中间的左右平等的才可以共用，上边是长辈，下边是晚辈中间平等的是哥们，哥们是一个辈分的，所以一样。这东西你记不住你就先看明白第一种就好，如果能学会前三种就很好很好了。好了我们现在回到我们的导航代码上来：

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

这是我们上一章的成果，现在我们要是直接在里面写内容的话肯定默认是左对齐，就贴到最左边了，不好看。1920px 宽的显示器，你左上角显示导航，找着都觉得累。那么我们规定一个内容宽度，比如 960px ，我页面的主体内容都在这个宽度范围之内。然后这个960像素的区域又处于显示器的中间，这样就很舒服，也是我们平时最最基础的布局方法。

好了，我们添加一些代码变成如下：

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

这个 #nav-content 宽度是 960px ，高度应该跟外边的 #nav 一致，是 45 像素。然后为了我们能看到效果，我先临时的给他一个背景色（如果不设置背景，一般的元素都是透明的，我们就看不到了），所以 css 如下：

#nav-content {
background:yellow;
height:45px;
width:960px;
}

放在一起看看：

然后我把浏览器最大化之后看看效果：

黄色的区域，也就是 #nav-content 的宽高都没问题，但是他在最左边，而不是页面的中间。我们要让他在中间。你可能想到了，用外补或者内补把他顶到中间去（在他边上垫上东西，使他呆在合适的位置）。这个想法很正确，那么上下方向肯定是不用补了，都是 0 就挺好。可是左右呢？该补多少？你说我的显示器 1920 像素宽，一边补 480 像素正好。可是你考虑过浏览器的边框么？当然这还是小问题，网页可不是只给一个人看的啊，别人显示器不是这么大怎么办？更简单的浏览器窗口大小变化了怎么办？

所以我们左右补的不能是一个固定的数值，然后我们要这么写：

margin:0 auto;

上下补零（第一个数值），左右自动（第二个数值）。自动就是随便啊，我说了左右平起平坐的，那为了不打架就一人一半最合适啊，来，加上去试试效果。

成功了吧，这个就是我们让元素居中的常用方法。但是你要注意，被居中的元素一定要有固定的宽度啊，否则这事好像不是简简单单平均分配就能解决的了，您说是不？

这个导航啊，可以当做一个列表看（谁第一个这么想的？其实我真心想拍死他！），就像这样

首页
分类
关于
联系

反正都是一项一项的鱲角出来……我怎么还是觉得有点牵强。所以我们使用无序列表来表现。

<ul>
<li>首页</li>
<li>分类</li>
<li>关于</li>
<li>联系</li>
</ul>

然后我们把这段代码放在 #nav-content 里面试试看

打开页面……

天啊，坑死个爹了，谁说这像导航的？我保证我不打死你。可是，现在好多页面都用这个方法写的，所以我们还是坚持着往下走走好了。

现在我们要给上述代码规定一些样式来改善现在这种坑爹的状况。首先我们要写一个选择器，你说就写 ul 或者就写 li 就可以选择这两个标签了。可是你再想想，这样可是对整个页面的 ul 或者 li 标签起作用的。你希望除了导航以外的列表也发生变化么？当然不是，所以我们要缩小选取范围。

其实用语言表述的话，我们需要选择的是 #nav-content 里面的 ul 还有 #nav-content 里面的 li ，对吧？然后看我怎么表达这个意思。

#nav-content ul {
}
#nav-content li {
}

看到了，用一个空格分割两个选择器，就表示什么里面的什么。选择器可以一个很神奇很强大的东西，他很复杂，我们分在课程中一点点学习。好了，开始写 css，首先 ul 就是个框，高度跟外面的 #nab-content 一样就行，宽度先不管他了，什么外补内补全都不要，于是就是：

#nav-content ul {
height:45px;
margin:0;
padding:0;
}

这个挺好理解的啊，那么 li 呢？高度 45 像素也没问题，宽度应该多少？你说多少都不合适，因为我现在导航里写的都是两个字看起来很整齐好像很好办，但是如果有五个字的导航项呢？“请点个赞吧”和“首页”用一样的宽度就混乱了，这时候我们需要的是什么？间隔，相互之间的间隔是一样的。你想到了外补和内补。那用外补还是内补？应该是内补，内补算是箱子里的
东西，也就是箱子跟着变大，这样我们可以点击的面积比较大，用外补，你补的部分没法点击，那就只是视觉上的作用了。

#nav-content li {
height:45px;
margin:0;
padding:0 30px;
}

这个可以看得懂吧，我们试试效果。

结果一看，继续坑爹，这时候我们想到一个关键的问题，这些导航项要横排啊，这么竖着怎么看怎么坑的。怎么横排？加一个 float:left;

#nav-content li {
height:45px;
margin:0;
padding:0 30px;
float:left;
}

浮动，方向是左，再看看效果

这次就知道了，一些元素想要横排，就让这些元素全都向左浮动就行了。然后我们继续看，这导航还有很多问题，第一个，前边的圆点是什么鬼？去掉！

list-style:none;

列表的样式是什么？以前是圆点，现在不想要了，设置为没有。文字垂直居中啊，都在顶上要飞走么？

line-height:45px;

因为导航只有一行，那么这行的高度跟外边元素的高度相同的话……基本就是居中了，多行文本这个方法肯定不行，不信你试试。都写上再看效果

好像有点像了哈，现在在解决一些小问题，那个黄色背景是我们为了可以看到 #nav-content 的位置而设置的，实际上一会我们要去掉那么黑色的文字在接近黑色的背景上就找不到了，给他个浅色吧

color:#EFEFEF;

文字还要再大点，要设置一个字号，比如：

font-size:16px;

就这些个你能看不懂？然后顺手去掉到 #nav-content 骚黄的背景。

再看看效果

好像差不多看得过去了，加链接喽，不加链接的导航有毛用啊！加链接很简单啊，大家一定都会的

<ul>
<li><a href="index.html" target="_blank">首页</a></li>
<li><a href="cats.html" target="_blank">分类</a></li>
<li><a href="about.html" target="_blank">关于</a></li>
<li><a href="contact.html" target="_blank">联系</a></li>
</ul>

这个都会吧？你问 target="_blank" 是什么？这个是在哪里打开，不写的话默认是在当前标签页打开，指定为 _blank 则是在新标签页中打开。来来来，咱试试效果

当时我就哭了啊，我第一次觉得链接能这么难看！这都什么色（shair 三声）！改颜色！

#nav-content li a {
color:#EFEFEF;
}

看到啦？三层的选择器，嗯嗯，这个一定要看懂啊。

好了，颜色终于回来了，我刚才被吓得都想躲起来了，下一个问题是下划线

text-decoration:none;

对文字的装饰是啥？老子杀装饰都不想要啊！

然后效果就回来了，但是你移动鼠标看看，除了文字上剩下都点不了，就这么点的点击范围可不好，点击之前还要瞄准文字，老眼昏花的人可玩不了。你肯定会说，我给 a 标签也设置上宽高！好的，我们试试看哦。

#nav-content li a {
color:#EFEFEF;
text-decoration:none;
width:100%;
height:100%;
}

我们说了，宽高的百分比是相对于外部元素的，也就是现在 a 的大小应该和外部的 li 是一样的。但是事实上文字外边还是点不了。这时候我们要引入一个新的属性 display显示的效果是什么样的呢？常用的有 inline ，就是在行里面，比如 b 标签可以加粗文字，那么被加粗的这部分文字依旧按照文字原有的样式排版，比如该换行换行，都没问题。

但是如果是 div 呢，我们说了，div 是个盒子，盒子就是矩形的，所以不可能产生折行之类的效果。这时的 display 属性值是block ，显示成块。

现在我们遇到的问题就是 a 默认为行内元素（inline），那他就跟文字一样的效果，所以你设置了宽高也没起什么作用，现在我们要让他作为一个块来显示。

display:block;

然后你试了一下说不行，说我骗你。哼哼，其实明明有变化了，只是你没发现。添加 display 属性之前只有文字可以点击，现在文字上下都可以点击了呢！

那文字左右呢？是啊，左右呢？左右不是被 li 的内补（padding）占领了吗？都塞上泡沫了 a 自然就过不去了啊。那，把泡沫去了？可这也不是我们想要的效果啊，算了，把泡沫塞到 a 里面试试看功能实现了，但是美观和体验还差点。比如说我希望让导航项之间有个分割线，这样用户就知道鼠标大概点在哪个范围内比较准确了。

这个用边框就可以实现，不过边框这东东比内部外部还要复杂。他不光有四个方向，还有边框样式和边框颜色。

border-width
border-style
border-color

我这么一写你就看明白他们什么意思了，他们还可以带上方向，比如

border-top-width
border-left-style
border-right-color

这么说来设置一个元素的边框果然是个大工程。所以我们还是浓缩一点写吧。

border-right:1px solid #555;

右侧边框一像素宽，实线，颜色 #555。#555 就等价于 #555555 ，这样写短一点。现在我们把这条属性加给 li 元素。

然后效果如下，边框的颜色不很明显仔细看 。

真好，中间就割开了，但是有木有觉得最后还多一条啊！其实最后一个 li 根本就不用有边框就可以的。这个事情描述如下：

所有的 li 右侧都是 1px 的边框，但是最后一个 li 没有边框。前半句上边已经实现出来了，现在再告诉一下最后一个不要边框就对了。

最后一个，这个选择器怎么写？

#nav-content li

这是我们前面选择 li 的选择器，

#nav-content li:last-child

这是选择最后一个 li 的选择器，就是他们中间最后一个孩子，好理解吧，那要是第一个 li 呢？

#nav-content li:first-child

So easy！就是这么好玩~可惜的是 last-child 在 IE 6—8 中好像不被支持。让我们默默的为笨笨的 IE 竖起中指。

好了干正事

#nav-content li:last-child {
border:none;
}

不过要记得啊，这段代码要放在 #nav-content li 那段之后，就像酱紫。

为什么呢？当 css 冲突的时候，以后面的为准。 #nav-content li 中的设置对最后一个 li 起不起作用？当然起作用，所以最后才多了一条竖线，然后我们才要消除这条竖线。就好像先是我们一人一个苹果，然后在从你手中拿走苹果，好了，我有苹果你没有的效果达到了。反过来说的话就是，你手里没有苹果，然后跟咱们一人一个苹果，结果大家都有苹果，效果就没达到。
虽然真心说不上怎么好看，但是我们简陋的页面中简陋的导航算是有了，你要是有兴趣可以试着用现有的知识去美化它一下，一切都是可能的，只要用心尝试就可能达到目的。