博客列表 >CSS双飞翼和圣杯布局 2018-3-27

CSS双飞翼和圣杯布局 2018-3-27

kaclod的博客
kaclod的博客原创
2018年03月28日 11:17:58650浏览

双飞翼布局和圣杯布局实现的效果一样,都是实现3栏布局,中间盒子自适应,左右盒子固定的布局。


双飞翼布局

1 是先建一个dom树结构,得到外层为container的大的的div块包裹,内层得到三列,分别为main,left,right.

需要注意dom结构中,main的主列在最前面。

2 让3列浮动起来,浮动后因为main外包的wrap壳是100%

3 左列需要设置负的margin值-100%,右列需要设置margin-left:-200px(移动一个绝对值,能够把自己移上去到最后就可以。)

4: main内容区主列需要添加左右的外边距,将内容区挤出


圣杯布局

dom树和双飞翼布局一样,3列浮动也是一样的,但是main主体没有外包的.wrap的div由于浮动后左右两侧的浮动快被挤到下面

所以将浮动后的left和right上移到main区块的指定位置,最后通过相对定位(relative)left:-200,right:-200把他们占

据的main空间腾出来。

区别:圣杯布局用到相对定位,双飞翼不需要;双飞翼多了一个包裹中间区域的div,圣杯布局则不用。 

双飞翼代码如下:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼布局</title>
	<style type="text/css">
		.header,.footer {
			width:100%;
			height:60px;
			background-color:lightgray;

		}

		.content {
			width:1000px;
			height:100%;
			background-color: gray;
			margin:auto;
			text-align:center;/*内联文本居中*/
			line-height:60px;
		}

		.container {
			width:1000px;
			margin:auto;
			overflow:hidden;/*当前区块能够包住内部的浮动区块*/
			background-color:yellow;
		}

		.wrap {
			width:100%;
			background-color: cyan;
			float:left;/*左浮动*/
		}

		.main {
			min-height:600px;
			background-color:wheat;
			margin:0 200px;
		}
		.left {
			min-height:600px;
			width:200px;
			float:left;
			background-color: blue;
			margin-left:-100%;/*将左侧区块拉回主区块的中间位置*/
		}

		.right {
			min-height:600px;
			width:200px;
			float:left;
			background-color: green;
			margin-left:-200px;/*将区块拉回主区块的右侧*/
		}
	</style>
</head>
<body>
	<div class="header">
		<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>
	
</body>
</html>

运行实例 »

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

圣杯布局如下:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
	<style type="text/css">
	.header, .footer {
		width:100%;
		height:60px;
		background-color:lightgray;

	}

	.footer {
		clear:both;/*清除底部左右两边的浮动元素*/
	}

	.content {
		width:1000px;
		height:100%;
		background-color:gray;
		margin:auto;
		text-align:center;
		line-height:60px;
	}

	.container {
		width:600px;
		background-color:yellow;
		margin:auto;
		overflow:hidden;/*使它能包住浮动区块*/
		/*因为左右区块现在覆盖在main之上,挡住了main的内容,现在添加padding来实现自身内容显示*/
		padding:0 200px;
	}

	.main {
		height:650px;
		width:100%;
		float:left;
		background:wheat;
	}

	.left {
		width:200px;
		min-height:650px;
		float:left;
		background-color:green;
		margin-left:-100%;
		position: relative;/*相对定位*/
		left:-200px;

	}

	.right {
		width:200px;
		min-height:650px;
		float:left;
		margin-left:-200px;
		background-color:lightgreen;
		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>

运行实例 »

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

手抄作业:

1.png

2.png

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