收藏
批改状态：合格
老师批语：
总结：
在css中3列布局是非常重要的，无论在中国网站还在在外国的网站到处都可以看到3列布局的存在，应该非常广泛，在3.27号中为们学习了绝对定位的3列布局。双飞翼3列布局，圣杯3列布局，还有用到很多的以前的知识，学习代码不经可以学习到新的东西，还可以复习到其他以前学过的知识点，因为代码都是重复使用的。在双飞翼中一定要注意给父元素设置宽度，还有要注意的是浮动是脱离文档流的，防止塌陷。给中间的div加一个空壳，防止被撑大
实例
这是双飞翼3列布局，用到了浮动元素：基本思路：
首先创建一个大盒子，包含着3个元素并设置高度，然后水平居中。
再创建3个div盒子先设置中间的区块并设置100%的宽度，然后设置左右区块，
将3个div区块全部左浮，再给左边的设置margi="-100%"，给右边的设置margin="-200px"
再将中间的div区块挤出来margin-left：200px；margin-right：200px；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼</title>
<style type="text/css">
.boy{
padding: 0;
margin:0;/*将boy的内外边距为0*/
}
.top{
width: 100%;
height: 60px;
background-color: #888;
}
.one{
width: 1000px;
min-height: 100%;
background-color: #000;
margin: auto;
}
.footer{
width: 100%;
height: 60px;
background-color: #888;
clear: both;/*清除浮动，否者会塌陷*/
}
.text{
width: 1000px;
height: 600px;
background-color: #ff0;
margin: auto;/*将div居中*/
}
.body{
margin-right: 200px;/*将左右的两行挤出来，实现网页自适应*/
margin-left:200px;
text-align: center;/*文本居中*/
}
.left{
width: 200px;
height: 600px;
background-color:#ff0;
float: left;/*左浮动*/
margin-left: -100%;/*将左边的div返回原来的位置*/
text-align: center;/*文本居中*/
}
.reigth{
width: 200px;
height: 600px;
background-color:#00fa9a;
float: left;/*左浮*/
margin-left: -200px;/*将右边的区块移到原来的位置就是-200px*/
text-align: center;/*文本居中*/
}
.ke{
width: 100%;/*设置宽为100%*/
height: 600px;
background-color:#0ff;
float: left;
}
</style>
</head>
<body>
<div class="top">
<div class="one"></div>
</div>
<div class="text">
<div class="ke">
<div class="body">中间</div><!--给body套上一个空壳，防止盒子撑大-->
</div>
<div class="left">左边</div>
<div class="reigth">右边</div>
</div>
<div class="footer">
<div class="one"></div>
</div>
思路：
首先创建一个大盒子，包含着3个元素并设置高度，然后水平居中。
再创建3个div盒子先设置中间的区块并设置100%的宽度，然后设置左右区块，
将3个div区块全部左浮，再给左边的设置margi="-100%"，给右边的设置margin="-200px"
再将中间的div区块挤出来margin-left：200px；margin-right：200px；
</body>
</html>
这个是圣杯3列布局，用到了浮动.相对定位.margin的设置，大致跟双飞翼布局差不多
思路：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.boy{
padding: 0;
margin:0;/*将boy的内卫边距为0*/
}
.top{
width: 100%;
height: 60px;
background-color: #888;
}
.one{
width: 1000px;
min-height: 100%;
background-color: #000;
margin: auto;
}
.footer{
width: 100%;
height: 60px;
background-color: #888;
clear: both;/*清除浮动，否者会塌陷*/
}
.text{
width: 600px;
margin :auto;/*清除浮动*/
background-color: #00ffff;
padding: 0 200px;/*内边距为上下为左右为200px*/
overflow: hidden;/*不显示滚动条*/
}
.text .body{
width: 100%;
height:600px;
background-color: #20b2aa;
float: left;/*3个div都要左浮*/
}
.text .left{
width: 200px;
height: 600px;
background-color: #696969;
float: left;
margin-left: -100%;/*div回到原来的位置*/
position: relative;/*相对定位*/
left: -200px;/*向左边移到200px*/
}
.text .reigth{
width: 200px;
height: 600px;
background-color: #800080;
float: left;
margin-left: -200px;/*div回到原来的位置*/
position: relative;/*相对定位*/
right: -200px;/*向右边移到200px*/
}
</style>
</head>
<body>
<div class="top">
<div class="one"></div>
</div>
<div class="text">
<div class="body">中间</div>
<div class="left">左边</div>
<div class="reigth">右边</div>
</div>
<div class="footer">
<div class="one"></div>
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
行实例 »点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
