1. 引言
基于CSS + Div的排版是当前网页设计中实现页面布局的常用技术。它使用
2. 使用举例
2.1. 固定宽度布局
一般情况下,此类页面布局的列都有固定的宽度,在这里以经典的三行两列宽度固定布局为例讲解固定分栏布局。
例题1:完成页面,效果如下图1。
对应的主要代码如下:
固定宽度布局分析:可以看到这是一个三行两列宽度固定布局。所有div元素宽度固定,页面显示效果固定不变,不会随着浏览器窗口大小变化而变化。
如上例,在浏览器窗口变小的情况下,显示如下图2所示,内容不能完整显示。
使用固定宽度布局实现的页面布局,在浏览器窗口大小变化的情况下,不能看到页面的完整结构 [2],而使用变宽度布局方式可以弥补这个缺陷。
2.2. 变宽度布局
变宽度布局,可以使内容的整体宽度随浏览器窗口宽度的变化而同步变化 [3]。宽度变化有两种不同的情况,这里以两列为例。一种情况是两列按照一定比例同时变化的,另一种情况是一列固定,另一列变化宽度。
1) 等比例变宽布局
等比例变宽布局是各个Div区域的宽度会等比例适应浏览器窗口。
例题2:完成页面,效果如下图3,图4所示。
图3是大浏览器窗口下显示效果,图4是小浏览器窗口下显示效果。
在例题1的基础上,修改代码如下:
#container {
width: 80%;/*删除固定宽度,改为比例宽度*/
margin:0 auto;
}
#header {
……/*与前面相同*/
}
#mainbox {
float: left;
width: 66.9%;/*删除固定宽度,改为比例宽度*/
background-color: #0FF;
}
#sidebox {
float: right;
width: 33%;/*删除固定宽度,改为比例宽度*/
background-color: #FF0;
}
#footer {
…… /*与前面相同*/
}
……/*其余部分与上一例题相同*/
分析:在这个页面中,以比例宽度代替固定宽度,实现页面随浏览器窗口大小等比例变化。网页内容的宽度为浏览器窗口宽度的80%,页面中左侧和右侧的宽度保持在2:1的比例,可以看到无论浏览器窗口如何变化,它们都会等比例变化 [4],如上图3是大浏览器窗口下显示效果,上图4是小浏览器窗口下显示效果。
2) 单列变宽布局
单列变宽布局是指单列宽度变化,而其他列保持不变,可以使用绝对定位法和改进浮动法实现 [5]。
例题3:使用绝对定位法完成单列变宽布局页面 [6],结果如下图5,图6所示。
在上例的基础上,修改代码如下:
#container {
width: 80%;/*设置总宽度80%,这样总宽度会随浏览器窗口变化*/
margin:0 auto;
position:relative;/*设置为相对定位属性,使它成为其里面列的定位基准*/
}
#mainbox { /*删除宽度设置*/
float: left;
background-color: #0FF;
margin-right:300px; /*设置右外边距,使它不会与sidebox列重叠*/
}
#sidebox {
position:absolute;/*设置为绝对定位属性*/
top:30px; /*设置其紧贴container的上部*/
right:0; /*设置其紧贴container的右侧*/
width:300px; /*设置宽度为固定值*/
background-color: #FF0;
}
分析:在这个页面中,实现了右侧列单列宽度固定,而左侧列变化宽度的布局样式。可以看到上图5是大浏览器窗口下显示效果,上图6是小浏览器窗口下显示效果,右侧列宽度不变,左侧列随浏览器窗口大小而变化。
这种方式有种缺陷,当固定宽度列的高度大于活动列的高度时,会使固定宽度列与页脚部分重叠 [7]。如下图7所示。
解决方法是设置变宽度列的高度是最高的,就不会出现重叠现象。如上例题,将mainboxde的高度属性设置的足够大,就不会出现内容重叠了。效果如下图8所示。
以上页面的功能也可以使用改进浮动法实现,核心问题是实现变宽度列mainbox的宽度等于“100%-固定宽度列sidebox宽度”。
例题4:使用改进浮动法完成单列变宽布局页面 [8],效果如图5,图6所示。
主要代码如下:
分析:通过在可变宽度列mainbox的外面又套了一层Div,即conternwrap标签,设置宽度为100%,设置margin-right的值为负的固定宽度列sidebox宽度数值,同时再将变宽度列mainbox的margin-right的值的设置为正的固定宽度列sidebox宽度数值,实现了mainbox列的“100%-固定宽度列sidebox宽度数值”的宽度。最大好处是可以不用考虑各列的高度,通过footer的clear属性设置,保证了不会发生重叠现象 [9]。
3. 总结
通过以上的例题和分析可以得出如下结论:固定宽度页面布局需要指定列的宽度,变宽度页面布局可以根据需要设置列的宽度比例,采用绝对定位法或改进浮动法来实现 [10]。
4. 结束语
本文对固定宽度页面布局和变宽度页面布局进行了举例和分析,深入剖析了使用CSS + Div如何固定宽度和变宽度,通过设置Div的宽度,采用数值单位设置可以实现固定宽度布局,采用等比例单位设置,绝对定位法或改进浮动法设置可以实现变宽度布局设置,在实际应用中,根据设计需求,采用不同的布局模式,设计出符合要求的页面布局,进而达到熟练掌握的目的。