实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<!-- <link rel="stylesheet" href="css/demo04.css"> -->
<style>
/* 清除边距 */
*{
padding: 0;
margin: 0;
}
/* 给整个页面以高度 */
body{
height:3000px;
}
.header{
/* 头部的宽高 */
width: 100%;
height: 60px;
background-color:black;
}
.header_content{
width: 950px;
height: 60px;
background-color:aqua;
/* 使内容背景居中 */
margin:0px auto;
/* 内部的a标签居中 */
line-height:60px;
}
.header_content a{
/* 给予a标签浮动 */
float: left;
/* 添加外边距 */
margin-left: 30px;
font-size: 20px;
color:blue;
/* 去除下划线 */
text-decoration: none;
}
/* 添加鼠标滑过特效 */
.header_content a:hover{
background-color: white;
color:aqua;
/* 增加下划线 */
text-decoration:underline;
}
/* 编辑双飞燕中间内容div */
/* 第一步：主体容器设置宽高并水平居中 */
.container{
width: 950px;
min-height: 600px;
background-color: lightblue;
margin: 5px auto;
}
/* 第二部：中间区块自适应，左右固定宽高 */
.wrap{
width: inherit;
min-height: inherit;
background-color: red;
}
.left{
width: 200px;
min-height: 600px;
background-color: blue;
}
.right{
width: 200px;
min-height: 600px;
background-color:yellow;
}
/* 第三步：左中右全部浮动 */
.left,.wrap,.right{
float: left;
}
/* 第四部：将left，right全部反向移动到正确位置 */
.left{
/* 这里建议写100%，而不是区块的宽度950，防止写死 */
margin-left: -100%;
}
.right{
margin-left:-200px;
}
/* 第五步：将中间区块显示出来 */
.main{
margin-left: 200px;
margin-right:200px;
}
/* 底部 */
.foot{
/* 给底部宽高与背景色 */
width: 100%;
background-color: black;
/* 添加外边距，使其居中 */
margin: 0px auto;
}
/* 底部内容区 */
.foot_content{
width: 950px;
height: 60px;
background-color:aqua;
/* 底部内容区水平居中 */
margin: 0px auto;
}
/* 使p标签内部居中 */
.foot .foot_content p {
line-height: 60px;
text-align: center;
}
/* 给a标签添加样式 */
.foot .foot_content p a{
/* 去除下划线 */
text-decoration: none;
/* 增加外边距 */
margin-left: 10px;
}
/* 添加鼠标滑过样式 */
.foot .foot_content p a:hover{
/* 去除下划线 */
text-decoration: underline;
color: white;
}</style>
<body>
<!-- 头部 -->
<div class="header">
<div class="header_content">
<a href="">首页</a>
<a href="">视频教程</a>
<a href="">社区问答</a>
<a href="">编程词典</a>
<a href="">手册下载</a>
</div>
</div>
<!-- 内容区 -->
<div class="container">
<div class="wrap">
<div class="main">内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 底部 -->
<div class="foot">
<div class="foot_content">
<p>
<a href="">php中文网版权所有</a>
<a href="">110120148</a>
<a href="">华123456789</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1.主题内容一定要用<wrap></wrap>标签包裹住。
2.中间区块的宽度设置在wrap中。
3.将左右区块归位采用负外边距的方式，反向移动。
