html中的分离式布局,DIV+CSS技术在网页布局中的应用

摘 要 信息科学技术的进步使得互联网技术行业快速发展起来。其中网页设计作为互联网技术行业中重要的一部分，应用先进技术提高其工作效率与工作质量具有重要意义。DIV+CSS技术在网页布局中的优势作用使得其在网页设计与开发中应用越来越广泛。基于此，本文首先对DIV+CSS技术进行概述，并对其在网页布局中的优势与应用原理进行分析，最后举出网页设计的实例对该项技术的具体应用进行分布阐述。

【关键词】DIV CSS 网页布局 实践

当前，我国的信息技术得到了突飞猛进的发展，逐渐渗透到人们的生活与工作中，互联网已经成为不可或缺的重要工具。随着互联网的不断发展，网页开发与设计的功能日益强大。传统表格布局技术一些弊端的凸显使得DIV+CSS技术的应用逐渐增强，并且受到互联网行业的青睐。该种布局技术能够准确定位网页设计中的对象，提高网页传输与下载的速率，并且能够降低网页维护的难度，简化操作流程。

1 DIV+CSS技术概述

1.1 DIV技术

作为DIV+CSS技术中不可缺少的一部分，DIV也是设计、开发网页过程中的应用语言、标记元素，为文档提供布局结构。DIV起始到结束标签之间包含的内容都是HTML文档中大块的构成部分，还能把其称作定位技术，控制整个设计与开发中的元素。

1.2 CSS技术

即为Cascading Style Sheet(层叠样式表)，在设计网页时，CSS能够对页面的颜色、布局与背景等进行有效控制，丰富页面效果。另外，还能在一定程度上简化操作流程，也能提高网页语言的简洁性。在传统的表格布局技术中，也曾使用CSS技术。

1.3 DIV+CSS技术

该种布局技术进一步规范网页设计中的结构，规整页面中的元素，分离内容与样式，使之成为单独个体。另外，在将DIV与CSS进行合并的过程中，能够提高网页操作的灵活性与方便性。

2 DIV+CSS技术在网页布局中的优势

2.1 分离内容与样式，精简代码

将内容与样式进行分离，是该种布局技术最为显著的特征。样式由独立样式文件进行放置，链接到html文件中，通过对外部样式表里CSS样式属性的修改，就可以改变整个站点的版式。通过对应用CSS与未应用CSS技术的排版代码进行分析，能够发现应用CSS样式进行排版的代码要简洁得多。由此可见，CSS布局方式具有明显的优势。

2.2 浏览页面更快速

相较于以往表格嵌套布局，应用该种布局技术能够显著提高网页浏览与加载的速度。这是因为在达到相同页面效果的情况下，该种布局技术的页面容量小于表格排版。

2.3 利于搜索引擎爬虫

利用该种布局技术，结构清晰，容易被搜索引擎搜索到，并且使排名结果得到上升。另外，应用CSS能够突出网页中的正文部分，方便搜索引擎进行采集与寻找。

2.4 方便进行网页维护

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

3 DIV+CSS技术在网页布局中应用原理

3.1 盒子模型

该种布局技术的核心为CSS盒子模型，也是网页布局的基础。HTML文档之中包含的每一个盒子都能看做由内容、填充、边框与边界四部分组成。每一个部分都具有四个边：top、right、bottom与left，可以单独修改一个边，也可以同时修改全部边。

3.2 定位和浮动

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

4 DIV+CSS技术在网页布局中的实践应用

4.1 网页布局、规划

网页制作的基础为效果图的制作，不仅需要迎合建设方的需求，还要满足用户访问的需要。得到一张美工图片后，应该从上下、上中下、左右等展开思考。例如，将一个布局模式为上中下的网页作为实例进行分析，该网页中含有网站的标识与导航条，在布局中能够应用DIV技术，采用左右浮动进行定位。选取一张视觉效果好的图片作为Banner条，使用DIV标签进行定位，使用独立DIV对中间部位进行控制。该网页底部存在版权方面的信息，也使用DIV标签实现布局。

将DIV+CSS技术的网页布局理念作为依据对整个主页的结构进行划分，得出DIV框架的结构图，将此图作为显示出每个区块嵌套关系的依据。

4.2 设计网页布局的代码

在美国梦想编织者应用软件中，新建立一个HTML文档，同时建立一个外部文件CSS，再制作该外部文件的链接，插入到之中。在HTML文档中将DIV基本结构插入到var _userid = '';var _siteid =669;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =313; UrchinTrack();中，编写适合的代码进行操作。

4.3 设计CSS样式代码

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

5 结语

本文举出应用DIV+CSS技术的网页布局实例，对该种布局技术的实践应用进行深入探讨，对网页制作过程进行简要介绍。DIV+CSS技术应用在网页布局中，不仅能够分离内容与样式，还能显著提高搜索引擎的爬行效率与友好度。以往使用的表格布局技术操作难度低、网页制作比较快，并且便于初学者控制，针对网页设计入门而言较为适用。但是网络技术的不断创新与发展使得表格布局方式逐渐被淘汰，虽然DIV+CSS布局技术应用难度大于表格布局，但是针对该项技术的开发、重构与Web标准相符，在网站设计中具有广阔的应用前景。

参考文献

[1]刘小艮.网页设计中DIV+CSS布局技术的应用实践探讨[J].无线互联科技，2015(23)：34-35.

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

[3]吕颍颍.CSS+DIV布局技术在网页制作中的应用[J].时代报告：学术版，2015(04)：268-268.

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

作者单位

交通运输部科学研究院 北京市 100029