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

常用布局：
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的右边部分

我是底部

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