HTML5—8天轻松学会写网页（四.6）综合实践

我们已经做了很多的铺垫，从铺垫中我们也学到了很多知识，比如说margin、padding、盒模型的宽高计算方...



我们已经做了很多的铺垫，从铺垫中我们也学到了很多知识，比如说margin、padding、盒模型的宽高计算方式等。

现在我们来回归目标，实践所学的内容。



从最简单的地方开始，现在我们的右侧超链接是拥挤在一块的，但我们的理想效果是希望他们之间有些间距的。

如果大家对我们之前所铺垫的内容掌握了话，那肯定心里已经有数了，边距就是margin，我们通过Chrome的检查元素来试验，试验好之后，达到了我们预期的效果，在把代码写入到sublime中。



在数字1中，我们选中了致蓝鸥人标签，在数字2中，我们发现有设置样式的nav，在其中我们写入margin-left:40px；之后,就有了边距了，然后和我们理想效果还有误差的就是文字大小，所以我们又设置了font-size:14px，就达到了数字3的一个效果，此时就跟我们理想的效果一样了。

那我们继续找未完善的点。



我们发现此时样式上还有不同的是与顶端的距离，但在之前我们已经介绍过此时不应该使用margin，虽然我们使用margin-top：20px也会达到我们期望的效果，但效果是因为背景颜色是白色，所以看不出不合适的地方，我们仍然使用图来看看两个效果的不同。

使用margin：



我们不难发现，使用margin-top：20px；其实已经有了顶部空间，但此时的效果确实将div容器一同顶下来的。现在看起来可能没有什么太大的影响，这是因为我们还没有做其他的布局，但试想一下，如果整个界面的颜色不是白色呢？那么margin-top的那部分白色就会变的很显眼，我们在来看看padding的效果。

使用padding:



我们分别设置了padding-top和padding-bottom，并且我们是在内容的基础上，撑大了元素的宽高，从而达到了与顶部留白的效果。但现在实际上仍然有一小块留白的，就是我标红的白色区域。这一块区域并不是我们此时导致的，而是从一开始就有。关于这个问题，我们晚点再说。但此时我们想要达到顶部有留白的效果，就使用padding的方法。

我们继续找不同之处：



我们发现理想效果是左边的课后帮与后边的超链接都是居中的状态，并且随着我们更改浏览器大小的同时，始终保持居中的位置。

但此时我们达到的效果明显是紧靠两侧的，我们现在来完善一下这个效果。



数字1是我们选中的div，因为顶端都是包裹在div中的，如果我们想要居中，是一定要搞定它的。此时右侧数字2就出现了设置元素样式的界面，其实跟刚刚我们设置的padding是一样的位置。那么首先我们从简单的开始，就是设置960的宽度，然后想要让元素居中，我们之前提到过，应该使用margin-left：auto和margin-rigth：auto;就达到了数字3我们的理想效果了。

此时我们就把这些在开发者工具中写的内容写到sublime中。



所有标红的地方就是我们此次改动的部分，首先我们调整了超链接的边距在.nav中，其次我们写了一个top样式给div，并且在其中设置padding以及宽度和居中，最后我们在div标签中引入样式。

到现在为止，我们顶部的标题栏完成的就差不多了，这里最后的一个问题其实我们也遇到了，不过在上面我们并没有去解决他，就是在上面我们提到的一小块留白。我们通过图来看不同。



我们通过现在达到的效果和最终的理想效果对比，我们发现顶部留白不一样的，明显现在的顶部留白要多出来一部分，还记得前面的图片中也有一小块留白吗？



这一小块留白到底是什么东西，我们通过下一节来分析。

    关注 精英教育