实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞布局</title>
<style type="text/css">
.head , .foot {
width:100%; /*设置宽度*/
height:70px;/*设置高度*/
background: #666;/*设置背景色*/
}
.foot{
clear:both;
}
.wztb{
width:100%;
min-height:100%;/*引用父值*/
background:pink ;
text-align:center;/*设置内部的文本水平垂直居中*/
line-height:60px;
}
/*设置网站主体的样式*/
.zhuti{
width:100%;
margin:auto;/*设置主体内部所有区块水平居中*/
overflow:hidden;/*当前区块能够包住内部的浮动区块*/
background:green;
}
.main{
width:100%;
background:lightblue;
float:left;
}
.wzzhuti{
min-height:600px;
margin: 0 200px;
background-color: green;
}
.left {
width: 200px;
min-height:600px;
float:left;
margin-left:-100%;
background-color: red;
}
.right {
width: 200px;
min-height:600px;
float:left;
margin-left:-200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="head">
<div class="wztb">网站头部</div>
</div> <!--头部结构-->
<div class="zhuti">
<div class="main">
<div class="wzzhuti">网站主体</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
</div>
<div class="foot">
<div class="wzdibu">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
