1.單列布局：http://js.jirengu.com/casulimege/3/
2.雙列布局
3.普通三列布局： http://js.jirengu.com/ficikacipi/3
3.圣杯布局： http://js.jirengu.com/talunasaca/3
是一種三列布局，兩邊寬度固定，中間寬度自適應(yīng)。注意中間一塊dom元素需寫在最前
</head>
<body>
<div class= content>
<div class= main>main</div>
<div class= aside>aside</div>
<div class= extra>extra</div>
</div>
</body>
.content{
padding-left: 90px;
padding-right: 90px;
}
.main{
width: 100%;
height: 500px;
float: left;
}
.aside{
float: left;
width: 80px;
height: 400px;
margin-left: -100%;
position: relative;
left: -90px;
}
.extra{
float: left;
width: 80px;
height: 400px;
margin-left: -80px;
position: relative;
left: 90px;
}
/*給content設(shè)置內(nèi)邊距留出左右兩欄的位置，然后利用相對定位不影響其他元素的特性，移動左右兩欄到指定位置。*/
4.雙飛翼布局： http://js.jirengu.com/hilogeyeba/2
與圣杯布局類似，但方法是在main中添加新div class=child，再給child設(shè)置左、右外邊距，以隔開aside和extra
<body>
<div class= content>
<div class= main>
<div class= child>main</div>
</div>
<div class= aside>aside</div>
<div class= extra>extra</div>
</div>
</body>
.child{
height: 500px;
background: orange;
margin-left: 90px;
margin-right: 90px;
}
.main{
width: 100%;
float: left;
}
.aside{
float: left;
width: 80px;
height: 400px;
background: yellow;
margin-left: -100%;
}
.extra{
float: left;
width: 80px;
height: 400px;
background: pink;
margin-left: -80px;
}
/*main的寬度仍然是content寬度的100%，但中間欄的內(nèi)容其實(shí)是由child顯示的。利用給child設(shè)置左右外邊距的方法隔開左右欄。*/
