<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
</head>
<body>
<style type="text/css" >
.header,.footer{
width: 100%;
height:60px;
background: #efefef;
}
.footer {
/*底部二边不能有浮动元素*/
clear: both;
}
.content{
width: 1000px;
min-height: 100%;
background: gray;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
width: 1000px;
margin: auto;
overflow: hidden;
background-color: yellow;
/*overflow: ;*/
}
.wrap{
width: 100%;
background-color:cyan;
float: left;
}
.main{
min-height: 600px;
margin: 0 200px;
background-color: wheat;
}
.left{
width: 200px;
min-height: 600px;
float: left;
margin-left: -100%;
background-color: blue;
}
.right{
width: 200px;
min-height: 600px;
float: left;
margin-left: -200px;
background-color: blue;
}
</style>
<div>
<div>网站头部</div>
</div>
<!-- 主体 -->
<div>
<div>
<div>主体内容区</div>
</div>
<div>左侧</div>
<div>右侧</div>
</div>
<!-- 底部 -->
<div>
<div>网站底部</div>
</div>
</body>
</html>