收藏
批改状态：合格
老师批语：
双飞翼的步骤与原理：
双飞翼就像画鸟一样，先画身体，再画翅膀，首先创建一个父级也就是一个大容器container，设置页面的总宽度并居中
其次创建DOM结构顺序很重要里面放内容、左部，和右部，内容必须创建一个父级块用来设置参数（如果不创建会把lift，和right挤掉）其中main宽度100%,left,right宽度固定，main,left,right的高度暂时先设置为固定值,有了内容填充时再设置为100%,随内容自适应变化，main,left,right全部左浮动,因为前面的wrap块宽度为100%,必须导致left,right全部被挤到了下面， left设置,margin:-1000px;或者 margin-left:-100%（100%就是父级块的宽度1000px,负数表示方向相反,即向左缩进,最终到达父块起始点:0,0）content内容块,添加左右外边距,将内容区挤压出来: margin: 0 200px;已经给了一个宽度100%。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞布局</title>
<style type="text/css">
.toubu,.weibu{
width: 100%;
height: 60px;
background-color:#E9E9E9;
}
.weibu{
clear: both;
}
.neirong{
width:1000px;
background-color:#3C3940;
margin:0 auto;
min-height: 100%;
text-align: center;
line-height: 60px;
}
.zhuti{
width: 1000px;
background-color: yellow;
margin:0 auto;
overflow: hidden;
}
.zhuti1{
width:100%;
min-height:600px;
float:left;
background-color: red;
}
.main{
min-height:600px;
background-color: lightgray;
margin:0 200px;
}
.zuobu{
width:200px;
min-height:600px;
background-color: lightskyblue;
float:left;
margin-left:-100%;
}
.youbu{
width:200px;
min-height:600px;
background-color: lightgreen;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="toubu">
<div class="neirong">头部</div>
</div>
<div class="zhuti">
<div class="zhuti1">
<div class="main">中间</div>
</div>
<div class="zuobu">左部</div>
<div class="youbu">右部</div>
</div>
<div class="weibu">
<div class="neirong">尾部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2圣杯的步骤及原理
圣杯就是利用padding来实现的。
给main，left，right，创建一个父级container，main在第一位，其顺序是main，left，right，container的宽度等于main的宽度，先给container600px，main100%，left和right都是固定的200px，让他们浮动起来，效果和双飞一样main在上边left和right在下边，还是和双飞一样把left和right，margin-left就会覆盖main在用padding撑大container
在用相对定位把left和right移动到两边。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<style type="text/css">
.head ,.weibu{
width:100%;
height: 65px;
background-color:#E9E9E9;
}
.conntet{
margin:0 auto;
background-color: #3C3940;
text-align: center;
line-height: 65px;
width:1000px;
min-height: 65px;
}
.zhuti{
width:600px;
margin:0 auto;
background-color: yellow;
overflow: hidden;
padding: 0 200px;
}
.main{
width:100%;
min-height: 600px;
background-color: lightgray;
float:left;
}
.left{
width:200px;
min-height: 600px;
background-color: lightgreen;
float:left;
margin-left: -100%;
position: relative;
left:-200px;
}
.right{
width:200px;
min-height: 600px;
background-color: lightskyblue;
float:left;
margin-left: -200px;
position: relative;
right:-200px;
}
</style>
</head>
<body>
<div class="head">
<div class="conntet">网页头部</div>
</div>
<div class="zhuti">
<div class="main">中部</div>
<div class="left">左部</div>
<div class="right">右部</div>
</div>
<div class="weibu">
<div class="conntet">网页底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写代码如下：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
