html页面布局中间板块,Html 盒子模型布局及栅栏化

一、HTML常用盒子模型

一般的HTML页面布局依次拥有以下几个板块：

页头header、滚动图片banner、主体部分main、页脚footer

其中页头包含logo及导航栏nav，主体部分左右排布分为左侧content主题内容板块及右侧sideBar侧边栏板块。

一般整个页面需要放入容器container中，以便调节居中、背景等样式。

以下是常用的div布局：

二、栅栏化

栅栏化布局可以很方便适配div盒子所占宽度的比例，一般用grid进行命名。

如将某一div分为1:4的两块。可用以下代码：

.content{

background-color: green;

width: 960px;

height: 600px;

margin: 0 auto;

}

.aa1{

background-color: red;

height: 300px;

float: left;

}

.aa2{

background-color: blue;

height: 400px;

float: left;

}

.grid1{

width: 20%;

}

.grid4{

width: 80%;

}

aa1

aa2

其中，grid的作用就是栅栏化后，按比例给div块横向切分，然后设置其宽度。

原文：http://www.cnblogs.com/2BLIS/p/4894183.html