基于CSS技术的网页布局探究

冯小强

摘要：基于CSS技术，配合使用DIV是当前常用的网页布局方式，文中详细分析探讨了CSS技术以及DIV的功能和特点，提出了实际应用CSS进行网页页面设计的方法和技巧。

关键词：CSS；DIV；页面布局

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）28-0244-02

Research on Web Page Layout Based on CSS Technology

FENG Xiao-qiang

（School of Mathematics and Computer Science， Shaanxi Sci-Tech University， Hanzhong 723000， China）

Abstract：Based on CSS technology， the use of div is a commonly used web page layout method. This paper analyzes CSS technology and the functions and characteristics of div in detail， and puts forward the methods and techniques of using CSS in web page design.

Key words： CSS； DIV； Research； Page Layout

布局是设计制作网页的基础，网页的响应速度以及美观程度决定了网页的浏览频次，因此，对网页的优化与美工处理是整个网页制作过程中非常重要的环节[1]。从最初的Table布局方式到目前大量使用的DIV+CSS布局，CSS技术的广泛应用，使网页的样式制作变得更加灵活便利，也极大地提高了网页代码的执行效率。

1 DIV与CSS

实际应用中，CSS的技术总是和DIV标签一起使用，通过与DIV搭配，实现对网页中各个元素精确定位与控制，灵活、方便地制作出设计者预期的页面效果。

1.1 DIV

DIV是HTML中的一个标签，表示一个块，就像一个容器，可以容纳组合其他各种HTML元素。如果单独使用DIV，而不加任何CSS样式，将看不到任何效果，没有实际意义。实际的网页设计中，一般是使用DIV来将页面划分组合成各个区块，再引入CSS来定位设置各个区块，真正实现了网页的内容与显示的分离。

1.2 CSS

CSS，即：层叠样式表。是一种用来表现HTML或XML等文件样式的计算机语言，不仅可以静态修饰网页，还可以配合脚本语言动态格式化网页元素。[2]

2 CSS技术

使用HTML标签只是简单的搭建起网页骨架，CSS技术可以对网页中元素进行像素级精确控制，支持几乎所有字体字号样式[2]，使我们对网页骨架和网页内容进行美化和装饰。CSS可以改变网页中文字的大小、字体、颜色；改变网页元素的性质、位置、背景色、背景图片等。

2.1 CSS引入方式

使用CSS的目的是使的网页的显示与内容分离，CSS样式的引入方式非常灵活，既可以将样式规则嵌入到网页代码中，又可以单独存储为一个样式文件，这些样式规则都可以完成对网页元素的格式化。

1） 外部样式：在网页文件外部新建一个扩展名为css的文件，例如：demo.css，将样式规则代码写入CSS文件中。在网页文件标签中写入固定格式代码：，這样就将demo.css文件样式规则应用到网页元素上。

2） 内页样式：直接在网页文件内的标签中加入

3） 行内样式：直接在网页标签行内使用style属性，设置style属性值。如：

我是段落

三种方式可以混合使用，在优先级上，行内样式>内页样式>外部样式。

2.2 选择器

CSS的语法规则主要是选择器和声明。选择器是用来选中需要操作的网页元素，CSS选择器的写法非常灵活，需要在实际的项目应用中灵活使用，目前CSS的最新版本是CSS3，而新版本常常存在与浏览器的兼容性问题，常用的兼容性较好的是下面前3种选择器。

1） id选择器：给html文件的标签加一个id属性，属性的值是按语法规则自定义的名称，一个id名在页面中是唯一的，不能重复。通过#id名称{...}选中网页元素进行操作。

2） 类（class）选择器：给html文件的标签加class属性，属性值是按语法规则自定义的类名。通过 .类名{...}选中网页元素进行操作。相较于id名的唯一性，不同的标签可以使用相同的类名，同一个标签也可以有多个类名，充分体现了用类名来归类标签的特性。

3） 标签选择器，直接使用html标签名选中网页元素，比如：p{font-size：20px；color：red；}

4） 复杂选择器：根据页面标签的嵌套层次，组合id选择器、标签选择器、类选择器来选择元素。比如：div.mycolor{color：red；}选中div标签下的类名为mycolor的元素；div#myfont{font-size：20px；}选中div标签下的id名为myfont的元素；div p{color：red；}选中div标签下的p标签；div，p，div.moycolor，div#myfont{color：red；}被逗号分隔开的选择器都被选中。

5） 伪类选择器：根据状态来选择。a：hover{color：red}当有鼠标移动到a标签上时，选中a标签。

6） 通配符选择器：*{color：red；}选中html中所有元素。

2.3 盒模型概念

