版权声明:MB5U.com原创,未经本站同意,严禁转载! 今天在群里,有一位网友在用DIV CSS实现三列式布局的时候碰到了困难,向网友求助。这一类上部形象及导航,底部为版权,中间区域分为三列的布局方式越来越广泛的应用。17英寸的显示器已经成为主流,我们以800*600分辨率作为网页的尺寸在某些时候已经不合时宜了,越来越多的客户及我们自身,要求我们制作的时候适应1024*768分辨率。宽度增加了,我们的内容区域划分也产生了一些变化,因而三列式布局的应用也越来越多了。我们今天来说说用DIV CSS三列式布局的实现方法。
首先我们构勒一个草图,理清一下思路。在实际操作中,你面对的可能不是草图,而是美工设计人员所设计的网站效果图,但大体上的结构是相当的,我们看下面的图片:
这样的结构与两列式的布局是非常类似的,区别就是多了一列。(好象是废话,别扔臭鸡蛋!)我们将顶部和底部设置为宽度1002px左右,并居中对齐,以适应更大分辨率的需要。(现在1600*1200也算是正常分辨率之一吧)将中部的三列,即左侧,主内容区,右侧。置于一个div容器中,并将此div设置为宽度1002px左右,并居中对齐。再将此容器内的左侧,主内容区,右侧分别设置宽度、应用浮动,以达到我们想预想的CSS布局效果。看下面的图片:
我们根据上面的图片,整理出各个div的id以及他们的关系:
Example Source Code
[www.21shipin.com] 顶部:header;
中部三列的容器:divall;
左侧:sider_a;
主内容区:main;
右侧:sider_b;
底部:footer
他们的嵌套关系如下图:
我们整理出HTML代码:
Example Source Code
[www.21shipin.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进行布局:
Example Source Code
[www.21shipin.com]* {
margin:0;
padding:0;
font-size:1em;
}
整体局布声明:消除边距,设置文字大小。
假如不消除body的边距,在IE等浏览器中,内容不是从左上端的0 0开始的。
Example Source Code
[www.21shipin.com]#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。
Example Source Code
[www.21shipin.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这两个让我们抓狂的东东中,显示效果是不是一样。
在IE环境中,一切正常,没有任何问题了。但在FF中footer和我们玩起了捉迷藏,跑到上面去了。我们在前面的文章《CSS布局教程:用DIV CSS实现国内经典式三行两列布局》http://www.21shipin.com/article.asp?id=518 曾经出现过样的现象,是由于未清除浮动而引发的后果,关于清除浮动的知识,可以参考这里:http://www.21shipin.com/css/c_clear.html 我们在divall容器的最下面清除一下浮动就可以了。如代码:<br style=\"clear:both;\" />。
我们进行了一些修饰,填充一些内容。最终效果:>>>查看最终的网页效果<<<
版权声明:MB5U.com原创,未经本站同意,严禁转载!