DIV+CSS页面布局：三列式

[ 来源:http://www.it55.com | 作者:52CSS.com | 时间:2007-09-10 | 收藏 | 推荐 ] 【大中小】

随着计算机的升级几互联网的发展，我们早期800*600分辨率的网页尺寸已经不合时宜了，1024*768分辨率的页面布局已经成为主流。宽度增加了，我们的内容区域划分也产生了一些变化，因而三列式布局的应用也越来越多了。我们用DIV+CSS制作一个三列式布局的页面。

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

　　这样的结构与两列式的布局是非常类似的，区别就是多了一列。（好象是废话，别扔臭鸡蛋！）我们将顶部和底部设置为宽度1002px左右，并居中对齐，以适应更大分辨率的需要。（现在1600*1200也算是正常分辨率之一吧）将中部的三列，即左侧，主内容区，右侧。置于一个div容器中，并将此div设置为宽度1002px左右，并居中对齐。再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动，以达到我们想预想的CSS布局效果。看下面的图片：

45398 http://www.it55.com it55学习IT知识，享受IT生活 4dfkjn
　　我们根据上面的图片，整理出各个div的id以及他们的关系：

免费资源http://www.it55.com

　　顶部：header；
　　中部三列的容器：divall；
　　左侧：sider_a；
　　主内容区：main；
　　右侧：sider_b；
　　底部：footer

他们的嵌套关系如下图：

精美商业网页模版下载http://www.it55.com

　　我们整理出HTML代码：免费网页模版下载http://www.it55.com

<div id="header">header</div>
<div id="divall">
    <div id="sider_a">sider_a</div>
    <div id="main">main</div>
    <div id="sider_b">sider_b</div>
</div>
<div id="footer">footer</div>

我们开始编写CSS进行布局： sflj http://www.it55.com kg^&fgd

* {
    margin:0;
    padding:0;
    font-size:1em;
}

　　整体局布声明：消除边距，设置文字大小。
　　如果不消除body的边距，在IE等浏览器中，内容不是从左上端的0 0开始的。

vd;k;l http://www.it55.com rdfg

#header {
    width:1002px;
    height:100px;
    margin:0 auto;
    background:#06f;
}
#divall {
    width:1002px;
    margin:0 auto;
    background:#fff;
}
#footer {
    width:1002px;
    height:60px;
    margin:0 auto;
    background:#999;
}

　　顶部：宽度高度设置，水平居中对齐，背景色为#06f；
　　中部三列的容器：宽度设置，水平居中对齐，背景色为白色；
　　底部：宽度高度设置，水平居中对齐，背景色为#999。

http://www.it55.com/

#sider_a {
    width:220px;
    float:left;
    background:#f93;
}
#main {
    width:580px;
    float:left;
    margin-left:6px;
    background:#dceafc;
}
#sider_b {
    width:190px;
    float:right;
    background:#ccc;
}

　　左侧（sider_a）：宽度设置，向左浮动，背景色为#f93；
　　主内容区（main）：宽度设置，向左浮动，左边距为6px，背景色为#dceafc；
　　右侧（sider_b）：宽度设置，向右浮动，背景色为#ccc；
　　为什么主内容区左边距为6px呢？我们是这样计算的：
　　　　1002-220-580-190=12px
　　　　12/2=6px; 实现中间两条空白分割线相等，均为6px。

　　写到这里，我们布局应该算是完成了，且慢，让我们看看IE与FF这两个让我们抓狂的东东中，显示效果是不是一样。 IT资讯之家 http://www.it55.com

it55.com