Computer Science and Application
Vol.
09
No.
03
(
2019
), Article ID:
29187
,
8
pages
10.12677/CSA.2019.93061
Research on Web Page Layout Method Based on CSS + Div
Kui Gao, Weiyan Li, Xiaocui Fu
School of Information Science and Engineering, Shandong Agricultural University, Taian Shandong
Received: Feb. 16th, 2019; accepted: Mar. 4th, 2019; published: Mar. 11th, 2019
ABSTRACT
The CSS + Div layout method has gained more and more applications in the actual website design and production, and can be used through
Keywords:CSS + Div, Margin, Padding, Border, Position, Float, Clear
基于CSS + Div的网页布局方法研究
高葵,李蔚妍,付晓翠
山东农业大学,信息科学与工程学院,山东 泰安
收稿日期:2019年2月16日;录用日期:2019年3月4日;发布日期:2019年3月11日
摘 要
CSS + Div布局方法在实际网站设计制作中得到了越来越多的应用,可以通过
关键词 :CSS + Div,外边距,内边距,边框,Position,Float,Clear
Copyright © 2019 by author(s) and Hans Publishers Inc.
This work is licensed under the Creative Commons Attribution International License (CC BY).
http://creativecommons.org/licenses/by/4.0/
1. 引言
在网页设计中,CSS即层叠样式表,是用来控制网页样式并允许样式与内容分离的一种标记性语言。Div标签用来定义网页内容中的逻辑区域,是一个块级元素,是一个容器,可以容纳任何网页元素。使用CSS + Div技术可以实现网页布局。与使用表格布局方法相比,CSS + Div布局方法具有结构简洁、定位灵活、代码效率高等优点,因此该技术在实际网站设计制作中得到了越来越多的应用,同时也成为网站制作者的必备技术。但在实际应用中由于对相关概念和属性掌握不透彻,导致在网页布局中出现异常,本文通过CSS + Div布局方法举例并进行分析说明,给出使用CSS + Div布局方法进行布局的使用方法和注意事项,达到掌握的目的。
2. 使用举例
2.1. 相关概念
1) 盒子模型
盒子模型是CSS + Div网页布局的重要概念,网页元素和它周围空间所形成的矩形区域称为盒子(box) [1] ,根据需要将网页中的盒子进行排列和分布,就形成了网页布局。
盒子模型将页面中的每个元素看作一个矩形框,这个框由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。按top、bottom、left、right的四个方向,分别进行定义和设置,描述盒子属性。具体设置如下图1所示。
Figure 1. Box model structure and properties
图1. 盒子模型结构和属性
2)
3) position定位属性
在CSS样式中,position定位属性定义元素区域的相对空间位置,可以相对于其上级元素,或相对于另一个元素,或相对于浏览器窗口,包括了四种属性值:static、relative、absolute和fixed,它们决定了元素区域的布局方式。
static静态定位为默认值,网页元素遵循HTML的标准定位规则,即网页各种元素按照“前后相继”的顺序进行排列和分布 [3] 。
relative相对定位,网页元素也遵循HTML的标准定位规则,但需要为网页元素相对于原始的标准位置设置一定的偏移距离,可以使用CSS的属性如left、top、right、bottom来设置位置。
absolute绝对定位,位置将依据浏览器左上角的0点开始计算,使用CSS属性left、top、right、bottom来设置位置。
fixed固定定位与绝对定位类似,是绝对定位的子类别,相对于浏览器窗口进行定位,当拖动浏览器窗口滚动条时,该元素位置始终保持不变,使用CSS属性left、top、right、bottom来设置位置。
4) 浮动方式
float属性定义了元素浮动方向,它使元素进行左右浮动,可以产生多个网页元素并行排列的效果。float属性有三个属性值:left控制网页元素向左浮动,right控制网页元素向右浮动,None没有浮动。当设定
clear属性与float属性配合使用,清除各种浮动。clear属性有三个属性值:left清除向左浮动,right清除向右浮动,both清除向左或向右浮动,None不清除。当设定
2.2. 布局方法
2.2.1. “上中下”布局
在“上中下”布局中,
例题1:完成页面,效果如下图2。
Figure 2. Web layout 1
图2. 网页布局1
对应的主要代码如下:
分析:从上可以看到
1) 在CSS + Div布局中,一般地将所有
2) 设置container标签的margin属性左右为auto [5] ,表示container标签及其嵌入的
3) 若
4) 要熟知盒子模型的各个属性,正确计算盒子的宽度和高度,实现精确布局。哪怕有1像素的宽度,也会对网页的精确布局产生影响,如下例题。
例题2:若main区域的代码修改为如下:
#main {
background-color: #FF0;
width: 360px; /*设置元素宽度*/
padding-left:60px; /*设置元素左内边距,实现元素内容与左侧边框有60像素距离*/
margin-top: 5px;
margin-bottom: 5px;
height: 80px;
}
分析:ID为main的
Figure 3. Web layout 2
图3. 网页布局2
2.2.2. “左中右”布局
在“左中右”布局中,首先插入若干个
例题3:在例题1的基础上完成页面,效果如下图4。
Figure 4. Web layout 3
图4. 网页布局3
与例题1相比,主要修改main,main2,foot区域部分,代码如下:
#main {
background-color: #FF0;
margin-top: 5px;
margin-bottom: 5px;
width:200px; /*设置元素宽度为200px*/
float:left; /*设置元素向左浮动*/
height:100px;
}
#main2 {
background-color:#0FF;
margin-top: 5px;
margin-bottom: 5px;
height: 100px;
width:100px; /*设置元素宽度为100px*/
float:left; /*设置元素向左浮动*/
}
#foot {
background-color: #F0F; /**/
margin-top: 5px;
height: 100px;
width:100px; /*设置元素宽度为100px*/
float:left;/*设置元素向左浮动*/
}
分析:通过设置main,main2,foot区域部分的宽度,总和为200 + 100 + 100 = 400,与所包含的container部分宽度相等,设置各个部分float属性为left,保证这三个部分向左浮动并在一行中。
若只将main2区域的float属性设置为right,则实现main2区域在该行向右浮动,效果如下图5。当设置了float属性为left或right时,只要前驱
Figure 5. Web layout 4
图5. 网页布局4
例题4:在例题3的基础上完成页面,效果如下图6。
Figure 6. Web layout 5
图6. 网页布局5
与例题3相比,主要修改main2,foot区域部分,修改部分代码如下:
#main2 {
background-color:#0FF;
margin-top: 5px;
margin-bottom: 5px;
height: 100px; /*此部分与例题3相同*/
width:200px; /*设置元素宽度为200px,使main和main2宽度之和为400px*/
float:left;
}
#foot {
background-color: #F0F; /**/
margin-top: 5px;
height: 50px;
clear:left; /*设置clear属性,清除向左浮动*/
}
分析:设置foot区域的clear属性,取消浮动效果,使foot区域回到前后相继的正常排列状态,出现在下一行。此部分没有设置foot区域的宽度,默认与包含它的container区域宽度相同。
若想实现更复杂的布局,可以结合浮动和宽高属性设置实现。如修改main2部分的高度为height: 60 px;修改foot部分的高度为height: 40 px;,保证这两部分的高度之和与main部分相等,依然设置foot部分浮动属性float:left;,则完成后效果如下图7。
Figure 7. Web layout 6
图7. 网页布局6
3. 总结
通过以上的例题和分析可以得出如下结论:
1) 盒子模型是基础,定义和规定了网页元素矩形区域的各种CSS属性。
2)
3) CSS + Div布局技术设计CSS样式的两个重要属性。position属性决定了
4. 结束语
本文通过例题对CSS + Div布局技术进行了举例和分析,总结了使用规则,提出了使用时的注意事项,特别是通过对“上中下”和“左中右”两种基本布局形式的剖析和学习,达到对CSS + Div布局技术的灵活应用。
文章引用
高 葵,李蔚妍,付晓翠. 基于CSS + Div的网页布局方法研究
Research on Web Page Layout Method Based on CSS + Div[J]. 计算机科学与应用, 2019, 09(03): 531-538. https://doi.org/10.12677/CSA.2019.93061
参考文献
- 1. 温谦. 网页设计CSS标准教程[M]. 北京: 人民邮电出版社, 2010: 88-90.
- 2. 刘瑞新. 网页设计与制作html + css + javascript [M]. 北京: 机械工业出版社, 2013: 112-113.
- 3. 修毅. 网页设计与制作[M]. 北京: 人民邮电出版社, 2015: 138-139.
- 4. 王海波. 网页设计与制作——基于计算思维[M]. 北京: 机械工业出版社, 2014: 100-105.
- 5. 李毅. 网页制作与开发教程[M]. 北京: 人民邮电出版社, 2015: 193-196.