收藏
批改状态：未批改
老师批语：
下面的代码是实现双飞翼布局的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.经典的三列双飞翼布局</title>
<style type="text/css">
/*选择器中间加空格和逗号的区别
空格是后代选择器的标识符,
逗号多元素选择器，同时选择多个元素，元素之间用逗号分隔
*/
.header, .footer{
/*宽度自适应,继承父级body*/
width: 100%;
/*为了简化，头和底统一为60px*/
height: 60px;
background-color: lightgray;
}
.content{
/*设置总宽度*/
width: 1000px;
/*设置高度*/
min-height: 100%;
background-color: gray;
/*实现contenter水平居中效果，可以通过背景颜色来判断*/
margin: auto;
/*text-align:设置文本水平居中*/
text-align: center;
line-height: 60px;
}
.footer {
/*其实设置完毕后可以取消此项属性
因为双飞翼设置完毕后footer傍边不会存在float元素*/
/*clear:both;*/
/*clear 属性规定元素的哪一侧不允许其他浮动元素。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。*/
}
/*主体样式设置*/
.container{
/*宽度设置*/
width: 1000px;
/*内部的区块水平居中*/
margin: auto;
background-color: yellow;
overflow: hidden;
/* overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。*/
}
.wrap{
/*宽度设为父级的100%,即1000px*/
width:100%;
float:left;
background-color: cyan;
}
.wrap .main {
min-height: 600px;
background-color: wheat;
/*margin-left: 200px;
margin-right: 200px;*/
/*简化代码：*/
margin:0 200px;
}
.left{
width: 200px;
min-height: 600px;
float:left;
background-color: #1219B3;
/*让margin距离左边为-1000px，即父级的-100%*/
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
float:left;
background-color: lightgreen;
/*让margin距离右边为-200px;*/
margin-left: -200px;
}
</style>
</head>
<body>
<!-- DOM结构 -->
<!-- 头部 -->
<div class="header">
<div class="content">网站头部</div>
</div>
<!-- 主体 -->
<div class="container">
<!-- 顺序不能错，必须是先中间，在左侧，后右侧 -->
<div class="wrap">
<!-- 为了不超出，外面加一个div盒子 -->
<div class="main">中间</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
双飞翼代码实现的具体思路为：
1,container是一个大的容器，里面并排3个wrap,left,right 容器。
2，设置wrap容器为父容器(container)宽度的100%，此时会把left,right容器挤下去。
3, 3个容器全部设置为左浮动，此时3个容器会重叠，从上看分别是right,left,wrap.但是位置排序为wrap,left,right.
4，此时设置margin-left 为负的wrap。因为wrap宽度和container宽度一样。也即为负的container的100%。此时位置排序变为left,wrap,right.
5, right容器设置为-200px，相当于相对自身左移动，会放在wrap的上方。
6，设置main容器的margin距离，使左右存在left和right的空间。不让left和right遮挡到wrap的内容
下面这段代码是圣杯布局的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.经典的圣杯三列布局</title>
<style type="text/css">
/*选择器中间加空格和逗号的区别
空格是后代选择器的标识符,
逗号多元素选择器，同时选择多个元素，元素之间用逗号分隔
*/
.header, .footer{
/*宽度自适应,继承父级body*/
width: 100%;
/*为了简化，头和底统一为60px*/
height: 60px;
background-color: lightgray;
}
.content{
/*设置总宽度*/
width: 1000px;
/*设置高度*/
min-height: 100%;
background-color: gray;
/*实现contenter水平居中效果，可以通过背景颜色来判断*/
margin: auto;
/*text-align:设置文本水平居中*/
text-align: center;
line-height: 60px;
}
.footer{
clear: both;
}
.container{
width: 600px;
height: 650px;
background-color: yellow;
/*水平居中*/
margin: auto;
/*设置padding左右距离为200px*/
padding:0 200px;
}
.main{
/*父级：600px*/
width: 100%;
min-height: 650px;
background-color: wheat;
float: left;
}
.left{
width:200px;
min-height: 650px;
background-color: skyblue;
/*margin-left: 设置为-100%，相当于left区域贴左侧覆盖到main区域上*/
float:left;
margin-left:-100%;
/*通过相对定位设置向左移动的距离*/
position: relative;
left:-200px;
}
.right{
width:200px;
min-height: 650px;
background-color: lightgreen;
/*margin-left: 设置为-200px，相当于left区域贴右侧覆盖到main区域上*/
float:left;
margin-left:-200px;
/*通过相对定位设置向右移动的距离*/
position: relative;
right: -200px
}
</style>
</head>
<body>
<!-- DOM结构 -->
<!-- 头部 -->
<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>点击 "运行实例" 按钮查看在线实例
圣杯布局实现的思路为：
1,container是一个大的容器，里面并排3个main,left,right 容器。
2，设置容器(container)宽度的实际需要的宽度，并且把main元素的宽度设置为父容器宽度的100%，此时会把left,right容器挤下去。
3,main,left,right 全部设置为左浮动，此时位置顺序为main,left,right.
4,left,right容器margin-left设置为相应的负值，让分别贴左右两侧覆盖到main容器上
5,通过相对定位设置向右移动的距离
6，设置container的左右padding为left和right的值，挤压内容区，内边距扩大，相当于left和right的内容是覆盖在container区域的内边距上的。这样可以防止left和right的内容覆盖到main区域上
两种布局方式的优缺点：
1，圣杯的DOM结构更清晰简单些， 但css代码多点，双飞翼正好相反，DOM结构复杂一点点，但css代码少。
2，圣杯用padding来处理left,right, 双飞翼用margin来处理，其它地方完全一样
个人简介圣杯麻烦一些，需要float，还需要相对定位。更喜欢用双飞翼布局模式操作
手抄代码双飞翼布局：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
