DIV+CSS在网页布局和样式中的应用分析

摘要：Web标准的普及日益受到业内的重视和推行。基于DIV+CSS的网页布局技术是典型的Web标准应用模式。阐述了DIV、CSS的基本概念以及相关的布局原理，并通过“一个XHTML文档，两种页面表现效果”的具体实例论证了该技术可以实现Web标准的核心思想。

关键词：Web标准；DIV；CSS；网页布局

中图分类号：TP393.092 文献标识码：A文章编号：1007-9599 (2011) 16-0000-03

Application Analysis of DIV+CSS in Webpage Layout and Style

Wu Jianwei

(Changzhou Railway Higher Vocational Technical School,Changzhou213011,China)

Abstract:IT industry is paying more and more attention to carrying out the popularization of web standards.Web page layout technology of DIV+CSS based is a typical web standards application model.This article explained the basic conception of DIV and CSS and related layout principles by a specific example of"One XHMTL file with two different display effects of layouts".And finally the author expounded and proved the core theory of that technology can achieve the web standards.

Keywords:Web standards;DIV;CSS;Web Page Layout

随着Web2.0概念在互联网上的快速传播，作为其技术特征之一的――设计符合Web标准的网站已受到越来越多的专业设计人士的认同和重视，并将其作为行业标准运用于各类网站设计之中，以实现易于维护、拓展访问渠道、提高用户体验质量等Web标准所带来的诸多优势。国内各大型门户网站纷纷开始用“符合Web标准”的理念来重新构建，网站设计的标准时代已经到来。

一、Web标准

（一）Web标准概述

Web标准是W3C（World Wide Web Consortium，万维网联盟）和其他标准化组织制定的用于网站设计与开发的一系列标准的集合。该标准规定：符合Web标准的网站应该主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的网站标准也分三方面：（1）结构化标准语言，主要包括HTML、XHTML和XML。（2）表现标准语言，主要包括CSS。（3）行为标准，主要包括对象模型（如W3C DOM）、ECMAScript等。

（二）Web标准的目的

遵循Web标准的主要目的就是“实现内容（结构）和表现的分离”。所谓“内容”就是指页面实际要传达的真正信息，包括数据、文档或者图片（如新闻中的照片）等。“表现”指内容呈现的样式，例如位置、字体、颜色、背景等，所有用以改变内容外观的部分都称之为“表现”。符合Web标准的网站使用XHTML来定义文档的内容（结构），所有涉及表现的东西通通剥离出来，把它放到一个单独的文件――CSS中，以实现内容与表现的彻底分离。

二、基本理论

DIV+CSS是Web标准中常用术语之一，是一种网页的布局和表现的方法，但并不能涵盖整个Web标准。这种网页布局方法克服了传统表格布局所带来的逻辑结构混乱、嵌套表格冗余、网页兼容性差等缺陷，真正地达到了“内容与表现相分离”。

（一）Div简介

Div是Division的简写，是XHTML所支持的块级标签。可以把

四、体现“内容与表现相分离”的实例

下面以某一博客网站为例，在保持首页XHTML文件结构不变的情况下，通过调用不同的外部CSS文件，实现两种完全不同的页面效果，很好的体现了Web标准的“内容（结构）和表现相分离”的思想。

如图2所示，在没有任何CSS文件支持的情况下，页面中只有一些项目列表，没有任何样式和布局，这就是页面的“内容”。

图2.未加入CSS之前的页面效果

图3.不同CSS实现的效果一

图4.不同CSS实现的效果二

而在导入不同外部CSS文件后，分别呈现了效果一和效果二两种不同的显示效果，如图3、图4所示。这就是页面的“表现”。下面对该博客首页的主要设计流程和关键代码进行解析。

（一）用Div布局

根据博客首页的内容需求对整体布局进行规划，将页面内容划分为四个大的Div块：导航菜单（#navigation）、链接信息（#links）、主体内容（#mainblock）和页尾（#footer），而这些块又全部包含在一个#container的容器中。

这里用Div标签配合ID选择器进行了区块的唯一标识，主要的页面布局代码如下。