布局实战（表格模拟）

来源：互联网发布：通达信淘宝指标编辑：程序博客网时间：2024/05/20 09:46

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、块

m用来添加统一的上下间距，m1-m3用来做细节控制。

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
<divid="h">
    <divclass="r r1">
        <divclass="w clearfix">
            <divclass="c cl fl">
            <!--logo-->
            </div>
            <divclass="c c2 fr">
            <!--广告-->
            </div>
        </div>
    </div>
    <divclass="r r2">
        <divclass="w clearfix">
            <divclass="c c1 fl">
            <!--导航-->          
            </div>
            <divclass="c c2 fr">
            <!--搜索-->
            </div>
        </div>
    </div>
</div>
<divid="b"role="main">
    <divclass="w">
        <h1class="visually-hidden">爱心网</h1>
        <divclass="r r1 clearfix">
            <divclass="c c1 fl">
                <divclass="m m1">
                    <!--幻灯-->
                </div>
                <divclass="m m2">
                    <!--求助专区-->
                </div>
            </div>
            <divclass="c c2 fl">
                <divclass="m m1">
                    <!--热点-->
                </div>
                <divclass="m m2">
                    <!--公益资讯-->
                </div>
                <divclass="m m3">
                    <!--公益活动-->
                </div>
            </div>
            <divclass="c c3 fr">
                <divclass="m m1">
                    <!--最新公告-->
                </div>
                <divclass="m m2">
                    <!--活动招募-->
                </div>
            </div>
        </div>
        <divclass="r r2 clearfix">
            <divclass="c c1 fl">
                <divclass="m m1">
                    <!--志愿者风采-->
                </div>
            </div>
            <divclass="c c2 fr">
                <divclass="m m1">
                    <!--爱心人士-->
                </div>
            </div>
        </div>
        <divclass="r r3 clearfix">
            <divclass="c c1 fl">
                <divclass="m m1">
                    <!--商报关爱天使-->
                </div>
            </div>
            <divclass="c c2 fl">
                <divclass="m m1">
                    <!--晚报大爱基金-->
                </div>
            </div>
            <divclass="c c3 fr">
                <divclass="m m1">
                    <!--爱心团体-->
                </div>
            </div>
        </div>
        <divclass="r r4">
            <divclass="m m1">
                <!--爱心榜-->
            </div>
        </div>
    </div>
</div>
<divid="f"role="contentinfo">
    <divclass="w">
        <divclass="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:0auto;background:#fff;overflow:hidden;}
#b .r{margin-bottom:9px;}
#b .r4{margin-bottom:0;}
#h .r2.c1{width:700px;}
#h .r2.c2{width:248px;}
#b .r1.c1{width:366px;margin-right:9px;}
#b .r1.c2{width:317px;}
#b .r1.c3,
#b .r2.c2,
#b .r3.c3{width:250px;}
#b .r2.c1{width:692px;}
#b .r3.c1,
#b .r3.c2{width:343px;}
#b .r3.c1{margin-right:9px;}
#b .r1.m{margin-bottom:8px;}
#b .r1.c1.m2,
#b .r1.c2.m3,
#b .r1.c3.m2{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/