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

2014-04-29麦小霞

计算机时代 2014年5期

麦小霞

摘要： DIV+CSS技术作为网页布局的新宠，有着其独特的优势，它把网页的表现形式和内容分离，能够解决很多表格布局时产生的问题。介绍了DIV+CSS布局技术的概念、特点及其优势；通过一个具体的实例展示了DIV+CSS布局技术的应用思路与核心技术。希望能帮助初学者初步认识这种布局技术，为进一步的学习打下基础。

关键词： DIV； CSS；网页布局；网页设计

中图分类号：TP393 文献标志码：A 文章编号：1006-8228（2014）05-42-02

Abstract： DIV+CSS is a popular technology in page layout because of its own advantages. The form and the content of the page are separated so that it may solve many problems existing when we use table layout. The concept of DIV+CSS layout techniques and its characteristic advantages are introduced. Through a concrete example， the DIV+CSS layout technology application and the core technology are displayed to help the beginners understand this layout technology.

Key words： DIV； CSS； Web page layout； Web page design

0 引言

随着网络技术的发展和Web2.0标准化设计理念的普及，网页布局不再以表格布局为主，而是向更规范的DIV+CSS布局方式转变。因为DIV+CSS布局方式解决了表格布局中的问题，把网页的表现形式与内容进行分离，这样做的好处是网页后期的维护更加方便，网页的代码也简化了，并且提升了网页的加载速度。因此，DIV+CSS技术的普及是趋势。那么什么是DIV+CSS技术，它有什么样的优势，如何使用该技术，本文将对此进行探讨，介绍DIV+CSS布局技术的基本知识，再通过实例介绍其结构以及如何在网页制作中应用这种技术。

1 什么是DIV+CSS技术

网页的页面是一个整体，在进行设计的时候必须从整体上去规划它，也就是把整个页面划分成几个区域，再对每个区域作进一步的细节排版以及版式设计，最后就是用户所看到的页面效果。DIV+CSS布局技术就是按照上面的设计思路去制作网页的一种技术。

DIV是HTML标记中的块级标记，是一个提供结构和背景的元素。CSS是用来表现文件样式的脚本语言。DIV+CSS技术就是用DIV盒子模型把各部分内容划分到不同的区块，然后通过CSS样式来定义盒子的位置、大小、边框、内外边距等。

2 DIV+CSS技术的优势

DIV+CSS布局方式解决了表格布局中的问题，主要体现在以下几个方面。

⑴ 表现和内容分离。HTML文件中只存放文本的信息，而设计部分的内容则分离出来放在一个独立的css样式文件中，这样的网站不会因为将来网络应用的升级而被淘汰。

⑵ 代码简化，页面浏览速度提高。DIV+CSS布局的页面的编码一般只有表格布局的页面编码的二分之一，这样的页面浏览速度更快，带宽成本更低，被搜索引擎搜索到的概率更高。

⑶ 维护和改版更加便捷。当需要改变页面风格的时候，只需要修改CSS样式即可，从而降低改版网站的成本，提高了效率。

YAHOO，网易，新浪等几大门户网站均采用DIV+CSS布局框架，这更加印证了这种技术有其独特的优势，相信它的普及应用也为期不远了。

3 DIV+CSS技术的应用

下面以广州华商职业学院的主页设计为例子来讲解DIV+CSS布局技术的具体应用。

4 结束语

本文介绍了使用DIV+CSS布局技术进行网页设计的完整思路，给出了使用这种技术的过程，并且给出了核心代码。通过本文的探讨，相信初学者对DIV+CSS布局技术有了初步的了解。当然，DIV+CSS布局技术包含的知识很多，在本文中都没有提及。网页布局的样式非常多，如何通过这种技术实现不同的布局方式是笔者要进一步研究的课题，这需要不断地学习和更多的实践。

参考文献：

[1] 杨阳.DIV+CSS网站布局实录[M].科学出版社，2009.

[2] 张志浩，李书明，赵玲.CSS技术在网页设计中的应用探析[J].电脑知

识与技术，2007.10：30-36

[3] 周鑫.浅谈DIV+CSS技术在网页设计中的应用[J].科技信息，

2011.17：84-85

[4] 梁静琳.DIV+CSS布局技术在网页设计中的应用[J].武汉工程职业

技术学院学报，2009.21（1）：42-45

[5] 夏曼.用DIV_CSS布局技术实现网页设计[J].软件导刊，2010.11：

132-134

[6] 杨芳菊.DIV+CSS布局可视化尝试[J].电脑知识与技术，2008.8：

1821-1825