如何用div+css布局页面



divcssheaderwebtable

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

     实际上div布局并不是什么高深的东西,如果你知道一点css就变得更简单了.首先我要说明几点:

     1.这里的div并不是我们所说的层,虽然他们的标签都是<div>,在这里你可以把div理

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

+------------------------------------+

|                                     |

|              header                  |

|                                     |

|------------------------------------|

|                                     |

|                                     |

|               midbody                |

|                                     |

|                                     |

|                                     |

|                                     |

|                                     |

|------------------------------------|

|                                     |

|              foot                    |

|                                     |

+------------------------------------+
[align=center][/align]
于是我们可以把整个页面放在一个大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;
}