DIV+CSS在网页布局中的应用研究

龙源期刊网 https://www.360docs.net/doc/343672701.html,

DIV+CSS在网页布局中的应用研究

作者：田佳妮翟悦

来源：《电脑知识与技术》2015年第02期

摘要：网页布局对于网页的设计制作非常重要， DIV+CSS是目前网页设计中比较流行的一种页面布局方式。本文通过分析DIV+CSS布局技术优势，阐述了DIV、CSS的布局原理，并通过一个实例说明DIV+CSS布局的基本流程和使用技巧。

关键词：DIV；CSS；网页布局；Web2.0标准；优势

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

Abstract：Page layout is very important for the web page design. DIV + CSS have gradually become the most popular page layout technology. This paper analyzes the advantages of DIV and CSS layout and explains relevant layout principles. Finally， we explain implementation method and skills with a concrete example.

Key words： DIV； CSS； Page layout； Web 2.0 standard； advantage

1 引言

随着网络技术的不断发展，早期的表格布局方式已经不能适用新的要求，许多网站设计师开始采用Web2.0标准[1]，DIV+CSS网页布局技术已成为主流的应用模式，其结构清晰化、便于维护和修改，提高用户体验度等优势，已被业内广泛认可和应用。

2 DIV+CSS布局的优势

（1）表现和内容相分离，代码精简

结构和表现相分离[2]，这正是CSS布局的特色所在，结构与表现分离后，CSS将样式部分单独放在一个独立的样式文件中，HTML 文件只需提供网页内容，至于内容的表现形式完全由CSS 来实现。这样代码才简洁，尤其是网站改版时，只需修改CSS文件内容，HTML文件即可表现出不同的形式[3]。如下代码可以加深理解结构和表现相分离的含义。

通过上例可以看出如果还有更多的图片列表，那么第二种CSS布局方法将更具优势。

（2）提高页面浏览速度

采用DIV+CSS布局的网页比传统表格嵌套布局的网页浏览、加载速度更快。针对同一个页面效果，一般DIV+CSS构造的页面容量均比表格排版容量小[3]。