收藏
批改状态：合格
老师批语：
双飞翼布局和圣杯布局实现的效果一样，都是实现3栏布局，中间盒子自适应，左右盒子固定的布局。
双飞翼布局
1 是先建一个dom树结构，得到外层为container的大的的div块包裹，内层得到三列，分别为main,left,right.
需要注意dom结构中，main的主列在最前面。
2 让3列浮动起来，浮动后因为main外包的wrap壳是100%
3 左列需要设置负的margin值-100%，右列需要设置margin-left:-200px(移动一个绝对值，能够把自己移上去到最后就可以。)
4： main内容区主列需要添加左右的外边距，将内容区挤出
圣杯布局
dom树和双飞翼布局一样，3列浮动也是一样的，但是main主体没有外包的.wrap的div由于浮动后左右两侧的浮动快被挤到下面
所以将浮动后的left和right上移到main区块的指定位置，最后通过相对定位（relative）left:-200,right：-200把他们占
据的main空间腾出来。
区别：圣杯布局用到相对定位，双飞翼不需要；双飞翼多了一个包裹中间区域的div，圣杯布局则不用。
双飞翼代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
.header,.footer {
width:100%;
height:60px;
background-color:lightgray;
}
.content {
width:1000px;
height:100%;
background-color: gray;
margin:auto;
text-align:center;/*内联文本居中*/
line-height:60px;
}
.container {
width:1000px;
margin:auto;
overflow:hidden;/*当前区块能够包住内部的浮动区块*/
background-color:yellow;
}
.wrap {
width:100%;
background-color: cyan;
float:left;/*左浮动*/
}
.main {
min-height:600px;
background-color:wheat;
margin:0 200px;
}
.left {
min-height:600px;
width:200px;
float:left;
background-color: blue;
margin-left:-100%;/*将左侧区块拉回主区块的中间位置*/
}
.right {
min-height:600px;
width:200px;
float:left;
background-color: green;
margin-left:-200px;/*将区块拉回主区块的右侧*/
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部内容</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体内容</div>
</div>
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
<div class="footer">
<div class="content">尾部内容</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
圣杯布局如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
.header, .footer {
width:100%;
height:60px;
background-color:lightgray;
}
.footer {
clear:both;/*清除底部左右两边的浮动元素*/
}
.content {
width:1000px;
height:100%;
background-color:gray;
margin:auto;
text-align:center;
line-height:60px;
}
.container {
width:600px;
background-color:yellow;
margin:auto;
overflow:hidden;/*使它能包住浮动区块*/
/*因为左右区块现在覆盖在main之上,挡住了main的内容,现在添加padding来实现自身内容显示*/
padding:0 200px;
}
.main {
height:650px;
width:100%;
float:left;
background:wheat;
}
.left {
width:200px;
min-height:650px;
float:left;
background-color:green;
margin-left:-100%;
position: relative;/*相对定位*/
left:-200px;
}
.right {
width:200px;
min-height:650px;
float:left;
margin-left:-200px;
background-color:lightgreen;
position:relative;
right:-200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">网站头部内容</div>
</div>
<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>点击 "运行实例" 按钮查看在线实例
手抄作业：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
