经典布局方式
上中下一栏式
image-20180803112942795
<style>
body{
margin:0;
font-size:20px;
text-align: center;
}
.warp{
width: 900px;
margin:0 auto;
}
#header{
height:100px;
background: #6cf;
}
#main{
height:500px;
background: #ccffff;
}
#footer{
height:80px;
background: #99ccff;
}
</style>
<header id="header" class="warp">#header</header>
<section id="main" class="warp">#section</section>
<footer id="footer" class="warp">#footer</footer>
左右两栏式
image-20180803113534182
- 浮动+标准流式
<style>
.wrap{
margin:0 auto;
width:80%;
}
#left{
width:200px;
height:500px;
background: #ccffff;
float: left;
}
#right{
height: 500px;
background: #ffcccc;
margin-left:200px;
}
</style>
<div class="wrap">
<aside id="left"></aside>
<section id="right"></section>
</div>
- 浮动式
<style>
.wrap{
width:900px;
margin:0 auto;
overflow: hidden;
}
#left{
width:200px;
height:500px;
background: #ccffff;
float: left;
}
#right{
width:700px;
height:500px;
background: #ffcccc;
float: left;
}
</style>
<div class="wrap">
<aside id="left"></aside>
<section id="right"></section>
</div>
- 定位式
<style>
.wrap{
width:900px;
margin:0 auto;
position: relative;
}
#left{
width:200px;
height:500px;
background: #ccffff;
position: absolute;
top:0;
left:0;
}
#right{
width:700px;
height:500px;
background: #ffcccc;
position: absolute;
top:0;
right:0;
}
</style>
<div class="wrap">
<aside id="left"></aside>
<section id="right"></section>
</div>
左右页眉页脚
image-20180803113936510
<style>
.wrap{
margin:0 auto;
width:900px;
}
#header{
height:100px;
background: #66ccff;
}
#main{
height:500px;
background: #ffcccc;
}
#footer{
height:80px;
background: #99ccff;
}
#left{
width:200px;
height:100%;
float: left;
background: #ccffff;
}
#right{
width:700px;
height:100%;
float: right;
background: #7cd677;
}
</style>
<header id="header" class="wrap"></header>
<section id="main" class="wrap">
<aside id="left"></aside>
<div id="right"></div>
</section>
<footer id="footer" class="wrap"></footer>
左中右三栏式
image-20180803114153428
<style>
.wrap{
margin:0 auto;
width:80%;
}
#left{
width: 200px;
height:500px;
background: #ccffff;
float: left;
}
#right{
width: 200px;
height:500px;
background: #ccffff;
float: right;
}
#main{
height:500px;
background: #ffcccc;
margin:0 210px;
}
</style>
<div class="wrap">
<aside id="left"></aside>
<aside id="right"></aside>
<section id="main"></section>
</div>
双飞翼左中右三栏布局
<style>
.wrap{
margin:0 auto;
width:80%
}
#main{
width:100%;
float: left;
background: #ffcccc;
}
#left{
width:200px;
float: left;
height:500px;
background: #ccffff;
margin-left: -100%;
}
#right{
width:200px;
float: left;
height:500px;
background: #ccffff;
margin-left:-200px;
}
.content{
height:500px;
margin:0 200px;
}
</style>
<div class="wrap">
<section id="main">
<div class="content">#content</div>
</section>
<aside id="left">#left</aside>
<aside id="right">#right</aside>
</div>
三栏加页眉页脚
image-20180803114537759
<style>
.wrap{
margin:0 auto;
width:900px;
}
#header{
height:100px;
background: #66ccff;
}
#main{
height:500px;
background: #ffcccc;
}
#footer{
height:80px;
background: #99ccff;
}
#middle{
width:100%;
float: left;
}
#left{
width:200px;
height:100%;
background: #ccffff;
float: left;
margin-left: -100%;
}
#right{
width:200px;
height:100%;
background: #ccffff;
float: left;
margin-left: -200px;
}
.content{
height:500px;
margin:0 200px;
}
</style>
<header id="header" class="wrap">#header</header>
<section id="main" class="wrap">
<section id="middle">
<div class="content">content</div>
</section>
<aside id="left">#left</aside>
<aside id="right">#right</aside>
</section>
<footer id="footer" class="wrap">#footer</footer>
