收藏
批改状态：合格
老师批语：
双飞翼布局演示：http://111.231.88.20/front/html/0327/2.html
下方代码使用了双飞翼的布局方式完成了网站三列布局结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局作业</title>
<style type="text/css">
.top,.bottom{
width: 100%;/*使宽度相对于body父元素进行自适应*/
height: 60px;
background-color: lightgray;
}
.header,.footer{
width: 1000px;
min-height: 100%;/*最小高度相对于父元素进行自适应*/
background-color: gray;
margin:0 auto;/*使元素相对父元素进行水平居中*/
text-align: center;/*使元素内文本水平居中*/
line-height: 60px;/*设置行高与父元素高度一致，是文本垂直居中*/
}
.bottom{
clear: both;/*使底部两侧不出现浮动元素*/
}
.main{
width: 1000px;/*设置内容主体的总宽度*/
margin: 0 auto;/*使元素相对父元素进行水平居中*/
overflow: hidden;/*使元素能包裹住浮动块*/
}
.wrap{
width: 100%;/*设置宽度相对于父元素进行自适应*/
float: left;/*设置左浮动，脱离文档流*/
}
.content{
/*宽度不用设置，直接继承父元素的*/
min-height: 650px;/*设置一个最小高度*/
background-color: khaki;
margin: 0 200px;
/*设置两边的外边距为左右两侧内容的宽度，使中间的元素内容不被覆盖*/
}
.left{
width: 200px;
min-height: 650px;
background-color: lightyellow;
float: left;
/*设置左侧外边距为父元素的-100%，使元素就回到最左边的位置*/
margin-left: -100%;
}
.right{
width: 200px;
min-height: 650px;
background-color: skyblue;
float: left;
/*设置左侧的外边距为元素负的本身宽度，使元素回到上面最右边的位置*/
margin-left: -200px;
}
</style>
</head>
<body>
<div class="top">
<div class="header">网站头部</div>
</div>
<div class="main">
<div class="wrap">
<!-- 由于设置外边距会撑开父级元素，所以需要在外面加一个div块 -->
<div class="content">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="bottom">
<div class="footer">网站底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
圣杯布局实例演示：http://111.231.88.20/front/html/0327/3.html
下方代码使用圣杯布局方式完成了网站的三列布局结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局作业</title>
<style type="text/css">
.top,.bottom{
width: 100%;/*使宽度相对于body父元素进行自适应*/
height: 60px;
background-color: lightgray;
}
.header,.footer{
width: 1000px;
min-height: 100%;/*最小高度相对于父元素进行自适应*/
background-color: gray;
margin:0 auto;/*使元素相对父元素进行水平居中*/
text-align: center;/*使元素内文本水平居中*/
line-height: 60px;/*设置行高与父元素高度一致，是文本垂直居中*/
}
.bottom{
clear: both;/*使底部两侧不出现浮动元素*/
}
.main{
width: 600px;/*内容宽度600*/
margin: 0 auto;/*设置元素的水平居中*/
overflow: hidden;/*使元素能包裹住浮动区块*/
/*设置两侧内边距为左右两侧内容区的宽度，使两侧内容相对定位后，露出中间内容区*/
padding: 0 200px;
}
.content{
width: 100%;/*设置宽度与父元素一致，实现浮动后把左右两侧挤下去*/
min-height: 650px;
float: left;
background-color: khaki;
}
.left{
width: 200px;
min-height: 650px;
float: left;
background-color: lightyellow;
/*与双飞翼布局一样，使左侧外边距为负的父元素宽度，这样使元素回到最左侧*/
margin-left: -100%;
/*使用相对定为，向左侧移动负的元素宽度，露出中间的内容区*/
position: relative;
left: -200px;
}
.right{
width: 200px;
min-height: 650px;
float: left;
background-color: skyblue;
/*与双飞翼布局一样，使左侧外边距为负的元素宽度，这样使元素回到最右侧*/
margin-left: -200px;
/*使用相对定位，向右侧移动负的元素宽度，露出中间的内容区域*/
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="top">
<div class="header">网站头部</div>
</div>
<div class="main">
<div class="content">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="bottom">
<div class="footer">网站底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
通过手抄一遍圣杯布局代码，对于网站布局的理解更深了一点
----------------------
经过对双飞翼布局和圣杯布局的代码练习，我总结了一下几点，仅供参考！
共同点
1、两个布局方式都是先使用左浮动来让元素脱离了文档流后进行布局操作。
2、都是将中间的内容区域写在前面，然后以浮动的原理，让后面的左右两侧元素被挤到下方
3、两个布局方式都需要使用到margin来实现左右两侧的元素覆盖到中间元素的上方
不同点
1、双飞翼布局的最后需要使用margin外边距来实现中间内容区的呈现，由于外边距的会撑开父级元素的特性，中间的内容区域需要添加一个包裹着的div块，宽度在外面这个包裹的区块设置。而圣杯布局的最后是使用padding内边距来实现，所以不需要。
2、双飞翼布局的中间元素宽度是自适应的，圣杯布局是固定的
3、双飞翼在左右两侧元素覆盖住中间内容以后，是添加子元素左右两侧margin值，撑开包裹住的父级块后，让子元素的内容区在中间呈现！
4、圣杯在左右两侧元素覆盖住中间内容后，是添加中间元素的左右两侧padding值，然后使用相对定位，让左右两侧的元素进行移动，让中间元素呈现出来
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
