html经典布局方案
1、上中下一栏式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上中下一栏式布局</title>
<style>
body{
margin: 0;
font-size: 20px;
text-align: center;
}
.wrap{
width:900px;
margin:0 auto;
}
#header{
height: 80px;
background: #abcdef;
}
#main{
height: 500px;
background: #cff;
}
#footer{
height: 60px;
background: #555;
}
</style>
</head>
<body>
<header id="header" class="wrap">header</header>
<section id="main" class="wrap">section</section>
<footer id="footer" class="wrap">footer</footer>
</body>
</html>
2、左右两栏式
（1）混合浮动+普通流
右边的section的宽度是由wrap决定的，等于wrap的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右两栏式布局（混合浮动+浮动流）</title>
<style>
body{
margin: 0;
font-size: 20px;
text-align: center;
}
.wrap{
width:900px;
margin:0 auto;
}
#left{
width: 200px;
height: 500px;
background: #abcdef;
float: left;
}
#right{
height:500px;
background:#cff;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<aside id="left">left</aside>
<section id="right”>right</section>
</div>
</body>
</html>
（2）纯浮动式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右两栏式布局（纯浮动）</title>
<style>
body{
margin: 0;
font-size: 20px;
text-align: center;
}
.wrap{
width:900px;
margin:0 auto;
overflow: hidden; /*清楚浮动*/
}
#left{
width: 200px;
height: 500px;
background: #abcdef;
float: left;
}
#right{
width: 700px;
height:500px;
background:#cff;
float: right;
}
</style>
</head>
<body>
<div class="wrap">
<aside id="left">left</aside>
<section id="right">right</section>
</div>
</body>
</html>
（3）position定位式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右两栏式布局（position定位）</title>
<style>
body{
margin: 0;
font-size: 20px;
text-align: center;
}
.wrap{
width:900px;
margin:0 auto;
position: relative;
}
#left{
width: 200px;
height: 500px;
background: #abcdef;
position: absolute;
top: 0;
left: 0;
}
#right{
width: 700px;
height:500px;
background:#cff;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrap">
<aside id="left">left</aside>
<section id="right">right</section>
</div>
</body>
</html>
3、左右两栏加页眉页脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右两栏加页眉页脚</title>
<style>
body{
margin: 0;
font-size: 20px;
text-align: center;
}
.wrap{
width:900px;
margin:0 auto;
}
#header{
height: 80px;
background: #abcdef;
}
#main{
height: 500px;
background:#cff;
}
#footer{
height: 60px;
background: #555;
}
#left{
width:200px;
height: 100%;
background: blue;
float:left;
}
#right{
height: 100%;
background: green;
margin-left: 200px;
}
</style>
</head>
<body>
<header id="header" class="wrap">header</header>
<section id="main" class="wrap">
<aside id="left">left</aside>
<div id="right">right</div>
</section>
<footer id="footer" class="wrap">footer</footer>
</body>
</html>
4、左中右三栏
注意body中：三栏的书写顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左中右三栏（中间栏宽度自适应）</title>
<style>
body{
margin: 0;
font-size: 20px;
text-align: center;
}
.wrap{
width:80%;
margin:0 auto;
}
#left{
width:200px;
height: 500px;
background: #cff;
float:left;
}
#right{
width:200px;
height: 500px;
background: #cff;
float:right;
}
#main{
height: 500px;
background:#ccf;
margin:0 200px;
}
</style>
</head>
<body>
<div class="wrap">
<aside id="left">left</aside>
<aside id="right">right</aside>
<section id="main">main</section>
</div>
</body>
</html>
5、左中右三栏之双飞翼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左中右三栏双飞翼布局(中间栏宽度自适应)</title>
<style>
body{
margin: 0;
font-size: 20px;
text-align: center;
}
.wrap{
width:80%;
margin:0 auto;
}
#main{
width: 100%;
background:#ccf;
float: left;
}
#left{
width:200px;
height: 500px;
background: #cff;
float:left;
margin-left: -100%;
}
#right{
width:200px;
height: 500px;
background: #cff;
float:left;
margin-left: -200px;
}
.content{
height: 500px;
margin: 0 200px;
}
</style>
</head>
<body>
<div class="wrap">
<section id="main">
<div class="content">content</div>
</section>
<aside id="left">left</aside>
<aside id="right">right</aside>
</div>
</body>
</html>
6、左中右三栏加页眉页脚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左中右三栏加上页眉页脚(中间栏宽度自适应)</title>
<style>
body{
margin: 0;
font-size: 20px;
text-align: center;
}
.wrap{
width:80%;
margin:0 auto;
}
#header{
height: 80px;
background: #abcdef;
}
#main{
height: 500px;
background: pink;
}
#footer{
height: 60px;
background: #555;
}
#middle{
width: 100%;
float: left;
background: #ccf;
}
#left{
width:200px;
height: 100%;
background: #cff;
float:left;
margin-left: -100%;
}
#right{
width:200px;
height: 100%;
background: #cff;
float:left;
margin-left: -200px;
}
.content{
height: 500px;
margin: 0 200px;
}
</style>
</head>
<body>
<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>
</body>
</html>
