收藏

下载资源 加入VIP,免费下载

第1页 / 共14页

第2页 / 共14页

第3页 / 共14页

第4页 / 共14页

第5页 / 共14页

第6页 / 共14页

第7页 / 共14页

第8页 / 共14页

第9页 / 共14页

第10页 / 共14页

第11页 / 共14页

第12页 / 共14页

第13页 / 共14页

第14页 / 共14页

　　header、main、footer是三个相对独立的层，而sidebar、containe是main层的子层。

这里有一点需要说明，我们可以先写siderbar、也可以先写containe，通过浮动的设置，不管哪一个写在代码前部，所得到效果是一致的，我们可以通过让内容在前面的方式对搜索引擎更友好，如下代码：

ExampleSourceCode[]

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

ExampleSourceCode[]

* {

    margin:

0;

    padding:

0;

}

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

ExampleSourceCode[]

#header {

    width:

776px;

    height:

100px;

    margin:

0 auto;

    background:

#06f;

}

　　对header的定义：

宽度为776px；高度为100px；上下边距为零，左右边距为自动，实现了水平居中对齐；背景色为蓝色#06f。

ExampleSourceCode[]

#main {

    width:

776px;

    margin:

0 auto;

}

　　对main的定义：

宽度为776px；上下边距为零，左右边距为自动，实现了水平居中对齐；无背景色等其它设置。

ExampleSourceCode[]

#main #sidebar {

    width:

200px;

    float:

left;

    background:

#f93;

}

　　对main的子层sidebar进行定义：

宽度为200px；向左浮动；背景色为桔红色#f93。

ExampleSourceCode[]

#main #containe {

    width:

576px;

    float:

right;

    background:

#dceafc;

}

　　对main的子层containe进行定义：

宽度为576px（776-200）；向右浮动；背景色为很淡的蓝色#dceafc。

ExampleSourceCode[]

#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结束的地方：

ExampleSourceCode[]

　　我们定义clearfloat的样式为：

ExampleSourceCode[]

#clearfloat {

    clear:

both;

    height:

1px;

    overflow:

hidden;

    margin-top:

-1px;

}

　　设置的意义是：

clear:

both;是指不允许左右有浮动对象；高度为1px；溢出为隐藏；顶边距为-1px，即这一层实际上是不可见的，仅为清除浮动之用。

　　好了，现在基本上没有问题了，接下来就是在页面中设置菜单、添加内容并进行相应的样式定义。

在用DIV+CSS实现三列式布局的时候遇到了困难，向网友求助。

这一类上部形象及导航，底部为版权，中间区域分为三列的布局方式越来越广泛的应用。

17英寸的显示器已经成为主流，我们以800*600分辨率作为网页的尺寸在某些时候已经不合时宜了，越来越多的客户及我们自身，要求我们制作的时候适应1024*768分辨率。

宽度增加了，我们的内容区域划分也产生了一些变化，因而三列式布局的应用也越来越多了。

我们今天来说说用DIV+CSS三列式布局的实现方法。

　　首先我们构勒一个草图，理清一下思路。

在实际操作中，你面对的可能不是草图，而是美工设计人员所设计的网站效果图，但大体上的结构是相当的，我们看下面的图片：

　　这样的结构与两列式的布局是非常类似的，区别就是多了一列。

（好象是废话，别扔臭鸡蛋！

）我们将顶部和底部设置为宽度1002px左右，并居中对齐，以适应更大分辨率的需要。

（现在1600*1200也算是正常分辨率之一吧）将中部的三列，即左侧，主内容区，右侧。

置于一个div容器中，并将此div设置为宽度1002px左右，并居中对齐。

再将此容器内的左侧，主内容区，右侧分别设置宽度、应用浮动，以达到我们想预想的CSS布局效果。

看下面的图片：

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

ExampleSourceCode[]

　　顶部：

header；

　　中部三列的容器：

divall；

　　左侧：

sider_a；

　　主内容区：

main；

　　右侧：

sider_b；

　　底部：

footer

他们的嵌套关系如下图：

　　我们整理出HTML代码：

ExampleSourceCode[]

header

    sider_a

    main

    sider_b

footer

　　我们开始编写CSS进行布局：

ExampleSourceCode[]

* {

    margin:

0; 

    padding:

0; 

    font-size:

1em;

}

　　整体局布声明：

消除边距，设置文字大小。

　　如果不消除body的边距，在IE等浏览器中，内容不是从左上端的0 0开始的。

ExampleSourceCode[]

#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。

ExampleSourceCode[]

#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实现国内经典式三行两列布局》 曾经出现过样的现象，是由于未清除浮动而引发的后果，关于清除浮动的知识，可以参考这里：

 我们在divall容器的最下面清除一下浮动就可以了。

如代码：

both;" />。

　　我们进行了一些修饰，填充一些内容。

最终效果：

>>>查看最终的网页效果<<<