用DIVCSS实现国内经典式三行两列布局.doc
- 文档编号:385664
- 上传时间:2022-10-09
- 格式:DOC
- 页数:14
- 大小:199.50KB
用DIVCSS实现国内经典式三行两列布局.doc
《用DIVCSS实现国内经典式三行两列布局.doc》由会员分享,可在线阅读,更多相关《用DIVCSS实现国内经典式三行两列布局.doc(14页珍藏版)》请在冰豆网上搜索。
用DIV+CSS实现国内经典式三行两列布局
很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。
这样的形式是国内经典式的布局,我们这里不对它的视觉效果作过多的讨论,我们今天说说如何用DIV+CSS实现三行两列的布局。
我们看下面的图片:
这样的结构大家再熟悉不过了,我们该如何用DIV+CSS实现它呢。
我们看下面的分析图片:
它们相对应的关系如下:
ExampleSourceCode[]
顶部:
header
左侧:
sidebar
右侧:
containe
底部:
footer
主要区域:
main
这个main是起什么作用的呢。
由于中间的sidebar、containe是两列并行的,我们需要设置浮动,让他们各就各位。
但我们的整个页面是需要居中于浏览器窗口的。
我们只能为他们设置一个容器main,让sidebar、containe在这一容器中浮动。
不必考虑居中问题。
而main就发挥了居中或设置背景的功能。
思路已很清晰,我们开始整理HTML代码:
ExampleSourceCode[]
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[]
我们开始编写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这两个让我们抓狂的东东中,显示效果是不是一样。
在I
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIVCSS 实现 国内 经典 三行 布局