双飞翼布局与圣杯布局的区别：
双飞冀:
1.中间区块必须要套一个父级容器;
2.将父级容器宽度设置为100%,将要渲染的内容放在内部的主体盒子中;
3.当左右区块通过设置负外边距方式与主体同行后;
4.再通过给内容容器的父容器设置左右外边距margin的方式,将左右二列排列到位.
圣杯:
1.不需要为中间内容区创建父级容器,DOM结构比双飞冀略微简单些;
2.其它操作与双飞冀基本相同,只不是中间区块的内容是通过相对定位来实现的.
实例
<!doctype html>
<html>
<head>
<title>固定定位</title>
<meta charset="utf-8">
<style>
.box1 {
position: fixed;
bottom: 0; /*底部*/
right: 0; /*右边*/
margin:0;
}
body{
margin:0;
}
</style>
</head>
<body>
<div class="box1">
<a href="http://www.qq.com/"><img src="QQ1.png" alt="广告"></a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style>
.header ,.footer {
width:100%;
height:60px;
background: darkolivegreen;
}
.content{
width:1000px;
height:100%;
background: orange;
margin:auto;
text-align: center;
line-height: 60px;
}
.footer{
clear: both;
}
.container{
margin: auto;
background: darkcyan;
width: 600px;
}
.container .main{
width: 100%;
min-height: 650px;
background: darkmagenta;
float: left;
}
.container .left{
width: 200px;
min-height: 650px;
background: red;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.container .right{
width: 200px;
min-height: 650px;
background: gray;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html>
<head>
<title>双飞翼布局</title>
<meta charset="utf-8">
<style>
.header ,.footer {
width:100%;
height:60px;
background: darkmagenta;
}
.content{
width:1000px;
height:100%;
background: orange;
margin:auto;
text-align: center;
line-height: 60px;
}
.container{
width:1000px;
margin:auto;
background: khaki;
overflow: hidden;
}
.wrap{
width:100%;
background: darkcyan;
float: left;
}
.main{
min-height: 600px;
background: greenyellow;
margin: 0 200px;
}
.left{
width:200px;
min-height: 600px;
background: antiquewhite;
float: left;
margin-left: -100%;
}
.right{
width:200px;
min-height: 600px;
background: cornflowerblue;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<!--1 主体内容区域要优先渲染-->
<!--2 3列全部采用浮动布局-->
<!--3 对中间区域的处理，如果用margin的方式挤出来，是双飞翼布局，如果通过相对定位来出来，则是圣杯布局-->
<div class="header">
<div class="content">头部</div>
</div>
<!--双飞翼布局，主体内容优先渲染，且主体内容要放在一个专门的容器中-->
<div class="container">
<div class="wrap">
<div class="main">主体内容</div>
<!--主体内容优先渲染，且放在了一个名为wrap中的容器中-->
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html>
<head>
<title>图文混排</title>
<meta charset="utf-8">
</head>
<body>
<div class="box1">
<h2>这个是一个很神奇的课程</h2>
<img src="1.jpg" >
<p>据悉，国务院决定自2018年起，将每年8月19日设立为“中国医师节”，今年的8月19日，中国迎来了首个
医师节。围绕首个中国医师节主题“尊医重卫 共享健康”，保定市第一中心医院开展了多种形式的纪念庆祝
活动。17日下午，该院组织召开的首届中国医师节保定市第一中心医院颁奖典礼掀起了这一系列活动的高潮。
颁奖典礼上，
保定市第一中心医院党委班子全体出席大会，全院中层干部、
受表彰的优秀医师等400余名代表参加活动。会议由该院党委副书记舒民主持。
保定市第一中心医院党委书记、院长郭淑芹首先代表医院领导班子向全院医师特别是节日期
间仍奋战在医疗一线，坚守岗位的白衣们致以节日的问候和崇高的敬意，她在致辞中提到，国家设立医师节，
这是继教师节、记者节、护士节之后中国第四个行业性节日，2个行业性节日都是有关医疗卫生领域，足以体
现党中央对卫生健康工作的高度重视。郭淑芹强调，中国医师节的设立，作为医生的我们备受鼓舞，终于有
了属于自己的节日，医生的职业价值被尊重，在感受沉甸甸的医生获得感同时也要清楚地记得救死扶伤是医
者的本职和天职，医生要始终心里装着患者，换位思考，体味患者疾苦，要以新时代医务工作者
的职业精神“敬佑生命、救死扶伤、甘于奉献、大爱无疆”汇聚力量，砥砺前行。</p>
</div>
<style>
.box1 h2{
text-align:center;
margin-bottom:20px;
}
img{
float:left;
width:150px;
height:150px;
margin-right:20px;
margin-bottom:20px;
}
body{
margin:0;
}
h2{
margin:0;
}
.box1{
width:700px;
background: khaki;
padding:16px;
}
p{
margin:0;
text-indent:2rem;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
