收藏
批改状态：合格
老师批语：
圣杯布局：
思路总结：
1 、DOM结构，3部分主体必须最前面，其次是左侧和右侧
2、设置父级宽度，然后3类内容都容纳在父级框架里面
3、3个区块都左浮动，主体部分100%宽度，占据所有宽度
4、设置主体的内边距padding=200px;挤出宽度，
5、设置左侧内容左侧浮动-100%，返回左侧部位，再设置相对定位，右移200px，以达到指定左侧位置
6、设置右侧内容左浮动-200px,到主体右侧部分，然后相相对定位，左移200px.以达到右侧位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯3列布局练习</title>
<style type="text/css">
.top,.bottm{
/*设置顶部和底部的背景 天蓝，宽度高度*/
background-color: lightskyblue;
width: 100%;
height: 60px;
}
.bottm {
/*清除底部浮动，防止底部飘来*/
clear: both;
}
.content{
/*设置顶部和底部内容去背景色，宽度高度*/
background-color: blue;
width: 600px;
height: 100%;
/*设置区块水平*/
margin: auto;
/*文本水平居中*/
text-align: center;
/*设置内容垂直居中*/
line-height: 60px;
}
.frame{
/*设置父级宽度*/
width: 600px;
height: 100%;
/*内容区块居中*/
margin:auto;
background-color: lightgray;
/*使内容区能整个包住，不至于超出设置区域的宽高*/
overflow: hidden;
/*直接设置内边距，左右各200px*/
padding:0 200px;
}
.main{
/*设置高度，宽度100%自适应父级宽度*/
width: 100%;
height: 600px;
float: left;
background-color: yellow;
}
.left{
width: 200px;
height: 600px;
background-color: gray;
float: left;
margin-left:-100%;
position: relative;
left:-200px;
}
.right{
width: 200px;
height: 600px;
background-color: gray;
float: left;
margin-left:-200px;
position: relative;
right:-200px;
}
</style>
</head>
<body>
<div class="top">
<div class="content">顶部</div>
</div>
<div class="frame">
<div class="main">主体</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="bottm">
<div class="content">底部</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
双飞翼布局：
思路总结：1、DOM结构，内容部分必须先写主体，再写左侧和右侧，确保顺序正确。
2、内容部分创建父级区域，设置固定宽度后，子区块就可以直接继承宽度，不用单独设置。区块必须都左浮动
3、左侧部分浮动后直接设置-100%左侧浮动直接到左边位置
4、右侧部分左浮动后，直接到下面的最左侧，-200px对应宽度直接到右侧部分
5、然后主体部分，需要设置外面距200px的边距，以挤出空间，放左右部分内容
6、内容区浮动后，底部会飘起来，需要清除底部浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼3列布局练习</title>
<style type="text/css">
.top,.bottm{
/*设置顶部和底部的背景 天蓝，宽度高度*/
background-color: lightskyblue;
width: 100%;
height: 60px;
}
.content{
/*设置顶部和底部内容去背景色，宽度高度*/
background-color: blue;
width: 800px;
height: 100%;
/*设置区块水平*/
margin: auto;
/*文本水平居中*/
text-align: center;
/*设置内容垂直居中*/
line-height: 60px;
}
.bottm{
/*清除底部浮动*/
clear: both;
}
.frame{
/*设置父级宽度*/
width: 800px;
height: 100%;
/*内容区块居中*/
margin:auto;
background-color: lightgray;
/*使内容区能整个包住，不至于超出设置区域的宽高*/
overflow: hidden;
}
.main{
/*设置高度，宽度100%自适应父级宽度*/
width: 100%;
height: 600px;
background-color: yellow;
/*设置主体左浮动*/
float: left;
}
.con{
/*设置高度，宽度直接继承父级，背景色浅灰*/
height: 600px;
background-color: lightgray;
/*设置左右边距为200px;空出区域显示左右测内容*/
margin:0 200px;
}
.left,.right{
/*统一设置左侧和右侧宽高背景色为灰色，左浮动*/
width: 200px;
height: 600px;
background-color: gray;
float: left;
}
.left{
/*往上浮动到主体左侧位置*/
margin-left: -100%;
}
.right{
/*往上浮动到主体右侧位置*/
margin-left: -200px;
}
</style>
</head>
<body>
<div class="top">
<div class="content">顶部</div>
</div>
<div class="frame">
<div class="main">
<div class="con">主体</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="bottm">
<div class="content">底部</div>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄代码：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
