如何用div+css布局页面-转

terryfeng

如今web2.0炒的很厉害,先不去管它web2.0究竟是什么东西,反正div+css好像是火的不行了.各大知名站点都赶时髦似的把原来的表格布局翻新成了div+css,并美其名曰"本站符合w3c标准",以便让别人觉得他们的网站用的是最先进的技术.div布局真有那么先进么?这个问题仍在争论之中.在这里咱们不参与这种无聊的争论,学会它自己感觉一下不就清楚了么?   
    实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:
      1.这里的div并不是我们所说的层,虽然他们的标签都是<div>,在这里你可以把div理   
解成一个容器,它可以放文字,图片,表格等等.
      2.用div布局必须对页面的结构进行准确的分析,当然用table也要分析页面结构.用div要分清上下,左右,实际上div布局也只有上下,左右.分析结构要先整体再部分,先分析整体的页面布局,例如我们一般的页面是上(banner和导航),中(页面主体内容,新闻等等),下(版权信息块)结构.
  +------------------------------------+   
|                                    |     
|             header                 |     
|                                    |     
|------------------------------------|     
|                                    |     
|                                    |     
|              midbody               |     
|                                    |     
|                                    |     
|                                    |     
|                                    |     
|                                    |     
|------------------------------------|     
|                                    |     
|             foot                   |     
|                                    |     
+------------------------------------+
  于是我们可以把整个页面放在一个大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;     
}
  看完整体就要研究部分了，对于部分来说无非就是上下或左右结构了，例如下面的中间又分   
为左右。
  +------------------------------------+   
|                                    |     
|             header                 |     
|                                    |     
|------------------------------------|     
|        |                           |     
|        |       midbody             |     
|        |                           |     
|leftside|      rightside            |     
|        |                           |     
|        |                           |     
|        |                           |     
|        |                           |     
|------------------------------------|     
|                                    |     
|             foot                   |     
|                                    |     
+------------------------------------+
  于是div结构可写成：   
<div  id="container">     
   <div id="header">     
   </div>     
   <div id="midbody">     
      <div id="leftside">     
      </div>     
      <div id="rightside">     
      </div>     
   </div>     
   <div id="foot">     
   </div>     
</div>
  midbody中的leftside和rightside的css为：
  #leftside{   
width:220px;     
float:left;/*该层位于外层的左边*/     
height:500px;     
background:#167692;     
}     
#rightside{     
width:558px;     
height:500px;     
float:right;/*该层位于外层的右边*/     
background: #CCCC00;     
}     
如果是这样的结构：
  +------------------------------------+   
|                                    |     
|             header                 |     
|                                    |     
|------------------------------------|     
|        | rightside                 |     
|        |            rtop           |     
|        |                           |     
|leftside|---------------------------|     
|        |            |rbottom       |     
|        |    left    |    right     |     
|        |            |              |     
|        |            |              |     
|------------------------------------|     
|                                    |     
|             foot                   |     
|                                    |     
+------------------------------------+
  则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:200px     
margin: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;     
}     
应该很清楚了吧？只要看懂了最外层的到里面都是一样的道理。     
源文件在附件里(index1.html为以上上所说样式,index.html为用div画边框线的样式)     
下载附件：div.rar