浅谈Div_原创文档.pdfVIP

浅谈Div+Css网页布局

前言

一．绪论

1.1Div+Css技术概述

DIV+CSS是网站标准（或称“WEB标准”）之一，div+css是一种网页的布局方法，这一

种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网

页页面内容与表现相分离。

CSS—层叠样式表（CascadingStyleSheets），用于定义HTML元素的显示形式，是

W3C推出的格式化网页内容的标准技术。

XHTML基于可扩展标记语言（XML），是一种在HTML基础上优化和改进的的新语言，

目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML

网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

1.2选题背景

随着WEB在国内外的逐渐普及以及很多业内人士的大力推行，很多网站已经开始重构。

Web标准提出将网页的内容和表现分离，同时要求html文档具有良好的结构，因此需要抛

开传统的表格布局，采用层（Div）布局，并且采用层叠样式表（Css）来实现页面的外观。

所以我觉得讨论下Div+Css网页布局对网站设计还是非常有必要的。

Div+Css网页布局较传统的表格嵌套内容的方式具有更好的亲和力，更灵活，功能更强

大，在实际应用中非常有意义。

1.3开发的目的和意义

你有时候可能用打开一些网站后发现网页都错位不整齐乱七八糟的挡着

或者有些都跑到框子外头去了这就说做网站的时候div+css布局没做周全

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。如果单

独使用DIV而不加任何CSS,那么它在网页中的效果和使用p/p是一样的。DIV本

身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码

CSS是CascADIngstyleSheets的简称，中文译作“层叠样式表单”，在主页制作时采用

CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网

页的外观和格式。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几

十KB，而高手做出来只有十几KB。

Div+Css较传统的网页布局更符合Web2.0标准，真正使得网页结构和表现分离。使后

期的维护更方便。

二．Div+Css基本原理和书写格式

2.1Div+Cssj基本原理

Div+Css工作原理，在一般情况的Div+Css开发静态html网页时，我们把html和Css

是分开的，形成html页面（如:index.html）和Css文件(如：DivCss5.Css),这里的index和

Div+Css是自己任意的命名。而Div+Css中Div则代表html页面(这里指index.html),因为在

html页面里用到特别多的Div标签，所以我们通常是简写成Div+Css也被称为“web标准”。

浏览器呈现一个网页到用户眼前（html纯静态网页）时,首先浏览器是先加载html页面，

如果网页是用Div+Css开发的，浏览器将读取加载引入到html页面Css样式文件代码，然

后通过浏览器解释翻译将Css文件里代码样式赋予到html中设置各个不同伪类标签，最终

将网页和Css样式中各式各样的样式完美的呈现给浏览者。

2.2Div+Css的书写格式

好的Css代码和DIV代码的书写格式有助于顺利快速的开发项目，同时也会形成较好的

习惯，同时日后的维护也方便。

2.2.1Div书写格式

Div书写在html文件里，排列有序缩进有序将给开发和日后维护带来帮助。典型缩进

范例：

divid=”main”

divid=”header”头部内容/