布局实战（表格模拟）

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

< 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/