收藏
批改状态：合格
老师批语：
此次作业内容主要是经典的两种三列布局：双飞翼和圣杯布局。
双飞翼和圣杯布局主要是实现左、右两侧定宽，中间自适应宽度的三列布局。总体思路非常相像。都是将中间区块优先放在文档流前面，以便于优先渲染，然后是左、右两侧区块，并且三个区块全部进行左浮动。
不同之间在双飞翼的中间区块居中并且宽度为父级区块的100%，左、右两是在中间区块的上面左右两侧，为了显示出被遮挡的内容，用margin进行左右外边距的设置，分别与左、右两侧区块同宽。
圣杯布局的中间区块和左、右两侧区块是三个部分，利用中间区块设置padding内边距占位，再将左、右区块进行相对定位移动到padding区域。
具体代码分别如下。
1、双飞翼三列布局代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼三列布局-3月27日作业</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: 1000px;
background-color: yellow;
margin: auto;
}
/*创建中间块的父级区块，设置基本样式*/
.wrap{
width: 1000px;
background-color: gray;
/*中间的主体、左侧和右侧都设置为左浮动*/
float: left;
overflow: hidden;
}
/*设置中间主体区块的样式*/
.main{
min-height: 650px;
background-color: wheat;
/*通过margin设置左右外边距，使内容显示出来*/
margin: 0 200px;
}
/*左侧样式*/
.left{
width: 200px;
min-height: 650px;
background-color: pink;
/*左浮动*/
float: left;
/*通过margin-left设置使用左侧区块从下方移至中间区块的左侧位置*/
margin-left: -100%;
}
/*右侧样式*/
.right{
width: 200px;
min-height: 650px;
background-color: lightgreen;
/*左浮动*/
float: left;
/*通过margin-left设置使用左侧区块从下方移至中间区块的右侧位置*/
margin-left: -200px;
}
</style>
</head>
<body>
<!-- 网站头部 -->
<div class="header">
<div class="content">
头部内容
</div>
</div>
<!-- DOM结构 -->
<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>点击 "运行实例" 按钮查看在线实例
2、圣杯三列布局代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯三列布局-3月27日作业</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;
}
/*给主体内容创建父级容器并设置样式*/
.container{
/*设置容器宽度，此处应特别注意，与双飞翼不同。双飞翼的宽度是100%，而圣杯的宽度是中间与左、右三个部分的和是100%*/
width: 600px;
background-color: yellow;
margin: auto;
/*防止高度塌陷*/
overflow: hidden;
/*因为容器宽度只有600px，所以用padding进行点位，以便于使left和right能移动到padding区*/
padding: 0 200px;
}
/*设置中间主体区块的样式*/
.main{
/*必须设置宽度为父级的100%，将左、右侧的浮动区块挤到下边*/
width: 100%;
min-height: 650px;
background-color: wheat;
/*左浮动*/
float: left;
}
/*左侧样式*/
.left{
width: 200px;
min-height: 650px;
background-color: pink;
/*左浮动*/
float: left;
/*左侧区块从下边移至中间区块左侧*/
margin-left: -100%;
/*使左侧区块移动到padding区*/
position: relative;
left: -200px;
}
/*右侧样式*/
.right{
width: 200px;
min-height: 650px;
background-color: lightgreen;
/*左浮动*/
float: left;
/*右侧区块从下边移至中间区块右侧*/
margin-left: -200px;
/*使右侧区块移动到padding区*/
position: relative;
right: -200px;
}
</style>
</head>
<body>
<!-- 网站头部 -->
<div class="header">
<div class="content">
头部内容
</div>
</div>
<!-- DOM结构 -->
<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、两种布局在进行中间主体区块的宽度设置时要特别注意，这是这两种布局很重要的区别。
双飞翼：main=100%，圣杯：main+left+right=100%。
2、从DOM结构上，圣杯布局比双飞翼简洁明了。但双飞翼虽然中间区块多了一个父级区块，但属性设置上比圣杯简单易懂，个人比较喜欢双飞翼布局。
手写代码：（正在抄写，稍后上传）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
