用DIVCSS实现国内经典式三行两列布局Word格式.doc
《用DIVCSS实现国内经典式三行两列布局Word格式.doc》由会员分享,可在线阅读,更多相关《用DIVCSS实现国内经典式三行两列布局Word格式.doc(14页珍藏版)》请在冰豆网上搜索。
这个main是起什么作用的呢。
由于中间的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这两个让我们抓狂的东东中,显示效果是不是一样。
在I