DIV CSS网页标准化布局.pdf

DIV+CSS网页标准化布局 讲师：张涛 网址： 电话：400 700 1307 QQ/Email: zhangtao@ DIV+CSS网页标准化布局 1.概述 2.DIV+CSS的优势 3.无意义的元素div和span 4.盒子模型 5.定位属性 6.区块属性(区块模型) 7.区块框浮动 8.行框和清理 9.使用区块框设计页面布局 1、概述 v 使用 “DIV+CSS”对网站进行布局符合W3C标准，采用这种 方式布局通常是为了说明与HTML表格定位方式的区别。因 为现在的网站设计标准中，已经不再使用表格定位技术， 而是采用DIV+CSS的方式实现各种定位。通过使用div盒子 模型结构将各部分内容划分到不同的区块，然后用css来定 义盒子模型的位置、大小、边框、内外边距、排列方式等 。简单地说，div用于搭建网站结构（框架）、css用于创 建网站表现（样式/美化）。该标准简化了HTML页面代码， 获得一个较优秀的网站结构，有利于日后网站维护、协同 工作和便于搜索引擎抓取。当然并不是所有的网页都需要 用div布局，例如数据页面、报表之类的页面，还是使用 HTML的表格会比较方便，web标准里并没有说要抛弃table 。 2、DIV+CSS的优势 v采用DIV+CSS模式的网站具有以下优势： 表现和内容相分离 代码简洁，提高页面浏览速度 易于维护和改版 提高搜索引擎对网页的索引效率 3、无意义的元素div和span v HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签 p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有 任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实 际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是 span和div是 “无意义”的标签。它们的存在纯粹是应用样式，所以 当样式表失效时它就没有任何的作用 v 它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类 属性class和标识属性id与元素联系起来。span和div的不同之处在于 span是内联的，用在一小块的内联HTML中。而div（division）元素 是块级的（简单地说，它等同于其前后有断行），用于组合一大块的 代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含 段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。 v div的起始标签和结束标签之间的所有内容都是用来构成这个块的， 其中所包含元素的特性由div标签的属性来控制，或者是通过使用样 式表格式化这个块来进行控制。 4、盒子模型 v 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度 （width）和高度（height），盒子里面的内容到盒子的边框之 间的距离即填充（padding），盒子本身有边框（border），而 盒子边框外和其他盒子之间，还有边界（margin）。 布局中的主要样式 vfont vwidth: v line-height vheight vcolor vfloat: vmargin vclear vpadding vdisplay vborder vtext-align vbackground 5、定位属性 属 性 描 述 用于定义一个元素是否absolute（绝对），r