用DIVCSS实现国内经典式三行两列布局Word下载.doc

1、由于中间的sidebar、containe是两列并行的，我们需要设置浮动，让他们各就各位。但我们的整个页面是需要居中于浏览器窗口的。我们只能为他们设置一个容器main，让sidebar、containe在这一容器中浮动。不必考虑居中问题。而main就发挥了居中或设置背景的功能。思路已很清晰，我们开始整理HTML代码：/divmainsidebarcontainefooterheader、main、footer是三个相对独立的层，而sidebar、containe是main层的子层。这里有一点需要说明，我们可以先写siderbar、也可以先写containe，通过浮动的设置，不管哪一个写在代码前

2、部，所得到效果是一致的，我们可以通过让内容在前面的方式对搜索引擎更友好，如下代码：我们开始写CSS，对上面的各元素进行样式表定义：*margin:0;padding:整体布局声明，边距与填充均为零。#headerwidth:776px;height:100px;0auto;background:#06f;对header的定义：宽度为776px；高度为100px；上下边距为零，左右边距为自动，实现了水平居中对齐；背景色为蓝色#06f。#main对main的定义：无背景色等其它设置。#sidebar200px;float:left;#f93;对main的子层sidebar进行定义：宽度为200px

3、；向左浮动；背景色为桔红色#f93。#containe576px;right;#dceafc;对main的子层containe进行定义：宽度为576px（776-200）；向右浮动；背景色为很淡的蓝色#dceafc。#footer60px;#666;对footer的定义：宽度与上面的一样为776px；高度为60px；背景色为深灰色#666。或许你认为我们对布局的CSS定义已经结束了，其实还存在着问题，为了方便预览，我们给sidebar、containe设置一个300px的高度，查看一下效果，如图：在IE中，一切正常，按预定的构思正常显示出来了，但在FF中，footer层消失了。这是因为FF不知

4、道浮动以后发生的事情，不清楚main的高度为几何，因而它跑到上面去了，我们看不到它的存在。我们去除containe的背景色，FF中看到的是如下图的景象：我们应该在sidebar、containe结束的地方清除浮动，让FF知道如何处理footer层，而不是直接放到上面，在视觉上消失。我们在HTML中增加一个新层，位于sidebar、containe结束的地方：clearfloat我们定义clearfloat的样式为：#clearfloatclear:both;1px;overflow:hidden;margin-top:-1px;设置的意义是：是指不允许左右有浮动对象；高度为1px；溢出为隐藏；

5、顶边距为-1px，即这一层实际上是不可见的，仅为清除浮动之用。好了，现在基本上没有问题了，接下来就是在页面中设置菜单、添加内容并进行相应的样式定义。在用DIV+CSS实现三列式布局的时候遇到了困难，向网友求助。这一类上部形象及导航，底部为版权，中间区域分为三列的布局方式越来越广泛的应用。17英寸的显示器已经成为主流，我们以800*600分辨率作为网页的尺寸在某些时候已经不合时宜了，越来越多的客户及我们自身，要求我们制作的时候适应1024*768分辨率。宽度增加了，我们的内容区域划分也产生了一些变化，因而三列式布局的应用也越来越多了。我们今天来说说用DIV+CSS三列式布局的实现方法。首先我们构

6、勒一个草图，理清一下思路。在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：这样的结构与两列式的布局是非常类似的，区别就是多了一列。（好象是废话，别扔臭鸡蛋！）我们将顶部和底部设置为宽度1002px左右，并居中对齐，以适应更大分辨率的需要。（现在1600*1200也算是正常分辨率之一吧）将中部的三列，即左侧，主内容区，右侧。置于一个div容器中，并将此div设置为宽度1002px左右，并居中对齐。再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动，以达到我们想预想的CSS布局效果。看下面的图片：我们根据上面的图片，整理出各个div的id以及他们的关系：顶部：header；中部三列的容器：divall；左侧：sider_a；主内容区：main；右侧：sider_b；底部：他们的嵌套关系如下图：我们整理出HTML代码：headerdivallsider_asider_amainsider_bsider_bfooter。我们进行了一些修饰，填充一些内容。最终效果：查看最终的网页效果