计算机科学与应用  >> Vol. 10 No. 2 (February 2020)

基于CSS + Div的固定宽度与变宽度网页布局剖析
Analysis of Fixed and Variable Width Web Page Layout Based on CSS + Div

DOI: 10.12677/CSA.2020.102031, PDF, HTML, XML, 下载: 231  浏览: 458 

作者: 高 葵*, 付晓翠, 李蔚妍:山东农业大学信息科学与工程学院,山东 泰安

关键词: CSSDiv固定宽度布局变宽度布局等比例改进浮动法CSS Div Fixed Width Layout Variable Width Layout Equal Ratio Improved Floating Method

摘要: CSS + Div是当前网页设计中实现页面布局的常用技术,可以实现页面代码更少,读取速度更快,更新更容易,页面布局效果更丰富。本文通过举例,给出使用CSS + Div技术,通过Div标签宽度的数值设置,等比例设置,绝对定位法和改进浮动法设置实现固定宽度和变宽度网页布局的使用方法和注意事项,到达掌握的目的。
Abstract: CSS + Div is a commonly used technology to realize page layout in current web page design, which can realize fewer page codes, faster reading speed, easier updating and richer page layout effect. By way of example, this paper gives the use method and precautions of using CSS + Div technology to realize the fixed width and variable width web page layout through the numerical setting of Div label width, equal proportion setting, absolute positioning method and improved floating method setting, so as to achieve the purpose of mastering.

文章引用: 高葵, 付晓翠, 李蔚妍. 基于CSS + Div的固定宽度与变宽度网页布局剖析[J]. 计算机科学与应用, 2020, 10(2): 303-311. https://doi.org/10.12677/CSA.2020.102031

1. 引言

基于CSS + Div的排版是当前网页设计中实现页面布局的常用技术。它使用

2. 使用举例

2.1. 固定宽度布局

一般情况下,此类页面布局的列都有固定的宽度,在这里以经典的三行两列宽度固定布局为例讲解固定分栏布局。

例题1:完成页面,效果如下图1

Figure 1. Web layout 1

图1. 网页布局1

对应的主要代码如下:

固定宽度布局

分析:可以看到这是一个三行两列宽度固定布局。所有div元素宽度固定,页面显示效果固定不变,不会随着浏览器窗口大小变化而变化。

如上例,在浏览器窗口变小的情况下,显示如下图2所示,内容不能完整显示。

Figure 2. Web layout 2

图2. 网页布局2

使用固定宽度布局实现的页面布局,在浏览器窗口大小变化的情况下,不能看到页面的完整结构 [2],而使用变宽度布局方式可以弥补这个缺陷。

2.2. 变宽度布局

变宽度布局,可以使内容的整体宽度随浏览器窗口宽度的变化而同步变化 [3]。宽度变化有两种不同的情况,这里以两列为例。一种情况是两列按照一定比例同时变化的,另一种情况是一列固定,另一列变化宽度。

1) 等比例变宽布局

等比例变宽布局是各个Div区域的宽度会等比例适应浏览器窗口。

例题2:完成页面,效果如下图3图4所示。

图3是大浏览器窗口下显示效果,图4是小浏览器窗口下显示效果。

在例题1的基础上,修改代码如下:

Figure 3. Web layout 3

图3. 网页布局3

Figure 4. Web layout 4

图4. 网页布局4

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

Figure 5. Web layout 5

图5. 网页布局5

Figure 6. Web layout 6

图6. 网页布局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所示。

Figure 7. Web layout 7

图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的宽度,采用数值单位设置可以实现固定宽度布局,采用等比例单位设置,绝对定位法或改进浮动法设置可以实现变宽度布局设置,在实际应用中,根据设计需求,采用不同的布局模式,设计出符合要求的页面布局,进而达到熟练掌握的目的。

参考文献

[1] Freeman, A. HTML5权威指南[M]. 北京: 人民邮电出版社, 2014: 188-195.
[2] 李东博. HTML5 + CSS3从入门到精通[M]. 北京: 清华大学出版社, 2018: 112-115.
[3] 郑阳平. 网页设计与制作实用教程[M]. 北京: 清华大学出版社, 2016: 158-165.
[4] 王海波. 网页设计与制作——基于计算思维[M]. 北京: 机械工业出版社, 2014: 101-105.
[5] 李毅. 网页制作与开发教程[M]. 北京: 人民邮电出版社, 2015: 193-196.
[6] 黑马程序员. 网页设计与制作HTML5 + CSS3 + JavaScript [M]. 北京: 中国铁道出版社, 2019: 182-185.
[7] 张树明. WEB前端设计基础[M]. 北京: 清华大学出版社, 2018: 80-100.
[8] 徐洪峰. HTML + DIV + CSS [M]. 北京: 清华大学出版社, 2017: 292-295.
[9] 常新峰, 王金柱. 网页设计实战[M]. 北京: 清华大学出版社, 2017: 247-255.
[10] 传智播客高教产品研发部. 网站设计基础教程[M]. 北京: 人民邮电出版社, 2016: 180-198.