如何用div+css布局页面-转_html/css_WEB-ITnose

/*页面主容器样式*/
#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结构可写成：

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结构为：

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