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

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

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

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]。

（3）方便搜索引擎的搜索

采用DIV+CSS布局的网页有利于SEO优化。设计后的网页能够通过W3C验证，搜索引擎spider爬行效率将提高，并可能给予一个较高的排名结果。同时由于CSS的引用使得网页中正文部分更为突出，更易于被搜索引擎采集搜录。

（4）样式便于操作，网页便于维护

DIV+CSS布局更便于样式的控制，使得网页的维护更加方便，也更加易于修改。

3 DIV+CSS的布局原理

3.1盒子模型[4]

CSS盒子模型是DIV+CSS的网页布局的核心。HTML文档中的每一个盒子都可以看成四部分组成：内容（content）、填充（padding）、边框（border）和边界（margin）。每个部分又派生出top、right、bottom、left四个分支属性，如图1所示。

3.2常用的定位属性

在css中定位机制包括：标准流，定位和浮动。通过使用 position 属性，我们可以选择 4 种不同类型的定位，position 属性值分别有：static、relative、absolute、fixed。其中relative（相对定位）与absolute（绝对定位）是最常用的两种定位方式。如果设定相对定位：元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了。如果指定绝对定位时，元素就脱离了文档，即在文档中已经不占据位置了。

当某个盒子设置为float浮动定位后，将使块级元素脱离普通文档流，浮动的框可以向左或向右移动，直到它的外边缘碰到最近的父包含框或另一个浮动框的边框为止。其他邻近元素将占据其空间表现得就像浮动框不存在一样。可以通过clear属性清除邻近某侧其他元素浮动。

4 DIV+CSS布局应用实例

采用DIV+CSS的网页布局思路如下：首先用DIV分块，定义语义结构；然后利用CSS定位和添加样式达到美化网页效果，如：加入背景、对齐、边框线条等；最后在CSS定义的盒子内添加相应的主体内容。下面以博客首页设计为例，通过调用外部CSS文件，实现如图2效果，很好的体现了web标准结构与内容相分离的思想。

当没有导入CSS样式表文件时，样例页面效果如图2所示，只是页面的“内容”。如果导入外部CSS文件后，页面呈现图3所示效果，如果导入不同的外部CSS文件，呈现出内容的展示效果会不同，DIV+CSS可以使得网页改版和维护更加方便。下面介绍设计的具体实现步骤。

（1）使用DIV进行页面分块

根据博客首页的内容需求对整体布局进行规划，页面大致分为顶部、导航、主体内容和底部版权四个部分。该页面布局在页面里只能出现一次，并且是唯一性，故选择ID选择器进行区块标识，ID具有唯一性，尽量在外围使用。

5 结语

通过一个简单的实例可以看出，CSS+DIV布局真正体现了结构和内容相分离，可以提升搜索引擎的友好度，成为目前Web标准中的典型应用模式。而且用CSS+DIV布局可以从根本上解决表格布局使用单元格组织版式，布局更精确，CSS提供的强大样式定义功能比表格设置更简单、更灵活。尽管DIV+CSS技术较表格布局难度高，但其开发和重构符合Web标准，已成为今后网站设计的必然趋势[5]。

参考文献：

[2] 丁海燕， 袁国武， 张泽华， 等. 用CSS+DIV开发技术实现网页布局[J]. 实验科学与技术， 2012， 10（4）：39-41.

[3] 黄雪琴， 耿强， 陈显军. 基于CSS+DIV 的自适应宽度网页布局方法[J]. 计算机与现代化， 2014， （6）：53-55.

[4] 车元媛. 基于DIV+CSS的网页布局技术应用[J]. 电脑知识与技术， 2011，7（9）：1009-3044.