常用布局（浮动布局+绝对定位布局+圣杯布局）

常用布局：

1.流式布局

2.浮动布局

3.绝对定位布局

4.圣杯布局

*{padding:0px;margin:0px;}

body{color:#FFF;}

/浮动布局/

/*.header{height:50px;background-color:#333;}

.bd{height:150px;background-color:#999;}

.footer{height:50px;background-color:#333;}

.main{height:150px;float:left;width:1065px;px;}

.leftside{height:150px;width:150px;background-color:#FC3;float:left;}

.right{background-color:#F36;height:150px;width:150px;float:right;}*/

/绝对定位布局/

/*.header{height:50px;background-color:#333;}

.bd{height:150px;background-color:#999;position:relative;}

.footer{height:50px;background-color:#333;}

.leftside{position:absolute;width:150px;height:150px;background-color:#FC3;}

.main{position:absolute;left:150px;width:1065px;height:150px;}

.right{position:absolute;left:1215px;width:150px;height:150px;background-color:#F36;}*/

/圣杯布局/

.header{height:50px;background-color:#333;}

.main{background-color:#0F0;}

.bd{height:150px;background-color:#999;position:relative;}

.footer{height:50px;background-color:#333;}

.bd{padding:0px 150px;}

.main{float:left; width:100%;min-height:150px;}

.leftside{float:left; width:150px; margin-left:-100%;height:150px}

.right{float:left; width:150px;margin-left:-150px;height:150px;}

.main{background:#D6D6D6;}

.leftside{background:#E79F6D; position:relative;left:-150px;}

.right{background:#77BBDD;position:relative;left:150px;}

我是头部

我是body的中间部分

我是body的左边

我是body的右边部分

我是底部

圣杯布局：应用于三列布局，两边固定，中间自适应，一种经典的布局方法。