收藏
批改状态：合格
老师批语：
“双飞翼/圣杯”是网页布局中的经典布局模式，实现效果图如下：
双飞翼布局代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style type="text/css">
.top,.footer {
width: 100%;
height: 60px;
background-color: lightgrey;
}
.content {
width:1000px; /*内容区宽度与主体一致*/
background-color: grey;
margin: auto; /*内容区居中*/
line-height: 60px; /*内容上下居中*/
text-align: center; /*内容左右居中*/
}
.contener {
width:1000px; /*此宽度为主体区域的整体宽度*/
margin:auto; /*使主体区域整体居中*/
overflow: hidden; /*使浮动元素溢出部分自动隐藏,使区块包住子元素main*/
}
.wrap { /*main的父级*/
width: 100%; /*宽度继承自contener，高度被子元素撑开*/
float: left; /*设置左浮动,使其脱离文档流*/
}
.main {
height: 650px;
background-color: lightblue;
margin:0 200px; /*挤出放置左右两侧的位置*/
}
.left {
width: 200px;
height: 650px;
background-color: lightgreen;
float: left; /*设置左浮动,使其脱离文档流*/
margin-left: -100%; /*浮动文档流第二个子快移动至第一个子快内的左侧*/
}
.right {
width: 200px;
height: 650px;
background-color: lightskyblue;
float: left; /*设置左浮动,使其脱离文档流*/
margin-left: -200px; /*浮动文档流第三个子快移动至第一个子快内的右侧*/
}
.footer {
clear: both; /*清除左右两侧的浮动*/
}
</style>
</head>
<body>
<div class="top">
<div class="content">头部</div>
</div>
<div class="contener">
<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">
.top,.footer {
width: 100%;
height: 60px;
background-color: lightgrey;
}
.content {
width:1000px; /*内容区宽度与主体一致*/
background-color: grey;
margin: auto; /*内容区居中*/
line-height: 60px; /*内容上下居中*/
text-align: center; /*内容左右居中*/
}
.contener {
width: 600px; /*此宽度为主体中的中间区域的实际宽度*/
margin: auto; /*使主体区域整体居中*/
overflow: hidden; /*使浮动元素溢出部分自动隐藏,使区块包住子元素*/
padding: 0 200px; /*使主体区域拓展出放置圣杯两侧耳朵的位置*/
}
.main {
width: 100%; /*继承父级contener的宽度*/
height: 650px;
background-color: skyblue;
float: left; /*中间区域左浮动*/
}
.left {
width: 200px;
height: 650px;
background-color: lightgreen;
float: left;
margin-left: -100%; /*浮动文档流第二个子快移动至第一个子快内的左侧*/
/*以下属性将其从第一个子快的位置移动至左侧的padding区，右侧固定区域同原理*/
position: relative; /*设置其在浮动文档流的相对定位*/
left: -200px;
top: 0;
}
.right {
width: 200px;
height: 650px;
background-color: cyan;
float: left;
margin-left: -200px;
position: relative;
top: 0;
left: 200px;
}
.footer {
clear: both; /*清除左右两侧的浮动*/
}
</style>
</head>
<body>
<div class="top">
<div class="content">头部</div>
</div>
<div class="contener">
<div class="main">中部</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
此两种布局的DOM结构的主体部分写入顺序均为：中-左-右
双飞翼布局要点：中间部分需要一个父级块包裹，并与同级的左右全部设置为左浮动元素，脱离文档流，形成浮动文档流重新排列，中间为main的块需要通过设置margin空出左右两侧放置左右两个翅膀。
圣杯布局要点：中-左-右为同级的块元素，均设置左浮动，脱离文档流，形成浮动文档流重新排列，通过设置中间部分的padding属性空出左右两侧放置圣杯的两只耳朵，左右两侧通过设置margin移动至main内部的左右两侧，在浮动文档流中的相对定位移动至main的左右两侧。
手抄圣杯布局代码如下：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
