CSS布局实例教程:DIV+CSS三列式页面布局的实现方法 详解

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

点击在新窗口中浏览此图片



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

根据上面的图片示意,我们整理出各个div的id以及他们的关系:

  顶部:header_common;

  中部三列的容器:divall;

  左侧:sider_a;

  主内容区:main;

  右侧:sider_b;

  底部:footer_common



HTML代码:

<div id="header_common">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_common">footer</div>



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 style="clear:both"></div>



添加后。测试显示正常。


如果你的页面中div不能水平居中,请参照这篇文章:
https://www.fity.cn/post/166/

相关文章

此处评论已关闭