页面布局

页面布局

本篇介绍三个经典的页面布局:圣杯布局,双飞翼布局,以及多列布局。来熟悉HTML和CSS。
其中圣杯布局跟双飞翼布局,目的都是左右两栏固定宽度,中间部分自适应。但是实现方式略有不同
但是都运用到了margin取负值以及浮动带来的效果。

圣杯布局

我们先定义html结构

1
2
3
4
5
6
7
8
9
<body>
<div class="header">header</div>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>

为了方便观察可以给每个div加上背景颜色

颜色准确定义应使用十六进制表示法
例如
黑色 #000000
白色 #FFFFFF
大多数IDE都支持对于颜色的选择

CSS样式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<style type="text/css">
* {
margin: 0;
padding: 0;
}
//设置全局样式

body {
min-width: 700px;
}
//设置最小宽度

.header,
.footer {
border: 1px solid #333;
background: #aaa;
text-align: center;
}

.left,.main,.right {
position: relative;
min-height: 130px;
background-color: red;
float: left;
}
//设置浮动

.container{
border: 2px solid yellow;
padding:0 220px 0 200px;
overflow: hidden;
}
//overflow清除浮动带来的影响

.left {

margin-left: -100%;
left: -200px;
width: 200px;
background: red;
}
<!-- magin-left取-100%使这个div离开本来在的位置。
并且向上移动整个一行(100%)。left取值-200px是因为它本来有200px的宽度,
所以要再向左移动200px. -->
.right {
right: -220px;
margin-left: -220px;
width: 220px;
background: green;
}
//原理同上
.main {
width: 100%;
background: blue;
}
//width:100%使其充满这个一行,后面的调整会使其压缩。
</style>

圣杯布局有个问题,当面板的main部分比两边的子面板宽度小的时候,布局就会乱掉(虽然一般不会出现这种情况)于是就有了下面的双飞翼。

双飞翼布局

首先还是定义HTML结构,

1
2
3
4
5
6
7
8
9
<div class="header">header</div>
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>

我们发现在处理中间内容上双飞翼布局多加了一个div将内容单独包裹起来
在写CSS时就可以少写position元素,以及left,right。读者可以自己尝试一下。

多列布局

兼容IE6的方式可参考博客
在此介绍用CSS3的columns属性完成多列布局。

column-count 属性设置列的具体个数
column-width属性控制列的宽度.如果你没有提供column-count属性值,那么,浏览器就是自主决定将文本分成合适的列数。
两个属性的属性值是不同单位,不会搞混,所以就有了简写方式,columns

比如column-width:10em === columns:10em
column-count:5 === columns:4
同时声明的话可以写作columns:12 8em

两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em,但如果你使用column-gap属性,就会修改这个缺省的宽度值

关于列高度:各列的高度是均衡的,浏览器会自动调整每列里填充多少文本、均分文本,来使各列的高度保持均衡一致。
然而,有时候,我们需要设定列的最大高度,这个时候,文本内容会从第一列开始填充,然后第二列,第三列,也许以后的列会填不满,也许会溢出。所以,当对多列布局设定了height或max-height属性值后,列会伸长到指定高度——无论内容有多少,够不够或超不超。

本站总访问量