浅析“DIV+CSS网页布局”的优劣势及使用技巧

梁弘宇

【摘 要】随着网络的普及和飞速发展，用户对于网页设计和体验要求越来越高，DIV+CSS技术就在这一环境下孕育而生，它代表着网页制作技术的一大进步。论文主要阐述DIV+CSS网页布局的优劣势及几点使用技巧。

【Abstract】With the popularity and rapid development of the network， the user has more and more high requirements for the web design and experience. DIV+CSS technology is born in this environment， it represents a great progress of web page making technology. This paper mainly expounds the advantages and disadvantages and several use skills of "DIV+CSS page layout".

【关键词】DIV+CSS；网页布局；优劣势；使用技巧

【Keywords】 DIV+CSS； web layout； advantages and disadvantages； use skills

【中图分类号】TP393.0 【文献标志码】A 【文章编号】1673-1069（2017）12-0187-02

1 引言

用DIV+CSS进行网页布局具有代码精简等优点，但是其同时存在开发技术高、开发时间长、开发成本高等问题。因此，应该了解DIV+CSS网页布局的优劣势，并在实践中不断总结和探索其布局技巧。

2 DIV+CSS网页布局的优势

DIV+CSS是一种全新的网页布局方法，与传统的TABLE网页布局相比具有三大优势：第一，结构与表现的分离，利于页面修改和重构；第二，页面代码量少，利于提升页面的访问速度；第三，有利于SEO优化。

2.1 结构与表现的分离，利于页面修改和重构

DIV+CSS布局页面能实现结构与表现的分离，一般来说，DIV+CSS页面的HTML和CSS文件都是分开的，即一个网页的结构与表现形式是分离的，修改小部分的CSS文件里CSS样式属性就可以修改網站的样式版面，如边框样式、背景颜色、网站宽度等，具有TABLE不具备的灵活性[1]。

在教学中，曾设计了这样的一个问题情境：“同学们，如果你是一个大型商场的网站管理员，每逢重大节日，如何做到大型网站在不改变架构的情况下，还能表现出节日渲染的气氛呢？”

上述问题的解决方法是：使用DIV+CSS进行网页布局，这是一种让网页的结构与表现分离的技术。要理解这个原理，首先要了解DIV+CSS的盒子模型。盒子模型像生活中商品的包装盒。盒子跟另一个盒子之间的距离叫“外边距”，包装盒的纸壳就是“边框”，防止商品在运输过程中出现碰撞而增加的泡沫垫可以看成“内边距”。在实践中，大部分学生想到的盒子就只是DIV，其实所有网页元素都可以看作盒子。

2.2 页面代码量少，利于提升页面的访问速度

一方面，DIV+CSS布局的网页代码精简，TABLE时代，一个页面的表格达到10个以上是非常常见的事情，但是应用DIV+CSS后，一个表格都可以不用，就可以达到之前的效果，并且，CSS文件可以在网站的任意一个页面进行调用，避免了代码冗余的弊端，可以让网页文件大小比使用TABLE时减少一半以上。另一方面，DIV和TABLE的加载方式不同，TABLE要把所有内容加载完毕，浏览器才知道该怎么显示；而DIV的加载方式是即读即加载，边加载边将内容呈现到浏览器上，访问者打开网页时不用等，大大提升页面的访问速度[2]。

2.3 DIV+CSS布局页面，有利于SEO优化

DIV+CSS布局网页可以精简页面代码，提高加载速度，这对蜘蛛（spider）爬行非常有利。一个网站在搜索引擎上的排名很大程度上取决于该网站的信任值和权威值。由于搜索引擎在访问某个网站时，会“感觉”到该网站是否正常。例如：该网站是否有过多的页面代码而造成爬行超时？连向该网站的联结数量、质量、多样性如何？诸如此类的线索都会引起搜索引擎的注意，搜索引擎会把各种因素结合在一起作整体评估。因此DIV+CSS布局的网站在搜索引擎中的排名情况会更良好。

3 DIV+CSS网页布局的不足

虽然DIV+CSS技术在网站建设中有很多优势，但劣势也非常明显，如开发技术高、开发时间长、开发成本高等。

3.1 开发技术高

DIV+CSS虽然不是高不可及，但实践证明，DIV+CSS比表格定位复杂得多。例如一个溢出没处理好，可能导致整个网页面目全非。并且，DIV+CSS要兼容各种浏览器，大大增加了DIV+CSS的开发难度。比如在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。目前，DIV+CSS还没有实现所有浏览器的兼容，调试浏览器的兼容问题是一件非常难的事，需要较高的开发技术[3]。

3.2 开发时间长

DIV+CSS布局相对于TABLE布局来说，DIV+CSS的耗费时间要长得多，并且各种浏览器间的兼容测试也是一个很费时的事情。

3.3 开发成本高

网站的开发成本很大程度取决于开发技术和开发时间，DIV+CSS制作网页需要的开发技术高，开发时间长，因此决定了它的开发成本高。

4 DIV+CSS网页布局的几点使用技巧

在网页制作中，巧妙地使用技巧可以达到事半功倍的效果，下面是笔者在平时教学和实践中常使用的几点DIV+CSS网页布局技巧。

4.1 列表项前面的图片在不同浏览器中显示存在差异的处理技巧

5 结论

作为网站的设计者，需要理解DIV+CSS网页布局的优点及不足，从而更好地运用DIV+CSS技术来制作网站。同时，也应在平时的实践中多总结DIV+CSS布局的技巧，以便制作出更高质量的网页。

【参考文献】

【1】刘红梅.网页设计与制作[M].南京：江苏教育出版社，2013.

【2】李玲玲.关于“网页布局”方式的研究[J].淮北职业技术学院学报，2011（01）：29-30.

【3】吴胡和，周非凡.网页布局优化设计方法探析[J].科技资讯，2011，05（18）：22-23.

【4】卢秀芸.浅析优化设计网页布局[J].科技资讯，2010，03（33）：11-12.