运用DIV+CSS设计网站布局

DIV用于搭建网站结构、CSS用于创建网站表现, 实质即使用XHTML对网站进行标准化重构, 使用CSS将表现与内容分离, 便于网站维护, 简化html页面代码, 可以获得一个较优秀的网站结构, 便于日后维护、协同工作和搜索引擎蜘蛛抓取。

仔细分析和规划页面结构, 得到类似这样的几块:

标志和站点名称

主页面内容

站点导航

子菜单

搜索框

功能区 (例如购物车、收银台)

页脚 (版权和有关法律声明)

我们通常采用DIV元素来将这些结构定义出来, 类似这样:

这是一个对内容块的语义说明。DIV容器中, 可以包含任何内容块, 也可以嵌套另一个DIV。内容块可以包含任意的HTML元素:标题、段落、图片、表格等等。每一个内容块都可以放在页面上的任何地方, 再指定这个块颜色、字体、边框、背景以及对齐属性等等。

ID的名称是控制某一内容块的手段, 通过给这个内容块套上DIV, 并加上唯一的ID, 就可以用CSS选择器精确定义每一个页面元素的外观。

CSS是CascadingStyleSheets (层叠样式表) 的缩写。是对web文档添加样式的简单机制, 属于表现层的布局语言。

CSS中有三大类型选择器:基本选择器、复合选择器、特殊选择器。基本选择器又包括标签选择器、id选择器、类选择器。

一个HTML页面可以由很多不同的标签组成, CSS标签选择器可以声明哪些标签采用哪种CSS样式。因此说, 每一种HTML标签的名称可以作为相应的标签选择器的名称。

每一个CSS选择器均包含选择器本身、属性和值, 其中属性和值可以设置多个, 以实现对同一个标签声明多种样式风格。CSS语言对所有属性和值都有严格的要求, 如果声明的属性在CSS规范中没有, 或某个属性的值不符合该属性的要求, 均不能使该CSS语句起作用。若标签选择器一旦声明, 那么页面中所有相应标签都会产生变化。

类选择器的名称可以由用户自定义, 属性和值都跟标签选择器一样, 必须符合CSS规范。

ID选择器的使用方法跟class选择器基本相同, 不同的地方在于ID选择器只能在html页面中使用一次, 所以其针对性更强。html的标签中只需利用ID属性, 就可以直接调用CSS中的ID选择器。

复合选择器是3种基本的选择器通过组合, 产生更多种类的选择器, 实现更强、更方便的选择功能, 它包括交集选择器、并集选择器和后代选择器。

CSS盒子模型是CSS控制页面时一个很重要的概念, 只有很好的掌握了盒子模型及其中每个元素的用法, 才能控制好页面中的各个元素。每个页面中的元素都可以看成是盒子, 它们占据着一定的页面空间, 这些被占据的空间往往要比单纯的内容大。可以通过调整盒子的边框和距离等参数, 调节盒子的位置和大小。

一个页面由很多盒子组成, 盒子之间会相互影响, 因此掌握盒子模型需要从两方面来理解。一是要理解一个孤立的盒子的内部结构;二是要理解多个盒子之间的相互关系。

先来看一个例子, 理解盒子的概念。假设, 在墙上整齐地排列着4幅画。对于每幅画, 都有一个边框, 英文是border, 每个画框中, 画和边框通常都会有一定距离, 这个距离称为内边距, 英文是padding, 各幅画之间通常也会有一定距离, 他们之间的距离称为外边距, 英文是margin。这些对象实际上就是一个border-padding-margin的模型。这些矩形对象可以统称为盒子, 英文是box。了解了盒子之后, 还需要理解模型这个概念。

模型就是对某种事物的本质特性的抽象。模型的种类很多, 网页布局中, 为了使纷繁复杂的各个部分合理地组织, 专家对它的本质进行研究后, 总结了一套完整的、行之有效的原则和规范。这就是盒子模型的由来。

在CSS中, 一个独立的盒子模型由content (内容) , border (边框) , padding (内边距) 和margin (外边距) 4个部分组成。一个盒子实际所占有的宽度或高度是由content+padding+border+margin组成。在CSS中, 通过设width和height的值控制内容所占矩形大小, 并且对于任何一个盒子, 都可以分别设定4个border、content、padding和margin。因此只要利用好这些属性就能够实现各种各样的排版效果。

盒子并不仅仅是用DIV定义的, 事实上, 所有的网页元素本质上都是以盒子的形式存在。网页上的各种内容, 在人的肉眼看来是文本、图像等, 在浏览器看来, 就是由许多盒子排列在一起或者相互嵌套。

在一个网页中有着大量的盒子, 他们以各种关系相互影响。为了能够方便的组织盒子有序的排列和布局, CSS规范的制定者进行了深入细致的思考, 使得这种方式既有足够的灵活性, 以适应各种排版要求, 又可能使规则尽可能简单, 让浏览器的开发者和网页设计师都能够相对容易地实现。若干种对盒子进行布局的方法, 包括浮动属性和定位属性等。

在标准流中, 每一个块级元素都是从一个新行开始显示, 而且其后的元素也需另起一行进行显示。当需要横向排列的时候, 将会用到FLOAT这个属性, FLOAT属性的作用就是改变块级元素对象的默认显示方式。如果将FLOAT属性的值设为left或right, 元素就会左侧或右侧靠紧, 同时默认情况下, 盒子的宽度不再伸展, 而是收缩, 根据盒子内容的宽度来确定。

仅知道一些什么是DIV+CSS以及如何应用到实际项目中, 还是远远不够的。必须对DIV+CSS中的每个组成部分, 逐一学习应用, 各个击破, 方能发现它们的本质!

摘要：DIV+CSS是网站标准中常用的术语之一, XHTML网站设计标准中, 不再使用表格定位技术, 而是采用DIV+CSS的方式实现各种定位。用DIV盒模型结构给各部分内容划分到不同的区块, 然后用CSS来定义盒模型的位置、大小、边框、内外边距、排列方式等。在DIV+CSS标准化的影响下, 网页设计人员已经把这一要求作为行业标准。

关键词：DIV+CSS,选择器,盒子模型