CSS布局教程:用DIV CSS实现国内经典式三行两列布局_DIV+CSS实例

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!


  我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对它的视觉效果作过多的讨论,我们今天说说如何用DIV CSS实现三行两列的布局。

  我们看下面的图片:


  这样的结构大家再熟悉不过了,我们该如何用DIV CSS实现它呢。我们看下面的分析图片:


  它们相对应的关系如下:

示例代码 [www.mb5u.com]
顶部:header
左侧:sidebar
右侧:containe
底部:footer
主要区域:main

  这个main是起什么作用的呢。由于中间的sidebar、containe是两列并行的,我们需要设置浮动,让他们各就各位。但我们的整个页面是需要居中于浏览器窗口的。我们只能为他们设置一个容器main,让sidebar、containe在这一容器中浮动。不必考虑居中问题。而main就发挥了居中或设置背景的功能。

  思路已很清楚,我们开始整理HTML代码:

示例代码 [www.mb5u.com]
<div id="header"></div>
<div id="main">
<div id="sidebar"></div>
<div id="containe"></div>
</div>
<div id="footer"></div>

  header、main、footer是三个相对独立的层,而sidebar、containe是main层的子层。这里有一点需要说明,我们可以先写siderbar、也可以先写containe,通过浮动的设置,不管哪一个写在代码前部,所得到效果是一致的,我们可以通过让内容在前面的方式对搜索引擎更友好,如下代码:

示例代码 [www.mb5u.com]
<div id="header"></div>
<div id="main">
<div id="containe"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>

  我们开始写CSS,对上面的各元素进行样式表定义:

示例代码 [www.mb5u.com]
* {
margin:0;
padding:0;
}

  整体布局声明,边距与填充均为零。

示例代码 [www.mb5u.com]
#header {
width:776px;
height:100px;
margin:0 auto;
background:#06f;
}

  对header的定义:宽度为776px;高度为100px;上下边距为零,左右边距为自动,实现了水平居中对齐;背景色为蓝色#06f。

示例代码 [www.mb5u.com]
#main {
width:776px;
margin:0 auto;
}

  对main的定义:宽度为776px;上下边距为零,左右边距为自动,实现了水平居中对齐;无背景色等其它设置。

示例代码 [www.mb5u.com]
#main #sidebar {
width:200px;
float:left;
background:#f93;
}

  对main的子层sidebar进行定义:宽度为200px;向左浮动;背景色为桔红色#f93。

示例代码 [www.mb5u.com]
#main #containe {
width:576px;
float:right;
background:#dceafc;
}

  对main的子层containe进行定义:宽度为576px(776-200);向右浮动;背景色为很淡的蓝色#dceafc。

示例代码 [www.mb5u.com]
#footer {
width:776px;
height:60px;
margin:0 auto;
background:#666;
}

  对footer的定义:宽度与上面的一样为776px;高度为60px;上下边距为零,左右边距为自动,实现了水平居中对齐;背景色为深灰色#666。

  或许你认为我们对布局的CSS定义已经结束了,其实还存在着问题,为了方便预览,我们给sidebar、containe设置一个300px的高度,查看一下效果,如图:


  在IE中,一切正常,按预定的构思正常显示出来了,但在FF中,footer层消失了。这是因为FF不知道浮动以后发生的事情,不清楚main的高度为几何,因而它跑到上面去了,我们看不到它的存在。我们去除containe的背景色,FF中看到的是如下图的景象:


  我们应该在sidebar、containe结束的地方清除浮动,让FF知道如何处理footer层,而不是直接放到上面,在视觉上消失。我们在HTML中增加一个新层,位于sidebar、containe结束的地方:

示例代码 [www.mb5u.com]
<div id="header"></div>
<div id="main">
<div id="sidebar"></div>
<div id="containe"></div>
<div id="clearfloat"></div>
</div>
<div id="footer"></div>

  我们定义clearfloat的样式为:

示例代码 [www.mb5u.com]
#clearfloat {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;
}

  设置的意义是:clear:both;是指不答应左右有浮动对象;高度为1px;溢出为隐藏;顶边距为-1px,即这一层实际上是不可见的,仅为清除浮动之用。

  好了,现在基本上没有问题了,接下来就是在页面中设置菜单、添加内容并进行相应的样式定义。关于这些知识我们在以后MB5U.com的文章中再一一向大家介绍。

来源:无忧整理//所属分类:DIV+CSS实例/更新时间:2007-06-04
相关DIV+CSS实例