用DIVCSS实现国内经典式三行两列布局Word下载.doc
《用DIVCSS实现国内经典式三行两列布局Word下载.doc》由会员分享，可在线阅读，更多相关《用DIVCSS实现国内经典式三行两列布局Word下载.doc（14页珍藏版）》请在冰点文库上搜索。
由于中间的sidebar、containe是两列并行的，我们需要设置浮动，让他们各就各位。
但我们的整个页面是需要居中于浏览器窗口的。
我们只能为他们设置一个容器main，让sidebar、containe在这一容器中浮动。
不必考虑居中问题。
而main就发挥了居中或设置背景的功能。
思路已很清晰，我们开始整理HTML代码：
<
div
id="
header"
>
/div>
main"
sidebar"
containe"
footer"
header、main、footer是三个相对独立的层，而sidebar、containe是main层的子层。
这里有一点需要说明，我们可以先写siderbar、也可以先写containe，通过浮动的设置，不管哪一个写在代码前部，所得到效果是一致的，我们可以通过让内容在前面的方式对搜索引擎更友好，如下代码：
我们开始写CSS，对上面的各元素进行样式表定义：
*
{
margin:
0;
padding:
}
整体布局声明，边距与填充均为零。
#header
width:
776px;
height:
100px;
0
auto;
background:
#06f;
对header的定义：
宽度为776px；
高度为100px；
上下边距为零，左右边距为自动，实现了水平居中对齐；
背景色为蓝色#06f。
#main
对main的定义：
无背景色等其它设置。
#sidebar
200px;
float:
left;
#f93;
对main的子层sidebar进行定义：
宽度为200px；
向左浮动；
背景色为桔红色#f93。
#containe
576px;
right;
#dceafc;
对main的子层containe进行定义：
宽度为576px（776-200）；
向右浮动；
背景色为很淡的蓝色#dceafc。
#footer
60px;
#666;
对footer的定义：
宽度与上面的一样为776px；
高度为60px；
背景色为深灰色#666。
或许你认为我们对布局的CSS定义已经结束了，其实还存在着问题，为了方便预览，我们给sidebar、containe设置一个300px的高度，查看一下效果，如图：
在IE中，一切正常，按预定的构思正常显示出来了，但在FF中，footer层消失了。
这是因为FF不知道浮动以后发生的事情，不清楚main的高度为几何，因而它跑到上面去了，我们看不到它的存在。
我们去除containe的背景色，FF中看到的是如下图的景象：
我们应该在sidebar、containe结束的地方清除浮动，让FF知道如何处理footer层，而不是直接放到上面，在视觉上消失。
我们在HTML中增加一个新层，位于sidebar、containe结束的地方：
clearfloat"
我们定义clearfloat的样式为：
#clearfloat
clear:
both;
1px;
overflow:
hidden;
margin-top:
-1px;
设置的意义是：
是指不允许左右有浮动对象；
高度为1px；
溢出为隐藏；
顶边距为-1px，即这一层实际上是不可见的，仅为清除浮动之用。
好了，现在基本上没有问题了，接下来就是在页面中设置菜单、添加内容并进行相应的样式定义。
在用DIV+CSS实现三列式布局的时候遇到了困难，向网友求助。
这一类上部形象及导航，底部为版权，中间区域分为三列的布局方式越来越广泛的应用。
17英寸的显示器已经成为主流，我们以800*600分辨率作为网页的尺寸在某些时候已经不合时宜了，越来越多的客户及我们自身，要求我们制作的时候适应1024*768分辨率。
宽度增加了，我们的内容区域划分也产生了一些变化，因而三列式布局的应用也越来越多了。
我们今天来说说用DIV+CSS三列式布局的实现方法。
首先我们构勒一个草图，理清一下思路。
在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：
这样的结构与两列式的布局是非常类似的，区别就是多了一列。
（好象是废话，别扔臭鸡蛋！
）我们将顶部和底部设置为宽度1002px左右，并居中对齐，以适应更大分辨率的需要。
（现在1600*1200也算是正常分辨率之一吧）将中部的三列，即左侧，主内容区，右侧。
置于一个div容器中，并将此div设置为宽度1002px左右，并居中对齐。
再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动，以达到我们想预想的CSS布局效果。
看下面的图片：
我们根据上面的图片，整理出各个div的id以及他们的关系：
顶部：
header；
中部三列的容器：
divall；
左侧：
sider_a；
主内容区：
main；
右侧：
sider_b；
底部：
他们的嵌套关系如下图：
我们整理出HTML代码：
header<
divall"
sider_a"
sider_a<
main<
sider_b"
sider_b<
footer<
我们开始编写CSS进行布局：
font-size:
1em;
整体局布声明：
消除边距，设置文字大小。
如果不消除body的边距，在IE等浏览器中，内容不是从左上端的0
0开始的。
1002px;
#divall
#fff;
#999;
宽度高度设置，水平居中对齐，背景色为#06f；
宽度设置，水平居中对齐，背景色为白色；
宽度高度设置，水平居中对齐，背景色为#999。
#sider_a
220px;
580px;
margin-left:
6px;
}
#sider_b
190px;
#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实现国内经典式三行两列布局》
曾经出现过样的现象，是由于未清除浮动而引发的后果，关于清除浮动的知识，可以参考这里：
我们在divall容器的最下面清除一下浮动就可以了。
如代码：
br
style="
"
/>
。
我们进行了一些修饰，填充一些内容。
最终效果：
查看最终的网页效果<
升级会员 