总结
重要：主体内容必要由两个div包含
1.设置主体最外面块内容宽度和高度和背景色作为参考；
2.设置左右内容宽度和高度和背景色；
3.设置最外面内容块、左右内容浮动；
4.将左内容设置左边距负值为当前内容块的宽度、右侧内容设置左边距负值为当前右侧内容的宽度；
5.主体内
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 头部 */
.header {
width: 1000px;
background-color: #000000;
color: #ffffff;
height: 40px;
margin: 0 auto;
margin-bottom: 10px;
}
ul {
list-style: none;
}
ul li {
float: left;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
}
ul li:hover {
background-color: #ffffff;
color: black;
cursor: pointer;
}
/*主体*/
.content {
width: 1000px;
min-height: 600px;
margin: 0 auto;
background-color: #ccc;
}
.warp {
width: inherit;
min-height: inherit;
background-color: blueviolet;
}
.left {
width: 200px;
min-height: 600px;
background-color: lightblue;
}
.right {
width: 200px;
min-height: 600px;
background-color: lightcoral;
}
.warp,.left,.right {
float: left;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
/* 底部 */
.footer {
background-color: #000000;
color: #ffffff;
width: 1000px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 0 auto;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="header">
<ul>
<li>首页</li>
<li>公司简介</li>
<li>产品中心</li>
<li>联系我们</li>
</ul>
</div>
<div class="content">
<div class="warp">
<div class="main">主体内容</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
浙C66666666
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
