DIV+CSS网页标准化布局

DIV+CSS网页标准化布 DIV+CSS网页标准化布 局

主讲：张双Email:zhangshuang3@http://www.77cn.com.cn

DIV+CSS网页标准化布局 DIV+CSS网页标准化布局1. 2. 3. 4. 5. 6. 7. 8. 9. 概述 DIV+CSS的优势 DIV+CSS的优势 无意义的元素div和 无意义的元素div和span 盒子模型 定位属性 区块属性(区块模型) 区块属性(区块模型) 区块框浮动 行框和清理 使用区块框设计页面布局

1、概述使用“DIV+CSS”对网站进行布局符合W3C标准，采用这 使用“DIV+CSS”对网站进行布局符合W3C标准，采用这 种方式布局通常是为了说明与HTML表格定位方式的区别。 种方式布局通常是为了说明与HTML表格定位方式的区别。 因为现在的网站设计标准中，已经不再使用表格定位技术， 而是采用DIV+CSS的方式实现各种定位。通过使用div盒 而是采用DIV+CSS的方式实现各种定位。通过使用div盒 子模型结构将各部分内容划分到不同的区块，然后用css来 子模型结构将各部分内容划分到不同的区块，然后用css来 定义盒子模型的位置、大小、边框、内外边距、排列方式 等。简单地说，div用于搭建网站结构(框架)、css用于 等。简单地说，div用于搭建网站结构(框架)、css用于 创建网站表现(样式/美化)。该标准简化了HTML页面代 创建网站表现(样式/美化)。该标准简化了HTML页面代 码，获得一个较优秀的网站结构，有利于日后网站维护、 协同工作和便于搜索引擎抓取。当然并不是所有的网页都 需要用div布局，例如数据页面、报表之类的页面，还是使 需要用div布局，例如数据页面、报表之类的页面，还是使 用HTML的表格会比较方便，web标准里并没有说要抛弃 HTML的表格会比较方便，web标准里并没有说要抛弃 table。 table。

2、DIV+CSS的优势 DIV+CSS的优势采用DIV+CSS模式的网站具有以下优势： 采用DIV+CSS模式的网站具有以下优势： 表现和内容相分离 代码简洁，提高页面浏览速度 易于维护和改版 提高搜索引擎对网页的索引效率

3、无意义的元素div和span 、无意义的元素div和HTML只是赋予内容的手段，大部分HTML标签都有其意义(例如， HTML只是赋予内容的手段，大部分HTML标签都有其意义(例如， 标签p创建段落，h1标签创建标题等等)的，然而div和span标签似 标签p创建段落，h1标签创建标题等等)的，然而div和span标签似 乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。 但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住 但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住 的是span和div是 无意义” 的是span和div是“无意义”的标签。它们的存在纯粹是应用样式， 所以当样式表失

效时它就没有任何的作用 它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用 它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用 类属性class和标识属性id与元素联系起来。span和div的不同之处在 类属性class和标识属性id与元素联系起来。span和div的不同之处在 于span是内联的，用在一小块的内联HTML中。而div(division) span是内联的，用在一小块的内联HTML中。而div(division) 元素是块级的(简单地说，它等同于其前后有断行),用于组合一大 块的代码，为HTML 块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以 包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的 包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的 类。 div的起始标签和结束标签之间的所有内容都是用来构成这个块的， div的起始标签和结束标签之间的所有内容都是用来构成这个块的， 其中所包含元素的特性由div标签的属性来控制，或者是通过使用样 其中所包含元素的特性由div标签的属性来控制，或者是通过使用样 式表格式化这个块来进行控制。

4、盒子模型每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度 (width)和高度(height),盒子里面的内容到盒子的边框之 width) 高度(height) 间的距离即填充(padding),盒子本身有边框(border) 间的距离即填充(padding),盒子本身有边框(border), 而盒子边框外和其他盒子之间，还有边界(margin) 而盒子边框外和其他盒子之间，还有边界(margin)。

布局中的主要样式font lineline-height color margin padding border texttext-align background width: height float: clear display

5、定位属性属性 position top left width reight z-index 描述 用于定义一个元素是否absolute(绝对), 用于定义一个元素是否absolute(绝对),relative(相 ),relative( ),static(静态),或者fixed(固定) ),或者 对),static(静态),或者fixed(固定) 层距离顶点纵坐标的距离 层距离顶点横坐标的距离 层的宽度，可以为一个长度或“auto”值，不允许使用负值 层的宽度，可以为一个长度或“auto” 层的高度，可以为一个长度或“auto” 层的高度，可以为一个长度或“auto”值，不允许使用负值 决定层的先后顺序和覆盖关系， 决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低 的元素 是一个显示属性，设定block值是以块状显示 值是以块状显示， 是一个显示属性，设定block值是以块状显示，在元素后面 添加换行符，既其他元素不能在其后面

并列显示。 添加换行符，既其他元素不能在其后面并列显示。如果设 …… 此处隐藏：3254字，全部文档内容请下载后查看。喜欢就下载吧 ……