首先我们大致的花了一个草图，理清一下思路。在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：

图片文字说明：

我们将顶部和底部设置为宽度960px左右，并居中对齐，以适应更大分辨率的需要。将中部的三列，即左侧，主内容区，右侧。置于一个div容器中，并将此div设置为宽度960px左右，并居中对齐。再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动标签，以达到我们想预想的CSS布局效果。

根据上面的图片示意，我们整理出各个div的id以及他们的关系：顶部：header_common；

中部三列的容器：divall；

左侧：sider_a；

主内容区：main；

右侧：sider_b；

底部：footer_common

HTML代码:

CSS布局样式：* {                          //页面全局声明：消除边距，设置文字大小。

margin:0;

padding:0;

font-size:1em;

}

#header_common {           //顶部：宽度高度设置，水平居中对齐，背景色为#3399FF

width:960px;

height:90px;

margin:0 auto;

background:#3399FF;

}

#divall {                           //中部三列的容器：宽度设置，水平居中对齐，背景色为白色

width:960px;

margin:0 auto;

background:#fff;

}

#footer_common {             //底部：宽度高度设置，水平居中对齐，背景色为#003300

width:960px;

height:60px;

margin:0 auto;

background:#003300;

}

#sider_a {                        //左侧(sider_a)：宽度设置，向左浮动，背景色为#FFCC99

width:235px;

float:left;

background:#FFCC99;

}

#main {                             //主内容区(main)：宽度设置，向左浮动，左边距为10px，背景色为#C4C4FF

width:435px;

float:left;

margin-left:10px;

background:#C4C4FF;

}

#sider_b {                          //右侧(sider_b)：宽度设置，向右浮动，背景色为#999

width:280px;

float:right;

background:#999;

}

写到这里，我们布局应该算是完成了。

但是由于我们没有消除下边距的原因，暂时你如果在MSIE和FireFox这两个浏览器中，会看到显示效果大不相同。在MSIE中，一切正常，没有任何问题了。但在Firefox中footer却隐藏到上面的层后面去了。

我们需要在浮动的层下面加上消除下边距的参数：

添加后。测试显示正常。

如果你的页面中div不能水平居中，请参照这篇文章：

最后更新于 2011-11-15 12:10:26 并被添加「css div div+css」标签，已有 10687 位童鞋阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

相关文章