CSS—圣杯布局

这几天看了一些简单的布局,刚开始看的时候,里面一些代码不要明白是什么意思,找找资料看看书问题一般就能解决了。也可能自己理解不是很深入吧,所以又深入看一看书多理解理解那些常用属性。

圣杯布局就是我遇到问题的一个方面,所以我要把我遇到的问题写下来,供大家参考了啊。

重点内容:margin的负值应用

 

 

圣杯布局

圣杯其实吧,就是网页中间内容部分的三列布局。一般有以下几点

1. 头部、中间内容区、页脚部分三大部分

2.头部和页脚部分高度固定,宽度自适应浏览器窗口宽度

3.中间内容区是三列布局:左右两边是固定高宽,中间一列宽度自适应

这次的实例是以浮动实现圣杯布局的。

第一步:创建三个主体div—页眉部分即网页的头部、中间主体部分以及页脚部分。

第二步:在中间主体部分再创建三个div别为middle、left、right

第三步:书写CSS代码—最重要的部分是让middle和left以及right在一行上显示

以下:

(1)设置中左右三部分向左浮动:

此时会发现中间部分在一行,左右栏在一行。

发现页脚也向上移动了,并且在right的右侧,这是footer自身受到浮动元素的影响了,需要清除自身的浮动:clear:both

(2)设置左边栏在cententer的最左边(右边栏right同理):

设置left盒子的margin-left:-100%。middl、left和right没有显示一行中,这是因为中间栏设置的是自适应宽度,left栏没宽度可占据被挤到下一行显示,right紧跟其后。为了让left在cententer的最左边,需要让left盒子向左移动middle的宽度即:margin-left:-100%。

(3)右边栏在最右边显示:

右边栏在设置左外边距时,只需要向左移动左边栏的一个宽度:margin-left:-200px即可回到最右边的位置

(4)让middle的内容显示出来:

因为浮动的原因,left和right都在middle的上面,挡住middle的内容了,所以就需要设置cententer的内边距,为左右两栏留出位置

设置cententer的padding-left:200px(左边栏的宽度);padding-right:150px(右边栏的宽度)

设置完外边距后,此时左右栏并没有在最左和最右,因为子元素总是在父元素的内容区开始显示的。要想贴近contenter的padding边界,

还需要设置相对定位:

左边栏向左移动自身宽度值贴近contenter的padding边界—left:-200px

右边栏向左移动自身宽度值—left:-150px

注意:自适应的布局是随浏览器窗口大小而改变的,为了避免出现一些怪异现象都会为body设置一个最小宽度:min-width

 

源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圣杯布局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 500px;
				background-color: antiquewhite;
			}
			#header{
				width: 100%;
				height: 100px;
				background-color: coral;
			}
			#contenter{
				width: 100%;
				height: 300px;
				/* 因为浮动的原因,left和right两栏均在中间栏的上面,所以中间栏的内容
				会被遮挡住,故而设置padding值  把左右两栏的位置留出来  
				分别设置左右内边距的值为左右两栏的固定宽度值*/
				padding-left: 200px;
				padding-right: 150px;
			}
			#middle{
				width: 100%;
				height: 300px;
				background-color: pink;
				float: left;
			}
			#left{
				width: 200px;
				height: 300px;
				/* 在设置浮动之后三栏应该在同一行上,因为中间栏是自适应宽度
				所以left和right被挤到下一行,因而要设置left的margin-left为-100%
				把left拉回到中间栏的最左侧 */
				margin-left: -100%;
				
				/* 这里设置相对定位是为了让左侧挡住的中间栏部分内容显示出来 */
				position: relative;
				left: -200px;
				background-color: hotpink;
				float: left;
			}
			#right{
				width: 150px;
				height: 300px;
				margin-left: -200px;
				position: relative;
				left: -150px;
				background-color: deeppink;
				float: left;
			}
			#footer{
				width: 100%;
				height: 100px;
				clear: left;
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="contenter">
			<div id="middle">middle</div>
			<div id="left">left</div>
			<div id="right">right</div>
		</div>
		<div id="footer" class=clearfloat"">footer</div>
	</body>
</html>

 

效果图

 

这个图更加清晰的介绍了如何布局,可以参考以下

 

下一个就是双飞翼布局楼咯!

发布了11 篇原创文章 · 获赞 2 · 访问量 93

猜你喜欢

转载自blog.csdn.net/qq_42383764/article/details/103385387