常见布局（PC）
- 固定宽度布局
- 弹性（fluid）布局
- 响应式布局 —— 多终端（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">内容</div>
<div id="footer">
<div class="layout">尾部</div>
</div>
</body>
2. 双列布局
一列固定宽度，另外一列自适应宽度
双列布局
<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">侧边栏</div>
<div class="main">主内容</div>
</div>
<div id="footer">尾部</div>
</body>
3. 三栏布局
两侧两列固定宽度，中间列自适应宽度
三栏布局
<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">主内容</div>
</div>
<div id="footer">底部</div>
</body>
3. 圣杯布局
是三列布局，两边固定宽度，中间自适应，中间主内容元素在 dom 元素次序中优先位置。
但有个问题：当中间主内容的宽度小于俩侧边栏的宽度时，会出现排版错乱现象。
<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;/*向上补位靠右*/
position:relative;
left:150px;
}
#content{
padding:0 150px;/*给左右侧边栏留出空间*/
}
</style>
</head>
<body>
<div id="content">
<div class="main">主内容</div>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</div>
</body>
4. 双飞翼布局
是三列布局，两边固定宽度，中间自适应，中间主内容元素在 dom 元素次序中优先位置。
双飞翼布局解决了前面圣杯布局的遗留问题。
<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;/*向上补位靠右*/
}
</style>
</head>
<body>
<div id="content">
<div class="main">
<div>主内容</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>古风美人图</h1>
<ul>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳凭朱栏立，凉月趖西，点鬓霜微，岁晏知君归不归；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳凭朱栏立，凉月趖西，点鬓霜微，岁晏知君归不归；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳凭朱栏立，凉月趖西，点鬓霜微，岁晏知君归不归；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳凭朱栏立，凉月趖西，点鬓霜微，岁晏知君归不归；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳凭朱栏立，凉月趖西，点鬓霜微，岁晏知君归不归；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳凭朱栏立，凉月趖西，点鬓霜微，岁晏知君归不归；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳凭朱栏立，凉月趖西，点鬓霜微，岁晏知君归不归；</p>
</div>
</li>
<li class="item">
<div class="detail">
<h3>采桑子</h3>
<p>白衣裳凭朱栏立，凉月趖西，点鬓霜微，岁晏知君归不归；</p>
</div>
</li>
</ul>
</div>
</body>
网友评论