盒模型是CSS中非常中重要的概念，是对网页元素进行精确定位的基础。页面中所有的标记都可以看作一个盒子，盒模型规定了盒内包含的“内容”（content）、内容四周距离盒子边框的“内边距”（padding）、盒子四周的“外边距”（margin）、盒子本身的“边框”（border）。例如：padding：10px 20px 30px 40px；按上、右、下、左的顺序设置内边距。

2.4 定位与浮动

为了得到更好的页面效果，就必须调整好元素的位置，CSS可以对页面元素进行精确灵活的定位。

1） 相对定位：相对于元素原来的位置进行偏移定位。例如：#div{position：relative；left：10px；top：10px；}相对原来位置，div左边和顶部各偏移留空10像素。设置相对定位后，元素依旧在标准流中。

2） 绝对定位：相对于body元素的起始点进行偏移定位。例如： #div{position：absolute；left：10px；top：10px}相对整个页面的左上角，div左边和顶部各偏移留空10像素。设置绝对定位后，元素会脱离标准流。

3） 固定定位。相对于浏览器窗口进行偏移定位。#div{position：fixed；left：10px；top：10px；}相对于浏览器窗口，始终保持div的左边和顶部留空10像素，即使滑动滚动条div的位置也始终不变。

4） 浮动也是一种对页面元素进行定位的方法，由于块级元素在页面中是独占一行，为了实现多个块级元素排在一行，在不改变元素性质的情况下，就要使用到浮动。浮动可以让DIV等块级元素脱离标准流，依次紧挨从左到右形成一个新的流，漂浮在标准流之上，直到超出父元素的宽度，才会换到下一行排列，使用float属性来实现浮动。使用浮动必然会影响到未使用浮动的标准流中的元素位置，可以使用clear属性来清除浮动的影响。

3 网页布局技术的实际应用

布局是整个网页制作的基础，实际的项目中，需要将页面分成不同的区块，由DIV容器来存放这些区块。首先要整体规划，根据网站的内容、风格、特点绘制出布局图，明确DIV层的嵌套关系，搭建出网页的框架结构。再使用CSS技术对页面各个元素实现精准控制。具体的布局方式很多，最常用的是“固定浮动布局”，需要先将元素的宽度设为固定的值，再配合浮动技术实现页面内容的划分。

由于不同种类和版本的浏览器存在兼容性问题，使得网页代码的执行会出现各种问题，所以在网页制作的过程中，需要在不同的主流浏览器上测试网页代码，以确保代码在这些浏览器上都能正确的执行和显示。实际的项目中，可以借助“浏览器兼容性测试工具”，来测试网页代码在不同浏览器中的显示情况，从而及时修正问题。如：“Spoon Browser Sandbox”，可以测试IE、Chrome、FireFox、Safari、Opera等主流瀏览器；“IETester”，可以测试IE5.5到IE10等不同版本的IE浏览器。

网页页面中的每个元素都有默认的内外边距，在不同种类和版本的浏览器中，实际默认的显示距离都有不同，具体的项目中，需要一开始在CSS中将相关元素的内、外边距初始化为“0”，如：body，div，p，img{margin：0px；padding：0px；}，就可以消除元素默认值对于定位和布局的影响；设置img，a img{border：none；} a{text-decoration：none；} a：hover{text-decoration：underline；}，可以消除图像显示时的默认边框，并且只有当鼠标滑过超链接才会显示下划线；图片等资源文件最好与CSS文件放在同一个目录下，这样在CSS中引入图片时就可以直接使用图片文件的名称，而不用考虑路径问题。

4 结束语

布局是网页制作的基础，各种新技术的出现，使得网页制作变得更加便捷、高效，做出的网站功能更加强大，页面更加美观悦目。CSS便是众多新技术的一种，配合使用DIV，使得网页制作的水平和效果得到了很大提高。笔者结合自身网页制作的经验，分析研究了CSS技术在网页页面布局中的强大功能，提出了实际应用CSS技术制作网页的相关方法和技巧。今后，随着HTML5技术以及CSS3技术的应用，Web开发将会得到更多更先进的技术支持，作为Web开发前端的网页制作水平也必将大幅提高，必将制作出更加优秀的网页。

参考文献：

[1] 黄荣喜.CSS与表格布局在网页设计中的应用 [J].广西农学报，2017（2）：27-29.

[2] 黄雪琴，耿强，陈显军.基于CSS+DIV的自适应宽度网页布局方法[J].计算机与现代化，2014（6）：53-55

[3] 杨瑞梅.探讨HTML5和CSS3.0在网页设计中的新特性[J].电子制作，2017（6）52-53

【通联编辑：梁书】