<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.header,.footer{
color: white;
/*宽度自适应*/
width: 100%;
height: 60px;
background-color: lightgray;
}
.footer{
clear: both;
}
.content{
max-width: 1000px;
min-height: 100%;
background-color: gray;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
margin: auto;
width: 600px;
background-color: yellow;
overflow: hidden;
padding: 0 200px;
}
.container .left,.right{
float: left;
width: 200px;
height: 650px;
position: relative;
}
.container .left{
left: -200px;
margin-left: -100%;
background-color: lightskyblue;
}
.container .right{
right: -200px;
margin-left: -200px;
background-color: lightgreen;
}
.container .main{
width: 100%;
height: 650px;
float: left;
background-color: wheat;
}
</style>
<meta charset="UTF-8">
<title>圣杯三列</title>
</head>
<body>
<!--头部-->
<div class="header">
<div class="content">网站头部</div>
</div>
<!--主体-->
<!--1、创建一个大的盒子-->
<div class="container">
<!--按照顺序创建盒子-->
<!--中间-->
<div class="main">中间</div>
<!--左侧-->
<div class="left">左侧</div>
<!--右侧-->
<div class="right">右侧</div>
</div>
<!--底部-->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html><!--双飞翼布局
1、创建一个大的盒子 必须设置宽度
2、按照中间、左边、右边的顺序创建三个区块
3、设置三个区块的属性：3.1 三个区块都设置为左浮动（float:left） 3.2 中间部分宽度必须为100% 3.3 设置后左侧、右侧会被挤到下面中间的下面，按照以下设置恢复到正常位置设置左侧区块的margin-left:-100% 右侧区块的margin-left:-200px
-->
