摘要：
　　这是艺灵带你轻松学会div+css的第八节课：分析网页布局结构。这节主要讲网页的布局结构，然后做一个简单的布局轮廓图，即复习了前面的知识又引入了新的知识点......

第八节：分析网页布局结构

从这节课开始，我们讲解一些关于网页布局方面的内容，毕竟我们的代码需要按设计稿走。如果想跟设计稿的效果很相似，就必须要先掌握布局。如果对设计稿没有一个大致的布局结构，我想，这页面是没法做了......

1、网页布局

通常情况下，一个网页被分为三部分：头部、主体、页尾。不管是非常简单的坑爹网站百度还是很复杂的淘宝首页，都逃不了这三部分！只不过，对于复杂的页面来说，还会进行更细的划分。我们还是先来看下百度的布局结构划分图吧！配图：

看完图之后，运用我们前几节课的知识点，大致可以将这个网页布局的轮廓图画出来。

1.1、布局分析

前面说了，网页被分为三部分，我们要画出轮廓图，势必要写三个div标签吧！当然

1.1.1、初步轮廓

<div>头部</div>
<div>主体</div>
<div>尾部</div>

效果配图：　

根据目前状况来看，我们很难看到这三块所占空间大小。怎么办呢？边框或背景色都能解决这个问题！那我们就先来加个边框让其可视化吧。

1.1.2、边框属性

/*添加边框属性，便于前台页面看效果*/
div{
　border:1px solid #f00;/*边框=宽1像素，实线，红色*/
}

此时我们再刷新前台页面可看到明显效果，配图：　

现在我们可以看到效果了，但这三个div里面的内容太少，布局看着很不爽！怎么办呢？添加高度解决。

这个时候就会出现一个问题，如果把高度直接加到div上面，那么这个页面中三个div的高度就全部一样高了。怎么解决呢？选择符出场。

按照常理，我们将头部命名为：.header，将主体命名为：.content，将页尾命名为：.footer。好了，我们现在可以任性的设置高度了。

1.1.3、高度属性

<!--css部分-->
/*头部*/
.header{
　height:70px;/*高度=70像素*/
}
/*主体*/
.content{
　height:500px;/*高度=500像素*/
}
/*尾部*/
.footer{
　height:70px;/*高度=70像素*/
}
<!--html部分-->
<div class="header">头部</div>
<div class="content">主体</div>
<div class="footer">尾部</div>

我们再来刷新下前台页面，配图：　是不是有点轮廓的样子了？但是会发现一个问题：所有的div距离左边和上边都有一点空隙！是不是很奇怪？？？

1.2、审查元素查看问题

还记得之前讲过的审查元素功能吗？当你遇到问题的时候，这个可以帮你快速发现问题所在，同时也会告诉你如何解决。前提是：你必须会用，并且能看得懂真正的问题！

还是来个现场演示吧！鼠标放到我们刚说的空白区域，右键--审查元素。通过右侧可直观看到问题所在。配图：原来是由于margin引起的。

1.3、margin外补丁

同学们可以打开手册，查询下这个margin外补丁是什么及其取值情况。

margin的取值有多种情况，值分别可以为：一个，两个，三个，四个。当值是四个的时候，则表示上，右，下，左；值是三个的时候，则表示上，左右，下；当值为两个的时候表示上下，左右；当值为一个的时候表示上下左右。为了便于理解，配图一张：

1.4、页面简单重构

接下来就是解决问题了，我们可以重置body的外补丁，将其设置为零即可。当然了，还有很多元素会有默认的外补丁或内补丁，为了简单，我们可以这样一步到位！

1.4.1、css简单重构

<!--css部分-->
*{margin:0;padding:0}

一行代码搞定一切意外bug！我们再刷新页面看下效果吧，配图：　已经没有空隙了吧！

1.5、布局居中

通常，头部和尾部是可以全屏通栏的，主体部分一般是1190宽度，并且居中在水平位置上。再看看我们的这个轮廓，显然没有符合要求，那我们接着来改吧。

1.5.1、先改宽度

/*主体*/
.content{
　height:500px;/*高度=500像素*/
　width:1190px;/*宽度=1190像素*/
}

此时宽度已经好了，但并没有水平居中，而是居左，配图：　怎么办呢？我们还得用这个强大的margin来解决！

1.5.2、布局水平居中

/*主体*/
.content{
　margin:0 auto;/*外补丁，上下0，左右自动（即居中）*/
}

再来刷新页面，即可看到神奇的一幕！主体已经水平居中了！配图：　

但是现在感觉布局有些紧凑，我们可以让主体跟头部和页尾都保持一段距离。用什么？还是用margin！

1.5.2、垂直方向上空距离

/*主体*/
.content{
　margin:10px auto;/*外补丁，上下10像素，左右自动（即居中）*/
}

此时再刷新前台页面，可看到有空隙了，不像之前那么紧凑了，配图：　

至此，本节课程结束

2、demo欣赏

本节课程小窗欣赏：如果想看全屏效果,点此进入demo全屏界面

3、录制视频

标题：艺灵带你轻松学会div+css08分析网页布局结构

视频备用地址：
淘宝：http://cloud.video.taobao.com/play/u/759415648/e/1/t/1/p/1/39016454.swf
优酷：http://player.youku.com/player.php/sid/XMTU3OTIxMDEwOA==/v.swf
土豆：http://www.tudou.com/v/LJqZQ8ZuUJ4/v.swf
腾讯：http://static.video.qq.com/TPout.swf?vid=n0301ikr57q&auto=0

如果看官想看更多视频，可在优酷、土豆、腾讯视频中搜索下：艺灵设计哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-05-30/405.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。