博客列表 >2018/03/27(经典双飞翼布居+圣杯布局)

2018/03/27(经典双飞翼布居+圣杯布局)

梁凯达的博客
梁凯达的博客原创
2018年04月01日 17:31:13876浏览

双飞翼实现方法:

三列经典的双飞翼布局的创建步骤与原理分析:    

第1步: 创建一个大容器container,设置页面总宽度并左右居中    

.container {    

min-width: 1000px;    

margin: auto;    

background-color: yellow;    

}    


第2步:创建三列DOM结构,顺序非常重要,    

2.1主体content在前,其次是left和right    

2.2主体content必须套一个父级块main,将样式加给它才可以    

2.3其中main宽度100%,left,right宽度固定    

2.4main,left,right的高度暂时先设置为固定值,有了内容填充时再设置为100%,随内容自适应变化    


第3步:main,left,right全部左浮动,因为前面的wrap块宽度为100%,必须导致left,right全部被挤到了下面    


第4步: left设置,margin:-1000px;或者 margin-left:-100%;    

(100%就是父级块的宽度1000px,负数表示方向相反,即向左缩进,最终到达父块起始点:0,0)    


第5步: right设置,参考left,只需要margin-left: -200px;    

(注意,只要移动一个绝对值,把自己移上去到最后就可以了)    


第6步: content内容块,添加左右外边距,将内容区挤压出来: margin: 0 200px;    

并给一个宽度100%,直接引用父级块宽度    

--

圣杯实现方法:

圣杯布局的基本思路与实现步骤:
-------------------------

1.DOM结构的特点:
1.1: 必须一个父级容器container
1.2内部的三列,主体main必须在最前面,确保优先渲染,其次是left和right
---------------------------------------------------------------------

2.区块宽度和高度的特点:
2.1: main+left+right = 总宽度
2.2: 父区块container宽度 = main宽度
2.3: 宜先设置container宽度,如600px,main的width:100%即可;
2.4: 因为暂时无内容填充,需要设置一个最小高度min-height才可以看到效果,例如650px;
---------------------------------------------------------------------

3.三个区块必须全部左浮动:
3.1: 因为main区块占据了100%宽度,后面的left和right必须要被换行显示
3.2: left,right都是浮动元素,所以按浮动的顺序显示,left在前right在后
--------------------------------------------------------------------

4.将浮动区块left和right上移到main区块的指定位置
4.1: 通过给left和right设置负的左外边距margin-left来实现浮动区块的反向移动;
4.2: left必须跨越整个main区块才可以到达定位的起点: margin-left:-100%;
4.3: right区块是在右边显示,所以只要跨过自己的宽度就可以: margin-left:200px;
---------------------------------------------------------------------------

5. 给container添加内边距,进行挤压完成布局,这也是圣杯布局的精妙之处
5.1: 添加左右内边距padding,宽度等于left和right
5.2: 添加的左右边距其实就是后面的left和right的实际位置
---------------------------------------------------------------------------------

5. 将main区块的内容完整的显示出来
5.1: left和right占据了main区块的位置,覆盖掉了main区块的部分内容
5.2: 可以对left和right进行相对定位,让他们把占据的main空间的位置腾出来
5.3: 那么问题来了? left和right都是浮动元素,都是脱离了当前文档流的,可以使用相对定位吗?
5.4: 答案是肯定的,为什么呢? 相对定位的原则是:相对该元素原来的位置进行重新定位,元素处于文档流中只是一种
特殊情况,浮动元素可以看作处在一个特殊的由浮动元素组成的一个文档流中,是另一个世界.
5.5. 那么相对移动多少呢? 只要移动它们自身的宽度就可以了:
left: relative; left: -200px;(距离左边-200px)反向移动
right: relative; right: -200px;(距离右边-200px)反向移动
------------------------------------------------------------------------------------

-

代码部分(双飞翼)

实例

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			.herater,.footer{
				width: 100%;
				height: 80px;
				background: #888888;
			}
			.content{
				width: 1200px;
				height: 80px;
				background: darkgray;
				margin: auto;
			}
			.container{
				width: 1200px;
				overflow: hidden;
				margin: auto;
			}
			.wrap{
				width: 100%;
				height: 600px;
				float: left;
			}
			.left{
				width: 200px;
				height: 600px;
				background: brown;
				float: left;
				margin-left:-100%;
			}
			.main{
				background: #008B8B;
				height:600px;
				margin: 0 200px;
			}
			.right{
				width: 200px;
				height: 600px;
				background: brown;
				float: left;
				margin-left:-200px;
				}
		</style>
	</head>

	<body>
		<div class="body">
			<div class="herater"><!--头部-->
				<div class="content"></div><!--头部内容-->
			</div>
			<div class="container"><!--中间主体-->
				<div class="wrap"><!--主体中间部分-->
					<div class="main"></div><!--中间主体部分-->
				</div>
				<div class="left"></div><!--主体左边-->
				<div class="right"></div><!--主体右边-->
			</div>
			<div class="footer"><!--底部-->
				<div class="content"></div>
			</div>
		</div>
	</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

圣杯布局:

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		.nav,.footer{
			height: 100px;
			width: 100%;
			background: #FF0000;
		}
		.content{
			width: 1200px;
			height: 100px;
			background: black;
			margin: auto;
		}
		.main{
			height: 600px;
			width: 1200px;
			background: aqua;
			margin: auto;
			overflow: hidden;
			
		}
		.left{
			width: 20%;
			height: 600px;
			background: blueviolet;
			float: left;
		}
		.right{
			width: 20%;
			height: 600px;
			background:  lawngreen;
			float: left;
		}
		.centen{
			width: 60%;
			height: 600px;
			background: saddlebrown;
			float: left;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="content"></div>
	</div>
		<div class="main">
			<div class="left"></div>
			<div class="centen"></div>
			<div class="right"></div>
		</div>
		<div class="footer">
			<div class="content"></div>
		</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议