线上培训第八天
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列双飞翼布局</title>
<style type="text/css">
/*设置头部/尾部样式*/
.header,.footer{
width: 100%;
height: 50px;
background-color: #ADD8E6;
}
/*设置头尾部行内元素样式*/
.content{
text-align: center;
line-height: 50px;
width: 1000px;
margin:auto;
background-color: #4682B4;
}
.main{
width: 1000px;
margin:auto;
background-color: #CDCD00;
/*使当前区块能够包住内部的浮动区块*/
overflow: hidden;
}
.marp{
/*与父级同宽*/
width: 100%;
float: left;
background-color: #006400;
}
.center{
min-height: 600px;
background-color: #8FBC8F;
margin:0 200px;
}
.left{
width: 200px;
min-height: 600px;
float: left;
background-color: #3CB371;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
float: left;
background-color: #20B2AA;
margin-left: -200px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">头部</div>
</div>
<!-- 主体 -->
<div class="main">
<div class="marp">
<div class="center">主体中间</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 尾部 -->
<div class="footer">
<div class="content">尾部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三列双飞布局创建步骤及分析：
1.创建一个大容器main，设置页面宽度并居中；
.main{
margin:auto;
width:1000px;
}
2.DEMO结构，顺序非常重要
中间主体center在先，其次是left和right;
主体center必须嵌套一个父级marp;
父级marp宽度是100%，left,right宽度固定；
3.center/left/right 设置浮动，因为marp宽度为100%，必须导致left,right全部被挤到了下面
4.left设置,margin:-1000px;或者 margin-left:-100%;(100%就是父级块的宽度1000px,负数表示方向相反,即向左缩进,最终到达父块起始点:0,0)
5.right设置,参考left,只需要margin-left: -200px; (注意,只要移动一个绝对值,把自己移上去到最后就可以了)
6.center块,添加左右外边距,将内容区挤压出来: margin: 0 200px;并给一个宽度100%,直接引用父级块宽度
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列圣杯布局</title>
<style type="text/css">
/*设置头部/尾部样式*/
.header,.footer{
width: 100%;
height: 50px;
background-color: #ADD8E6;
}
/*设置头尾部行内元素样式*/
.content{
text-align: center;
line-height: 50px;
width: 1000px;
margin:auto;
background-color: #4682B4;
}
/*设置父容器大小*/
.main{
width: 600px;
margin:auto;
background-color: #E0FFFF;
/*使它能包住浮动区块*/
overflow: hidden;
padding: 0 200px;
}
.main .center{
min-height: 600px;
/*宽必须为100% 与父级一致*/
width: 100%;
float: left;
background-color: #E0F0FF;
}
.main .left{
min-height: 600px;
width: 200px;
float: left;
background-color: #0EF1FF;
margin-left: -100%;
position: relative;
left:-200px;
}
.main .right{
min-height: 600px;
width: 200px;
float: left;
margin-left: -200px;
background-color: #20B2AA;
position: relative;
right:-200px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">头部</div>
</div>
<!-- 主体 -->
<div class="main">
<div class="center">主体中间</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 尾部 -->
<div class="footer">
<div class="content">尾部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯布局创建步骤及分析：
1.必须要有一个父级容器 main；
2.渲染顺序主体center/left/right；
3.设置父容器main大小 width:600px;
4.中间主体center宽度必须为100%，后面的left和right必须要被换行显示；
5.center/left/right设置为浮动；
6.父级容器 main 设置 overflow: hidden;/*使它能包住浮动区块*/
7.通过给left和right设置负的左外边距margin-left来实现浮动区块的反向移动;
8.给父元素添加内边距,进行挤压完成布局,这也是圣杯布局的精妙之处
添加左右内边距padding,宽度等于left和right
9.设置left/center position: relative 相对移动
作业：
