论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

CSS布局教程:DIV CSS三列式布局的实现方法

文章类别:div+css布局 | 发表日期:2008-10-5 15:33:00

  版权声明:21shipin.com原创,未经本站同意,严禁转载!

  今天在群里,有一位网友在用DIV CSS实现三列式布局的时候碰到了困难,向网友求助。这一类上部形象及导航,底部为版权,中间区域分为三列的布局方式越来越广泛的应用。17英寸的显示器已经成为主流,我们以800*600分辨率作为网页的尺寸在某些时候已经不合时宜了,越来越多的客户及我们自身,要求我们制作的时候适应1024*768分辨率。宽度增加了,我们的内容区域划分也产生了一些变化,因而三列式布局的应用也越来越多了。我们今天来说说用DIV CSS三列式布局的实现方法。

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


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


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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
  顶部:header;
  中部三列的容器:divall;
  左侧:sider_a;
  主内容区:main;
  右侧:sider_b;
  底部:footer

他们的嵌套关系如下图:


  我们整理出HTML代码:

div css xhtml xml Example Source Code 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进行布局:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
* {
margin:0;
padding:0;
font-size:1em;
}

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

div css xhtml xml Example Source Code 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。

div css xhtml xml Example Source Code 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;\" />。

  我们进行了一些修饰,填充一些内容。最终效果:>>>查看最终的网页效果<<<


版权声明:21shipin.com原创,未经本站同意,严禁转载!
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058