标签：

版心和构造流程

阅读报纸时容易发明，虽然报纸中的内容很多，但是颠末合理地排版，版面依然清晰、易读。同样，在制作网页时，要想使页面布局清晰、有层次，也需要对网页进行“排版”。

“版心”(可视区) 是指网页中主体内容地址的区域。一般在浏览器窗口中程度居中显示，常见的宽度值为960px、980px、1000px、1200px等。

1 构造流程

为了提高网页制作的效率，构造时凡是需要遵守必然的构造流程，具体如下：

1、确定页面的版心（可视区）。

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML布局 。

4、CSS初始化，然后开始运用盒子模型的道理，通过DIV+CSS构造来控制网页的各个模块。

2 一列固定宽度且居中

最普通的，最为常用的布局

3 两列左窄右宽型

好比小米  小米官网 

4 通栏平均漫衍型

好比锤子  锤子官网 

经典的构造 1 行构造

1）根本的行构造

蓝色区域宽度是固定的巨细。

2）行构造自适应

以百分比的形式来界说蓝色部分宽度。它的宽度就会跟着浏览器窗口的宽度变革而变革。

3）行构造自适应限制最大宽

添加max-width属性，限制最大宽度，当宽度变得小于max-width时，宽度显示以设置值为准，当宽度变得赶过max-width时，宽度显示为max-width。

4）行构造垂直程度居中

5）多行构造固定宽

6）多行构造某部位自适应

自适应部分的宽度以百分比的形式界说。

7）行构造导航随屏幕滚动

2 多列构造

1）两列构造固定宽

2）两列构造自适应

容器宽度会跟着页面变革而变革，，包孕容器中的每一列。

3）三列构造固定宽

4）三列构造自适应

3 混合构造

1）混合构造固定

2）混合构造自适应

4 圣杯构造