1、前言
布局在经过构思,还有用表格模拟,现在是实战检验了。
2、布局
2.1、头中尾
先把页面分成3大块,#h,#f所有页面公用,不放置任何h标签。#b为主内容区域,每个页面都不同,h标签依次放置,设计稿没有的标题做视觉隐藏。
2.2、居中块
添加.w{width:960px; margin:0 auto}让所有内容居中。
2.3、行
r用来添加统一的上下间距,r1-rn为每行的唯一索引,方便细节的控制。
有的时候需要先分居中块再分行,比如中部和尾部。有时候要先分行再分居中快,比如头部。这个看情况而定。
2.4、列
C用来添加统一的左右间距和浮动,c1-cn用来控制列的宽度和特殊的左右间距。
2.5、块
3、html
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<
div
id
=
"h"
>
<
div
class
=
"r r1"
>
<
div
class
=
"w clearfix"
>
<
div
class
=
"c cl fl"
>
<!--logo-->
</
div
>
<
div
class
=
"c c2 fr"
>
<!--广告-->
</
div
>
</
div
>
</
div
>
<
div
class
=
"r r2"
>
<
div
class
=
"w clearfix"
>
<
div
class
=
"c c1 fl"
>
<!--导航-->
</
div
>
<
div
class
=
"c c2 fr"
>
<!--搜索-->
</
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"b"
role
=
"main"
>
<
div
class
=
"w"
>
<
h1
class
=
"visually-hidden"
>爱心网</
h1
>
<
div
class
=
"r r1 clearfix"
>
<
div
class
=
"c c1 fl"
>
<
div
class
=
"m m1"
>
<!--幻灯-->
</
div
>
<
div
class
=
"m m2"
>
<!--求助专区-->
</
div
>
</
div
>
<
div
class
=
"c c2 fl"
>
<
div
class
=
"m m1"
>
<!--热点-->
</
div
>
<
div
class
=
"m m2"
>
<!--公益资讯-->
</
div
>
<
div
class
=
"m m3"
>
<!--公益活动-->
</
div
>
</
div
>
<
div
class
=
"c c3 fr"
>
<
div
class
=
"m m1"
>
<!--最新公告-->
</
div
>
<
div
class
=
"m m2"
>
<!--活动招募-->
</
div
>
</
div
>
</
div
>
<
div
class
=
"r r2 clearfix"
>
<
div
class
=
"c c1 fl"
>
<
div
class
=
"m m1"
>
<!--志愿者风采-->
</
div
>
</
div
>
<
div
class
=
"c c2 fr"
>
<
div
class
=
"m m1"
>
<!--爱心人士-->
</
div
>
</
div
>
</
div
>
<
div
class
=
"r r3 clearfix"
>
<
div
class
=
"c c1 fl"
>
<
div
class
=
"m m1"
>
<!--商报关爱天使-->
</
div
>
</
div
>
<
div
class
=
"c c2 fl"
>
<
div
class
=
"m m1"
>
<!--晚报大爱基金-->
</
div
>
</
div
>
<
div
class
=
"c c3 fr"
>
<
div
class
=
"m m1"
>
<!--爱心团体-->
</
div
>
</
div
>
</
div
>
<
div
class
=
"r r4"
>
<
div
class
=
"m m1"
>
<!--爱心榜-->
</
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"f"
role
=
"contentinfo"
>
<
div
class
=
"w"
>
<
div
class
=
"r r1"
></
div
>
</
div
>
</
div
>
|
4、css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.w{
width
:
950px
;
padding
:
5px
;
margin
:
0
auto
;
background
:
#fff
;
overflow
:
hidden
;}
#b .r{
margin-bottom
:
9px
;}
#b .r
4
{
margin-bottom
:
0
;}
#h .r
2
.c
1
{
width
:
700px
;}
#h .r
2
.c
2
{
width
:
248px
;}
#b .r
1
.c
1
{
width
:
366px
;
margin-right
:
9px
;}
#b .r
1
.c
2
{
width
:
317px
;}
#b .r
1
.c
3
,
#b .r
2
.c
2
,
#b .r
3
.c
3
{
width
:
250px
;}
#b .r
2
.c
1
{
width
:
692px
;}
#b .r
3
.c
1
,
#b .r
3
.c
2
{
width
:
343px
;}
#b .r
3
.c
1
{
margin-right
:
9px
;}
#b .r
1
.m{
margin-bottom
:
8px
;}
#b .r
1
.c
1
.m
2
,
#b .r
1
.c
2
.m
3
,
#b .r
1
.c
3
.m
2
{
margin-bottom
:
0
;}
|
转载:http://www.zhouwenbin.com/%E5%89%8D%E7%AB%AF%E8%A7%84%E8%8C%83%E7%B3%BB%E5%88%974-%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98/