[转]如何用div+css布局页面

如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大 知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合web2.0标准",以便让别人觉得他们的网站用的是最先进的技 术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么?
     实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:

     1.这里的div并不是我们所说的层,虽然他们的标签都是<div>,在这里你可以把div理
解成一个容器,它可以放文字,图片,表格等等.

     2.用div布局必须对页面的结构进行准确的分析,当然用table也要分析页面结构.用div要分清上下,左右,实际上div布局也只有上下,左右.分 析结构要先整体再部分,先分析整体的页面布局,例如我们一般的页面是上(banner和导航),中(页面主体内容,新闻等等),下(版权信息块)结构.

 于是我们可以把整个页面放在一个大div内,于是我们可以这样来写<div>结构:

<div   id="container">/*大容器放全部内容*/     <div id="header">/*上*/     </div>     <div id="midbody">/*中*/     </div>     <div id="foot">/*下*/     </div></div>

  解释下上面的id是什么东西,id后面的内容是当前div以及div内部的东西用的css,这个css可
以规定div的宽度,大小,位置以及内部文字的大小、样式、颜色等等。
下面看下这几个css的代码 ：

#container{     width:90%;/*宽度*/     margin: 0 auto;/*边界auto为自动，这里用到了缩写形式意思为上下为0，                           左右自动*/     }/*页面头*/#header{width:780px;height: 130px;margin: 0 auto;overflow:hidden;/*防止div被撑开，超过div大小就隐藏*/background:#999999;/*背景色*/}/*页面中间*/#midbody{width:780px;height: auto;height:auto;margin:0 auto;overflow:hidden;background: #990000;}/*页面底部*/#foot{width:780px;height:100px;margin:0 auto;background: #99FFCC;}

  看完整体就要研究部分了，对于部分来说无非就是上下或左右结构了，例如下面的中间又分为左右。

<div   id="container">    <div id="header">    </div>    <div id="midbody">       <div id="leftside">       </div>       <div id="rightside">       </div>    </div>    <div id="foot">    </div></div>

 Left / Right :

#leftside{width:220px;float:left;/*该层位于外层的左边*/height:500px;background:#167692;}#rightside{width:558px;height:500px;float:right;/*该层位于外层的右边*/background: #CCCC00;}

 如果是这样的结构：

 div结构为：

<div   id="container">    <div id="header">    </div>    <div id="midbody">       <div id="leftside">       </div>       <div id="rightside">          <div id="rtop">          </div>          <div id="rbottom">              <div id="left">              </div>              <div id="right">              </div>          </div>       </div>    </div>    <div id="foot">    </div></div>

 CSS：

#rtop{width:558px;height:200pxmargin:0 auto;background: #CCCC00;}#rbottom{width:558px;height:300px;margin:0 auto;background: #CCee00;}#left{width:258px;float:left;height:300px;background: #CCCCed;}#rightside{width:300px;height:300px;float:right;background: #Cdfd00;}

 只要看懂了最外层的到里面都是一样的道理。

来源：http://blog.csdn.net/brucelee0224/article/details/3009741