网站结构DIV+CSS标准化网页部局.doc

1、-专业最好文档，专业为你服务，急你所急，供你所需- 文档下载最佳的地方 -专业最好文档，专业为你服务，急你所急，供你所需- 文档下载最佳的地方 DIV+CSS 标准化网页部局标准化网页部局 使用“DIV+CSS”对网站进行布局符合 W3C 标准，采用这种方式布局通常是为了说明与 HTML 表格定位方式的区别。因为现在的网站设计标准中，已经不再使用表格定位技术，而是采用 DIV+CSS 的方式实现各种定位。通过使用 div 盒子模型结构将各部分内容划分到不同的区块， 然后用 css 来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单地说，div 用于 搭建网站结构（框架） 、css 用

2、于创建网站表现（样式/美化） 。该标准简化了 HTML 页面代码， 获得一个较优秀的网站结构，有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不 是所有的网页都需要用 div 布局，例如数据页面、报表之类的页面，还是使用 HTML 的表格会 比较方便，web 标准里并没有说要抛弃 table。 DIV+CSS 标准的优点标准的优点 1.表现和内容相分离 2.代码简洁，提高页面浏览速度 3.易于维护和改版 4.提高搜索引擎对网页的索引效率 “无意义无意义”的元素的元素 div 和和 span HTML 只是赋予内容的手段，大部分 HTML 标签都有其意义（例如，标签 p 创建段落，h1 标

3、 签创建标题等等）的，然而 div 和 span 标签似乎没有任何内容上的意义。但实际上，与 CSS 结合起来后，它们被用得十分广泛。你所需要记住的是 span 和 div 是“无意义”的标签。它们的 存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用 它们被用来组合成一大块的 HTML 代码并赋予一定的信息，大部分用类属性 class 和标识属性 id 与元素联系起来。span 和 div 的不同之处在于 span 是内联的，用在一小块的内联 HTML 中。 而 div（division）元素是块级的（简单地说，它等同于其前后有断行） ，用于组合一大块的代码， 为 HTML 文档内大块

4、的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分， 这使 div 便于建立不同集成的类。 div 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由 div 标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制. 盒子模型盒子模型 每个 HTML 元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height）， 盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而 -专业最好文档，专业为你服务，急你所急，供你所需- 文档下载最佳的地方 -专业最好文档，专业为你服务，急你所急，供你

5、所需- 文档下载最佳的地方 盒子边框外和其他盒子之间，还有边界（margin）。 定位属性定位属性 Position:用于定义一个元素是否 absolute（绝对），relative（相对），static（静态），或者 fixed（固定） Top:层距离顶点纵坐标的距离 Left:层距离顶点横坐标的距离 Width:层的宽度，可以用一个长度或“auto”值来指定其宽度，不允许使用负值 Height:层的高度，可以用一个长度或“auto”值来指定其高度，不允许使用负值 z-index:决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素 Display:是一个显示属性，设定 block 值

6、是以块状显示，在元素后面添加换行符，既其他元素 不能在其后面并列显示。如果设定 inline 值则内联显示，在元素后面删除换行符，多个元素可 以在一行内并列显示。使用值 none 将关闭指定元素及其子元素的显示 Visibility:这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时， 可以使用 inherit 值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用 visible 值 时，无论父层是否可见，子层都可见。而值为 hidden 时，无论父层是否可见，子层都隐藏 Overflow:用于设置层内的内容超出层所能容纳的范围处理方式，为该属性设置 visib

7、le 值时， 无论层的大小，内容都会显示出来。当设置 hidden 值时，会隐藏超出层大小的内容。当设置值 为 scroll 时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用 auto 值时， 只在内容超出层的范围时才显示滚动条 -专业最好文档，专业为你服务，急你所急，供你所需- 文档下载最佳的地方 -专业最好文档，专业为你服务，急你所急，供你所需- 文档下载最佳的地方 区块属性区块属性(区块模型区块模型) Margin:是定义区块外边界与上级元素距离的属性，用 1 到 4 个值来设置元素的边界，每个值 都是长度、百分比或者 auto，百分比值参考上级元素的宽度，允许使用负值

8、边际。如果四个值 都给出了，它们分别被应用于上、右、下和左边界。如果只给出一个值，它被应用于所有边界。 如果两个或三个值给出了，省略了的值与对边相等。注意如果边界在垂直方向邻接(重叠)了， 会改用其中最大的那个边界值。而水平方向则不会。也可以选择使用上边界 margin-top、下边 界 margin-bottom、左边界 margin-left 和右边界 margin-right 属性分别设置与上级元素的外边 距。 padding:用于设置区块的内边距属性，是边框和元素内容之间的间隔距离。与 margin 属性相 返，但使用的是相同属性值。是上补白 padding-top、右补白 paddi

9、ng-right、下补白 padding- bottom 和左补白 padding-left 属性的略写 float:设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮 left 值，右漂浮 right 值 clear:清除属性指定一个元素是否允许有元素漂浮在它的旁边。值 left 移动元素到在其左边的漂 浮的元素的下面；同样的值 right 移动到其右边的漂浮的元素下面。其他的还有缺省的 none 值， 和移动元素到其两边的漂浮的元素的下面的 both 值 区块框浮动区块框浮动 虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着 改变，

10、所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边 缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中， -专业最好文档，专业为你服务，急你所急，供你所需- 文档下载最佳的地方 -专业最好文档，专业为你服务，急你所急，供你所需- 文档下载最佳的地方 所以文档的普通流中的区块框表现得就像浮动框不存在一样。 行框和清理行框和清理 在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用 float 属性，再通过 left 或 right 值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不 足包含框的 100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽 度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果， 所以可以使用 clear 属性解决这一问题，该属性的值可以是 left、right、both 或 none，它表 示框的哪些边不应该挨着浮动框。 百谷科技有限公司提供技术支持 2012-10-20