收藏
批改状态：合格
老师批语：
双飞翼布局代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style>
/*给头部底部设置样式*/
.header,.footer {
/*宽度为窗口宽度*/
width: 100%;
/*高度*/
height: 60px;
/*背景色*/
background-color: lightgray;
}
/*设置头部底部中内容区样式*/
.content {
/*总宽度*/
width: 1000px;
/*高度同父级*/
min-height: 100%;
/*背景色*/
background-color: gray;
/*水平居中*/
margin: auto;
/*内部文字水平垂直居中*/
text-align: center;
line-height: 60px;
}
/*设置主体基本样式*/
.container {
/*主体宽度*/
width: 1000px;
/*水平居中*/
margin: auto;
/*背景色*/
background-color: yellow;
/*使当前区块能够包住内部的浮动区块*/
overflow: hidden;
}
/*设置主体区域中的中间区块的基本样式*/
.wrap {
/*宽度100%同父级，确保后边元素换行显示*/
width: 100%;
/*浮动 脱离文档流*/
float: left;
/*背景色*/
background-color: black;
/*高度*/
min-height: 600px;
}
/*设置中间区块样式*/
.main {
/*高度*/
min-height: 600px;
/*背景色*/
background-color: pink;
/*设置左右外边距为left和right的宽度,使他们显示到正确位置*/
margin: 0 200px;
}
.right {
/*浮动脱离文档流*/
float: left;
/*宽度*/
width: 200px;
/*高度*/
min-height: 600px;
/*背景色*/
background-color: lightgreen;
/*移动到上一行最右侧*/
margin-left: -200px;
}
.left {
/*浮动脱离文档流*/
float: left;
/*宽度*/
width: 200px;
/*高度*/
min-height: 600px;
/*背景色*/
background-color: lightskyblue;
/*移动到上一行最左侧*/
margin-left: -100%;
}
/*底部去除浮动*/
.footer {
clear: both;
}
</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>
/*给头部底部设置样式*/
.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: 600px;
/*背景色*/
background-color: yellow;
/*水平居中*/
margin:auto;
/*使它能包住浮动区块*/
overflow: hidden;
/*实现内容的显示*/
padding:0 200px;
}
.container .main {
/*最小高度*/
min-height: 650px;
/*宽度100%确保后边元素挤下去*/
width: 100%;
/*浮动脱离文档流*/
float:left;
/*背景色*/
background-color: pink;
}
.container .left {
/*宽度*/
width: 200px;
/*最小高度*/
min-height: 650px;
/*浮动之后挤到下一行*/
float:left;
/*使他回到上一行主体区域最左侧*/
margin-left: -100%;
/*关键步骤:相对定位,向左为负200,相当于向右移动200px;*/
position: relative;
left: -200px;
/*背景色*/
background-color: lightskyblue;
}
.container .right {
width: 200px;
min-height: 650px;
/*浮动之后挤到下一行*/
float:left;
/*使他回到上一行主题区域最右侧*/
margin-left:-200px;
/*关键步骤:设置为相对定位,right:-200px意思是向左边移动200px;*/
position: relative;
right:-200px;
/*背景色*/
background-color: lightgreen;
}
/*底部去除浮动*/
.footer {
clear: both;
}
</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>点击 "运行实例" 按钮查看在线实例
主要区别：
双飞翼是main在wrap里 ，设置wrap100%宽度确保后边块换行显示，最后左右两部分位移到上一行，通过左右外边距把中间寄出来。
圣杯是main在cintainer里 ，设置cintainer600宽度， 里边的main100%宽度确保后边块换行显示，左右两部分位移到上一行主体的左右侧，最后通过相对定位腾出位置。
手抄：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
