实现一列布局
HTML:
<body>
<!-- 单列布局 -->
<div class="top"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
CSS:
.top{
height:100px;
background:#7FF;
}
.main{
width: 800px;
height: 300px;
background:#2dd;
margin: 0 auto;
}
.footer{
width: 800px;
height: 100px;
background: #900;
margin: 0 auto;
}
效果图：
oneColumn.png
实现两列自适应布局
HTML:
<body>
<!-- 两列自适应 -->
<div class="left"></div>
<div class="right"></div>
</body>
CSS:
.left{
width: 20%;
height: 500px;
float: left;
background: #3aa;
}
.right{
width: 80%;
height: 500px;
float: right;
background: #900;
}
效果图：
twoColumnAdaptive.png
固定宽度两列布局
HTML:
<body>
<!-- 固定宽度两列布局 -->
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
CSS:
.main{
width: 800px;
margin: 0 auto;
}
.left{
width:220px;
height: 500px;
float: left;
background: #3aa;
}
.right{
width:580px;
height: 500px;
float: right;
background: #900;
}
效果图：
columnTwoFixed01.png
三列自适应布局
HTML:
<body>
<!--三列布局 -->
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
CSS:
.left{
width: 33.33%;
height:500px;
float: left;
background:#7FF;
}
.middle{
width: 33.33%;
height:500px;
float: left;
background:#2dd;
}
.right{
width: 33.33%;
height:500px;
float: right;
background: #900;
}
效果图：
threeColumn.png
三列布局之左右固定中间自适应
HTML:
<body>
<!--三列布局固定宽度 -->
<div class="left">200px</div>
<div class="middle">左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;左右固定中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;中间自适应;</div>
<div class="right">300px</div>
</body>
CSS:
.left{
width: 200px;
height:500px;
background:#7FF;
position: absolute;
left: 0;
top:0;
}
.middle{
height:500px;
background:#ddd;
margin: 0 300px 0 200px;
}
.right{
width:300px;
height:500px;
background: #9dd;
position: absolute;
right: 0;
top: 0;
}
效果图：
threeColumnFixed01.png
混合布局（一）
HTML:
<body>
<!-- 混合布局之中间分两列 -->
<div class="top"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
CSS:
.top{
height:100px;
background:#7FF;
}
.main{
width: 800px;
height: 400px;
background:#2dd;
margin: 0 auto;
}
.left{
width: 200px;
height: 400px;
background: blue;
float: left;
}
.right{
width: 600px;
height: 400px;
background: yellow;
float: right;
}
.footer{
width: 800px;
height: 100px;
background: #900;
margin: 0 auto;
}
效果图：
Hybrid01.png
混合布局02
HTML:
<body>
<!-- 混合布局之02 -->
<div class="top"></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>
</body>
CSS:
.top{
height:100px;
background:#7FF;
}
.main{
width: 800px;
height: 400px;
background:#2dd;
margin: 0 auto;
}
.left{
width: 200px;
height: 400px;
background: blue;
float: left;
}
.right{
width: 600px;
height: 400px;
background: yellow;
float: right;
}
.sub_l{
width: 400px;
height: 400px;
background: green;
float: left;
}
.sub_r{
width: 200px;
height: 400px;
background: purple;
float: right;
}
.footer{
width: 800px;
height: 100px;
background: #900;
margin: 0 auto;
}
效果图：
Hybrid02.png
混合布局03
HTML：
<body>
<!-- 混合布局之03 -->
<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>
</body>
CSS：
.top {
height: 100px;
background: #7FF;
}
.head {
height: 100px;
width: 800px;
background: pink;
margin: 0 auto;
}
.main {
width: 800px;
height: 400px;
background: #2dd;
margin: 0 auto;
}
.left {
width: 200px;
height: 400px;
background: blue;
float: left;
}
.right {
width: 600px;
height: 400px;
background: yellow;
float: right;
}
.sub_l {
width: 400px;
height: 400px;
background: green;
float: left;
}
.sub_r {
width: 200px;
height: 400px;
background: purple;
float: right;
}
.footer {
width: 800px;
height: 100px;
background: #900;
margin: 0 auto;
}
效果图：
Hybrid03.png
需要源码的小伙伴可在我的github上查看或下载
