/*一列布局*/
<div class="top"></div>
<div class="main"></div>
<div class="footer"></div>
<style>
*{margin: 0; padding: 0;}
.top {height:100px;background: blue}
.main {width: 800px;height:300px;background:#ccc; margin:0 auto;}
.footer { width: 800px; height:100px;background:#900; margin: 0 auto;}
</style>
/*两列布局*/
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
*{margin:0; padding: 0;}
.main {width: 800px; margin: 0 auto;}
.left{width: 20%; height: 500px; float:left; background: #ccc;}
.right{width: 80%;height: 500px; float:right; background: #ddd;}
</style>
/*三列布局 */
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<style>
.left{width: 33.33%; height: 500px; float:left; background: #ccc;}
.middle{width: 33.33%;height: 500px; float:left; background: #999;}
.right{width: 33.33%;height: 500px; float:right; background: #ddd;}
</style>
/*三列布局(用定位)*/
<div class="left">200px固定宽度</div>
<div class="middle">自适应宽度</div>
<div class="right">300px固定看宽度</div>
<style>
.left{width: 200px; height: 500px; background: #ccc; position: absolute; left:0; top:0;}
.middle{ height: 500px; background: #999; margin: 0 310px 0 210px; }
.right{ width: 300px;height: 500px; background: #ddd;position: absolute;right:0;top:0;}
</style>
/*混合布局*/
<div>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="sub_l"></div>
<div class="sub_r"></div>
</div>
</div>
<div class="footer"></div>
</div>
<style>
*{ margin: 0; padding: 0;}
.top{ height: 100px; background: blue;}
.head { height: 100px;width:800px; background: #f60; margin: 0 auto; }
.main{ width: 800px; height:600px;background: #ccc; margin: 0 auto;}
.left {width: 200px; height:600px; background: yellow; float: left;}
.right { width: 600px; height: 600px; background: #369; float:right;}
.sub_l { width: 400px; height: 600px; background:green; float:left; }
.sub_r { width: 200px; height: 600px; background: #09f; float: right; }
.footer{ width: 800px; height: 100px;background: #900; margin: 0 auto;}
</style>