基于DIV+CSS的网页布局技术应用研究

王然

【摘 要】DIV+CSS是Web設计标准，随着Web2.0标准化设计理念的普及，国内很多大型门户网站采用DIV+CSS网页布局制作方法，它是目前比较流行的网页布局技术。从实际应用情况证明，传统的表格嵌套内容的方式布局页面有诸多缺点，而DIV+CSS技术具有代码简洁、表现和内容相分离、功能强大、灵活性高等特点。

【关键词】DIV+CSS技术；网页布局；网页设计

【中图分类号】TP393.092 【文献标识码】A

【文章编号】2095-3089（2019）05-0019-02

一、DIV+CSS技术概述

DIV的英文全称是Division，它作为容器标签来使用，用来封闭数据区域，属于行级区域，相当于一个可以容纳表格、段落、标题、图片等各种元素的容器。通过

标签可以将网页划分为许多大小不一的区块。div标签属于块级元素，具有高度、宽度、独立成行等特性。在进行网页布局排版时，需要将页面整体上进行DIV分块。

CSS是层叠样式表单的缩写，是一种用来表现HTML或XML等文件样式的计算机语言。对网页中的布局、字体、颜色、背景等效果实现精确的控制，使页面效果更丰富，操作更简单，代码更简洁，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，弥补HTML的不足，使页面变得丰富多彩。同时能够实现内容与表现的分离。是目前基于文本展示最优秀的表现设计语言。

DIV+CSS技术是一种“WEB标准”常用术语，是较为流行的网页布局方法，与传统中通过表格布局定位的方式不同，用IV+CSS技术制作的网站是在HTML中只放置页面的内容，CSS控制内容的样式，实现网页样式和内容的分离。当CSS应用于DIV的时，能让DIV的功能更加强大，也使得DIV的运用更加的灵活和方便。

二、DIV+CSS页面布局的优势

1.分离内容与样式，精简代码。

样式与内容分离，便于修改和统一风格使用DIV+CSS制作的网页由于将样式与内容进行了分离，修改网页的显示效果时只需要修改CSS代码即可。此外，若多页面共用一个CSS文件，既可减化代码又实现了网站的风格统一，维护的时候只需修改一个文件即可改变所有页面的布局或样式。由此可见，CSS布局方式具有明显的优势。

2.浏览页面更快速。

由于将样式代码写在了CSS文件中，这样代码简洁，让页面体积变小，而且相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载，却不像表格嵌套那样将整个页面圈在一个大表格里，由此更提高了页面的加载速度。

3.方便搜索引擎的搜索。

有利于搜索引擎优化许多网页的样式设计代码几乎与页面内容持平甚至是超过页面内容，而采用DIV+CSS设计的网页，在被搜索时探索引擎只需要从HTM代码中搜索关键字即可，减少了探索内容，提高了搜索效率。

4.方便进行网页维护。

传统表格布局，页面需要修改时，往往需要改动大量代码，工作量巨大，而DIV+CSS技术在网页布局中的应用能够便于控制样式，降低网页维护的难度，并且便于进行修改。

三、CSS盒子模型

1.CSS盒子标准模型。

所有页面中的元素都可以看成一个盒子，占据着一定的页面空间。一般通过调整盒子的边框和距离等参数，来调节盒子的位置。一个盒子模型由内容、边框、内间隙和外间隙四个部分组成，每个盒子都具有上述四个属性，如何确定它在网页中所占据的尺寸至关重要。现在多采用W3C盒模型计算方法，即盒子所占据的宽度是由内容的宽度+左右内边距+左右边框的宽度+左右外边距，所占据的高度是由内容的高度+上下内边距+上下边框的宽度+上下外边距组成的。其中，任意一个参数都有top（上）、bottom（下）、lef（t左）、righ（t右）四个属性。因此可以充分利用这些属性进行各种各样的排版效果。CSS盒子模式是DIV+CSS网页布局的核心，通过由CSS定义的大小不一的盒子和盒子嵌套来布局网页。

2.定位和浮动。

CSS中包括三种基本的定位机制普通流、定位和浮动。普通流就是元素按照其在HTML中的位置先后次序依次显示，行内元素共处一行之中，块级元素占一行或多行。相对定位与绝对定位应用比较广泛。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。若使用绝对定位方式，绝对定位使元素的位置与文档流无关，因此不占据空间。若一个盒子设置成浮动定位，浮动将元素从原来的占位中删除，使元素可以左右移动，直到它的外边框边缘碰到包含块或另一个浮动元素的边缘。为需要浮动的元素的设置float属性，其取值为left时，此时元素浮动在父元素的左边；取值为right时，元素浮动在父元素的右边。网页的导航栏就是通过对无序列表进行浮动实现的。若是需要清除临近元素的浮动，可以利用clear属性进行清除。

四、DIV+CSS布局应用实例

使用DIV+CSS布局对依韵手机网站的首页进行重构。

1.HTML结构。

采用DIV+CSS的网页布局，首先用DIV来分块，定义语义结构；然后用CSS来定位和添加样式，如位置、浮动、加入背景、对齐属性等；最后在这个CSS定义的各个块中添加相应的内容，如文字、图片等。

网页制作的基础为效果图的制作，不仅需要迎合建设方的需求，还要满足用户访问的需要。网页布局分为三大部分，分别为网页上部、网页中部、网页下部，每个部分都是通栏设计，版心宽度固定，左右两侧空白区域随屏幕的宽度大小发生变化。该网页中含有网站的标识与导航条，在布局中能够应用DIV技术，采用左右浮动进行定位。选取一张视觉效果好的图片作为Banner条，使用DIV标签进行定位，使用独立DIV对中间部位进行控制。该网页底部存在版权方面的信息，也使用DIV标签实现布局。

2.设计CSS样式代码。

通过CSS样式，可以控制DIV的位置、宽度、高度，边框等属性，改变字体，字号，颜色，背景图片等用以达到设计图的效果。

五、总结

本文对使用DIV+CSS技术进行网页布局所涉及到的技术进行了简要概述，并将其应用到网页布局的实例中。基于DIV+CSS技术实现了网页的布局定位，具有表现和内容相分离等优势，提高了网站更新维护的效率，提高了网页的浏览速度。已经成为一种网页设计的标准和趋势。在实际操作过程中还须要根据不同的风格和内容灵活应用各布局元素及CSS样式。如果今后想把DIV+CSS技术运用得更好，还需要不断学习和丰富的实践。

参考文献

[1]谢振华.Div+css网页布局设计实现[J].中小企业管理与科技（中旬刊），2016.04.

[2]洪秀金.DIV_CSS技术在网页布局中的应用[J].电子技术与软件工程，2016（12）：30-30.

[3]田佳妮，翟悦.DIV+CSS在网页布局中的应用研究[J].电脑知识与技术，2015（02）：181-191.