基于DIV+CSS的网页设计技术

基于DIV+CSS的网页设计技术

摘要：本文首先介绍了DIV和CSS技术的特点，然后对CSS盒子模型进行了分析，最后通过具体的实例讲解了DIV+CSS网页布局技术的方法和实现流程，实例表明，该技术具有代码简洁、表现和内容相分离等优势。

关键词：DIV CSS 网页设计

0 引言

HTML[1](HyperText Mark-up Language)，即超文本标记语言，是当前网络上应用最为广泛的语言，也是组成网页文档的基本语言。HTML主要包括头部（Head）、主体（Body）两大部分，头部是描述浏览器所需要的信息，主体则包含所要说明的具体内容。在一般网页设计中，我们需要设计的内容就体现在主体中。

DIV元素是用来为HTML文档内大块的内容提供布局的结构和背景。它是HTML中的一个标签，此标签的作用就是定位网页内容中的图片、文字、视频等相关信息。一般我们也叫为DIV层定位。CSS(cascading style sheet)，层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。CSS 是 1996由W3C 审核通过，并且推荐使用的。CSS 的引入就是为了使 HTML语言更好的适应页面的美工设计。它以 HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和 PDA 等）来设置不同的样式风格。CSS的引入引发了网页设计一个又一个的新高潮。使用CSS设计的优秀页面层出不穷。

1 CSS盒子模型[2]

盒子模型是CSS控制页面时一个很重要的概念，只有很好的掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。

所有页面中的元素都可以看成是盒子，占据着一定的页面空间，一般说来这些被占据的空间往往要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构，二是理解多个盒子之间的相互关系。

在CSS中，一个独立的盒子模型由 cotent内容，border 边框，padding内边

距和margin外边距4 个部分组成。如图1所示。

图1 盒子模型

一个盒子实际所占有的宽度或高度是由内容+内边距+边框+外边框组成的。在css中，可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定 4 条边各自的 boder、padding 与margin。因此只要利用好这些属性就很够实现各种各样的排版效果。

2 DIV+CSS的基本设计

若采取DIV和CSS的网页布局结构，首先需要用DIV来分块，定义语义结构；然后用CSS来定位和添加样式，如浮动、位置、对齐属性、加入背景等；最后在这个CSS定义的各个块中添加相应的样式，如文字、图片等。下面通过最常用的三栏式自适应宽度布局实例介绍使用DIV+CSS布局网页的基本方法。

用标记把网页区分成不同的区块,包括header、content（其中有sidebar边栏区域和main主体区域）、footer三个区域，分别作为网页的头部、内容和版权区域。编写HTML文档代码如下：

头部