1.一列布局
html:
<div class="header"></div> <div class="body"></div> <div class="footer"></div>
css:
.header{ height: 100px; background: pink; } .body{ height:500px; background: blue; } .footer{ height:100px; background: #ddd; }
2.双飞翼布局（中间自适应，左右列固定宽度）
html:
<div class="main"> <div class="cont"></div> </div> <div class="left"></div> <div class="right"></div>
css:
.main {
float: left;
width: 100%;
height: 500px;
}
.cont {
height: 500px;
background-color: aqua;
margin-left: 300px;
margin-right: 300px;
}
.left {
float: left;
width: 300px;
height: 500px;
margin-left: -100%;
background-color: pink;
}
.right {
float: left;
width: 300px;
height: 500px;
margin-left: -300px;
background-color: yellow;
}
