常見布局（PC）
- 固定寬度布局
- 彈性（fluid）布局
- 響應(yīng)式布局 —— 多終端（PC、Pad、Phone）
1. 單欄布局
單欄布局
<head>
<style>
body{
min-width:768px;
}
.layout{
width:768px;
border:1px solid #ddd;
margin:0 auto;
}
#header{
height:60px;
background:red;
}
#main{
height:300px;
background:blue;
}
#footer{
height:40px;
background:yellow;
}
</style>
</head>
<body>
<div id="header">
<div class="layout">頭部</div>
</div>
<div id="main" class="layout">內(nèi)容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
</body>
2. 雙列布局
一列固定寬度，另外一列自適應(yīng)寬度
雙列布局
<head>
<style>
#content:after{
content:"";
display:block;
clear:both;
}
.aside{
width:150px;
height:300px;
background:red;
float:left;
}
.main{
height:300px;
background:blue;
margin-left:160px;
}
#footer{
height:60px;
background:yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="aside">側(cè)邊欄</div>
<div class="main">主內(nèi)容</div>
</div>
<div id="footer">尾部</div>
</body>
3. 三欄布局
兩側(cè)兩列固定寬度，中間列自適應(yīng)寬度
三欄布局
<head>
<style>
#content:after{
content:"";
display:block;
clear:both;
}
body{
min-width:768px;
}
#content{
width:768px;
margin:0 auto;
}
.left{
width:150px;
height:300px;
background:red;
float:left;
}
.right{
width:100px;
height:300px;
background:red;
float:right;
}
.main{
height:300px;
background:blue;
margin-left:160px;
margin-right:110px;
}
#footer{
width:768px;
height:60px;
margin:10px auto;
background:yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="left">左邊欄</div>
<div class="right">右邊欄</div>
<div class="main">主內(nèi)容</div>
</div>
<div id="footer">底部</div>
</body>
3. 圣杯布局
是三列布局，兩邊固定寬度，中間自適應(yīng)，中間主內(nèi)容元素在 dom 元素次序中優(yōu)先位置。
但有個(gè)問題：當(dāng)中間主內(nèi)容的寬度小于倆側(cè)邊欄的寬度時(shí)，會出現(xiàn)排版錯(cuò)亂現(xiàn)象。
<head>
<style>
#content:after{
content:"";
display:block;
clear:both;
}
.main,.left,.right{
float:left;
}
.main{
height:500px;
background:orange;
width:100%;
}
.left{
width:150px;
height:300px;
background:red;
margin-left:-100%;/*靠左*/
position:relative;
left:-150px;
}
.right{
width:150px;
height:300px;
background:red;
margin-left:-150px;/*向上補(bǔ)位靠右*/
position:relative;
left:150px;
}
#content{
padding:0 150px;/*給左右側(cè)邊欄留出空間*/
}
</style>
</head>
<body>
<div id="content">
<div class="main">主內(nèi)容</div>
<div class="left">左邊欄</div>
<div class="right">右邊欄</div>
</div>
</body>
4. 雙飛翼布局
是三列布局，兩邊固定寬度，中間自適應(yīng)，中間主內(nèi)容元素在 dom 元素次序中優(yōu)先位置。
雙飛翼布局解決了前面圣杯布局的遺留問題。
<head>
<style>
#content:after{
content:"";
display:block;
clear:both;
}
.main,.left,.right{
float:left;
}
.main{
width:100%;
}
.main>div{
height:500px;
background:orange;
margin:0 150px;
}
.left{
width:150px;
height:300px;
background:red;
margin-left:-100%;/*靠左*/
}
.right{
width:150px;
height:300px;
background:red;
margin-left:-150px;/*向上補(bǔ)位靠右*/
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div>主內(nèi)容</div>
</div>
<div class="left">左邊欄</div>
<div class="right">右邊欄</div>
</div>
</body>
5. 水平等距排列布局
<head>
<style>
ul,li{
list-style:none;
margin:0;
padding:0;
}
.wrap:after{
content:"";
display:block;
clear:both;
}
.wrap{
width:800px;
margin:0 auto;
}
.wrap>h1{
color:#333;
border-bottom:1px solid #ccc;
padding:20px 0;
text-align:center;
}
.wrap>ul .item{
float:left;
margin-top:30px;
margin-left:10px;
width:260px;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0, 0, 0, 0.19)!important;
}
.item img{
width:100%;
opacity:0.75;
}
.item .detail{
text-align:center;
padding:1px 16px;
}
.item .detail>p{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.wrap>ul{
margin-left:-10px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>古風(fēng)美人圖</h1>
<ul>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳憑朱欄立，涼月趖西，點(diǎn)鬢霜微，歲晏知君歸不歸；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳憑朱欄立，涼月趖西，點(diǎn)鬢霜微，歲晏知君歸不歸；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳憑朱欄立，涼月趖西，點(diǎn)鬢霜微，歲晏知君歸不歸；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳憑朱欄立，涼月趖西，點(diǎn)鬢霜微，歲晏知君歸不歸；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳憑朱欄立，涼月趖西，點(diǎn)鬢霜微，歲晏知君歸不歸；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳憑朱欄立，涼月趖西，點(diǎn)鬢霜微，歲晏知君歸不歸；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳憑朱欄立，涼月趖西，點(diǎn)鬢霜微，歲晏知君歸不歸；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳憑朱欄立，涼月趖西，點(diǎn)鬢霜微，歲晏知君歸不歸；</p>
</div>
</li>
</ul>
</div>
</body>
