浅谈DIV+CSS网页布局技术
2021-02-28李英
李英
摘要：随着网络的迅猛发展，上网浏览网页成为Internet最常用的应用之一。如何设计制作精美的网页也成为人们亟待解决的问题。DIV+CSS技术在网页布局中的优势作用使得其在网页设计与开发中应用越来越广泛。基于此，该文首先对DIV+CSS技术进行概述，然后对其在网页布局中的应用原理与优势进行分析，最后对DIV+CSS布局注意问题进行了说明。
关键词：DIV;CSS;网页布局
中图分类号：TP393 文献标识码：A
文章编号：1009-3044（2021）35-0155-03
1 引言
随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作技术，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。使用CSS可以结构化HTML，实现表现和内容相分离，提高易用性，结构清晰，对搜索引擎更加友好，同时支持各种浏览器，兼容性好。
2 DIV+CSS技术概述
2.1 DIV技术
DIV元素主要作用是提供结构和背景，构成文档大部分内容。DIV的构成要素标签的起始与结束之间构成内容块，<div>标签的属性控制元素的特性，或者是使用CSS样式对这个块进行格式化。其中，DIV是一个容器。
2.2 CSS技术
CSS的中文名称为层叠样式表，属于一种样式设计计算机语言，经常用来表现HTML或XML等文件，其最大特点是能够将网页表现与内容分离。初步交互设计是一种表现设计计算机语言，目前为止，基于文本为依托展示最优秀相关内容。CSS能够根据不同使用者的特质，针对不同人群，依据其理解能力强弱与否，进行简化从而优化写法，使得其更易于理解。
2.2.1 标签选择器
标签选择器其实就是html代码中的标签。如<html>、<body>、<img>、<h1>、<p>等。例如代码p{font-size：16px;line-height：1.8em;}的作用是为p 标签设置16px字号、行间距设置1.8em的样式。
2.2.2 类选择器
CSS样式代码中最常用的就是类选择器，其语法内容为.类选择器名称{CSS样式代码;}
具体使用方法如下：
首先，用标签修饰内容。比如：<span>心惊胆战</span>
其次，为标签设置类，格式为class=“类选择器名称”，比如：<span class=“wz1”>心惊胆战</span>
最后，设置样式如下：.wz1{color：red;}
2.2.3 ID選择器
应用ID选择器样式前，必须先在HTML标记中加入ID属性，举例来说，<font>标记要应用CSS样式，那么就在<font>标记中加入ID属性，如下所示：<font id=”id名称”>
接着，只要在CSS样式中加入ID选择器声明就可以了。声明格式如下：
#id属性名 {样式规则;}
例如：#font_bold{font-size：14px;color：#ffffff;font-weight：bold;}
2.3 DIV+CSS技术
DIV+CSS布局技术是Web标准推荐的最佳布局方法，DIV的位置、尺寸、背景、边框等可以通过CSS很好地实现，其内容和样式分离的思想使得页面代码更为简洁，样式更改更为方便。
3 DIV+CSS技术在网页布局中应用的原理
3.1 盒子模型
在DIV+CSS布局网页中，盒子模型是一个非常重要的概念，只有掌握了盒子模型的布局原理，才能通过DIV+CSS的布局方法对网页中的每个元素快速、准确地定位，并对各元素的各种属性进行设置。
盒子模型的原理就是将DIV元素看作是一个有一点空间的盒子，它由margin（边界）、border（边框）、padding（填充）和Content（内容）组成。其中margin位于最外层;Content位于最里层，是存放具体内容的空间，不管是哪种组成属性，都是用于控制元素内容的布局及定位。
Width和height定义的是content部分的宽度和高度， 外面依次加入margin、border和padding的宽度。padding和content部分会被背景填充。通常，与页面的相对位置主要由margin属性来控制，如使用margin-top：0px使得DIV与body部分的顶部边距为0像素;而padding是指元素的周边和内部的内容之间所空的空格，又称为填充区域，可以用padding-left、padding-right、padding-top和padding-bottom分别控制内容的周边空格;边框主要涉及元素边框的宽度、颜色、形态等的控制。
3.2 页面的布局
页面布局可有多种不同的模式，但都是标准的头部+导航+内容+尾部的布局方式。其中内容部分的布局又可以分为2列右窄左宽型、2列左窄右宽型、3列宽度居中几种方式。这些页面布局的基本原则是为每个独立的部分建立一个DIV层。
3.3 定位和浮动
在网页中，使用Div进行网页布局时，主要还是通过CSS规则中的Position和Float的属性值进行快速定位，而在Position定位中包含了4种属性值，这4个属性值则决定了Div的布局方式，而Float属性则是设置Div的浮动属性，使其相对于另一个Div进行定位。Position属性中的定位方法有relative（相对定位）、absolute（绝对定位）和fixed（悬浮定位）。
4 DIV+CSS技术在网页布局中的优势
网页布局采用DIV和CSS技术，可以有效地简化网页维护工作量，网站页面浏览速度大大提高，网页的维护变得方便快捷，增强网页的视觉交互效果， 自适应地改变网页大小适应不同尺寸屏幕。
4.1 简化网页维护工作量
网页设计人员如果采用传统的设计方法，一旦网站升级改版，就需要对所有的代码进行重新整合，降低了网站升级和维护的工作效率，也大大地增加了网页维护的工作复杂度，不利于网页迭代升级。采用DIV技术和CSS技术之后，设计师不需要更改全部代码，只需要对部分关键代码进行维护和更新即可，提高了网站升级维护的工作效率，为网站的升级打下坚实基础。
4.2 网站页面浏览速度大大提高
互联网操作友好性不仅是网站友好性，更重要的是网站数据信息的传输效率，以便能够提高网站页面的响应速度和并发承载量。采用DIV和CSS技术，能够有效提高网站的响应速度，具体方式是通过高效率传输相关网页中的文字、数字和代码，过滤掉其中不合乎标准的数据，从而可以让人们等待更短的时间，提高网站页面的层次感和快捷化。
4.3 网页的维护变得方便快捷
CSS重要作用是能够拆分样式定义与HTML文件内容。首先定义CSS样式文件，然后让HTML文件调用CSS样式文件。通过更改CSS文件样式，可以达到改变HTML文件中任一部分的显示效果。例如在网页设计时通常会遇到这样的问题：希望将网页中所有的标题由蓝色改成红色，按照在标记中定义风格的方法，只能一个一个地改，工作量极大，而借助CSS只要修改几个有限的样式即可，大大降低了修改和维护的代价。
4.4 增强网页的视觉交互效果
传统网站设计师利用代码进行编辑，网站渲染的效果分辨率较低，视觉效果不佳，无法给用户带来较强的冲击力，因此降低了网站推广相关效率。使用DIV和CSS技术，提供更有效的网页布局，DIV封装视频、图片、文字和表格，作为组成网页布局子模块的重要内容。因此可以结合实际需求，设计一个风格独特的网站界面，提高网页的视觉效果，也可以带来积极性的推广效果。
4.5 自适应地改变网页大小适应不同尺寸屏幕
DIV和CSS技术可以增强网页的自适应水平，方便门户网适应不同尺寸的设备，比如PC电脑屏幕大，可以根据浏览器的大小进行自适应。智能手机或平板电脑的屏幕尺寸小，合理优化大小屏幕版式和内容。
5 DIV+CSS布局注意问题
在CSS的样式表定义中，一般的网页布局需要了解如下几方面的问题。
5.1 保持居中
DIV+CSS的布局保持居中主要包含几方面要考虑的问题。
5.1.1 保持整体页面居中
页面显示位居屏幕中间是网页浏览的一个基本要求。通过CSS的margin属性对<body>元素进行定义可以达到控制网页显示位置的效果。
Body{text-align：center;margin：0px auto;}
margin：0px auto代表上下边距为0，左右为自动调整边距。另一种方法是可以设置所有的<div>的间距为{margin：0 auto;};使用这个设置网页每个通栏的最外层DIV就会自动居中，另外如果要让DIV层居左或者居右，则用float属性设置居左或者居右就可以了。
5.1.2 保持页面背景居中
页面背景的居中包括左右居中和上下居中，可使用下面的定义。
Body{background：url（） #fff no-repeat center;}
让url指示的图片设置背景不重复，并将其居中。这个居中是左右居中，而垂直不需要设置，自动会居中。
5.1.3 文字图片内容居中
左右居中直接用text-align：center即可让文字与图片内容居中。但是文字垂直居中就要靠设置行高方法使文字内容居中，通过使用CSS属性类样式line-height实现文字与图片的垂直居中。
5.2 内容排版
在需要水平排版內容时，如水平导航、水平排列的用户名和用户名输入框、水平排列的多个按钮或者图片等，都可以采用水平列表排版，并且通过margin-left或margin-right来调整左右间距达到合适效果;在需要垂直排版内容时，如新闻列表等同样也可以采用无序列表实现，通过margin-top或margin-bottom调整上下间距达到合适的页面效果。
5.3 浏览器的兼容性
不同的浏览器由于设计的不同，对于同样的CSS设计效果可能略有不同，所以在完成页面设计后需要在可能碰到的浏览器上进行测试，看同一个页面在大多数常用的浏览器显示效果是否相同。可测试目前比较流行的浏览器，如IE、chrome、火狐浏览器等的显示效果。
6 结束语
网页布局设计是一个复杂的、系统的工作，其需要结合网站设计的实际需求，引入更加先进的网页布局设计技术，比如DIV和CSS等，有效地探索网页布局，利用DIV分离网页内容与形式，规划网页主体架构，使得网页设计的代码更加精炼，从而使得网页空间结构简练明确，网站搜索引擎大幅度提升工作效率及网页开发效率。更重要的一点是，可以作为下一代网站升级的机遇，减少网页开发所需要的精力，从而大幅度提升网站维护相关效率。
参考文献：
[1] 李彦.DIV+CSS技术在网页设计布局中的应用研究[J].微型电脑应用，2020，36（3）：19-21，30.
[2] 赵菁.采用DIV+CSS技术的内网门户的设计和制作——以大庆油田第四采油厂为例[J].信息系统工程，2019（3）：51.
[3] 高葵，付晓翠，李蔚妍.基于CSS + Div的固定宽度与变宽度网页布局剖析[J].计算机科学与应用，2020，10（2）：303-311.
[4] 申永芳.高校门户网站设计中DIV与CSS布局技术的应用研究[J].宿州教育学院学报，2019，22（4）：87-89，93.
【通联编辑：代影】
