这几天看了一些简单的布局,刚开始看的时候,里面一些代码不要明白是什么意思,找找资料看看书问题一般就能解决了。也可能自己理解不是很深入吧,所以又深入看一看书多理解理解那些常用属性。
圣杯布局就是我遇到问题的一个方面,所以我要把我遇到的问题写下来,供大家参考了啊。
重点内容: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>
效果图
这个图更加清晰的介绍了如何布局,可以参考以下
下一个就是双飞翼布局楼咯!