DIVCSS网页标准化布局.pptVIP

page (#) 附加三 DIV+CSS网页标准化布局 回顾 CSS的语言的语法？ 在HTML文档中放置CSS样式的三种方式？ CSS的6种选择器的作用和使用？ 预习检查 DIV+CSS对页面布局的优势？ 参与页面布局的CSS属性都有哪些？ 如何实现一个DIV层绝对定位？ 本章任务 1. DIV+CSS对页面布局的优势 2.“无意义”的HTML元素div和span 3. W3C盒子模型 4. 和页面布局有关的CSS属性 5. 盒子区块框的定位 6. 使用盒子模型的浮动布局 7. DIV+CSS的兼容性问题 8. 使用盒子模型设计页面布局 9. DIV+CSS网站首页面布局实例 1. DIV+CSS对页面布局的优势 采用DIV+CSS模式的网站具有以下优势： 表现和内容相分离 代码简洁，提高页面浏览速度 易于维护和改版 提高有哪些信誉好的足球投注网站引擎对网页的索引效率 2.“无意义”的HTML元素div和span HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用 它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。 div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 3. W3C盒子模型 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。 声明盒子模型的CSS属性 属性 描述 margin 是定义区块外边界与上级元素距离的属性，用1到4个值来设置元素的边界，每个值都是长度、百分比或者auto，百分比值参考上级元素的宽度，允许使用负边界值。还可以使用margin-top/margin-right/margin-bottom/margin-left padding 用于设置区域的内边距属性，是边框和元素内容之间的间隔距离。 可以使用：padding-top/padding-right/padding-bottom/padding-left border 边框属性用于设置一个元素边框风格、边框风格、边框颜色、可以一起设置4边的边框，也可对上边框、有边框、下边框和右边框进行单独设置，详见上一次的课件内容。 width 层的宽度，可以为一个长度或“auto”值，不允许使用负值 height 层的高度，可以为一个长度或“auto”值，不允许使用负值 html head title盒子模型/title style #box { /* ID为box的盒子模型 */ width:200px; /* 盒子的宽度为200px */ height:200px; /* 盒子的高度为200px */ border:5px solid #ccc; /* 盒子边框实线各边宽5px */ padding:10px; /* 盒子的4个内填充为10px */ margin:20px; /* 盒子的4个外边距为10px */ } /style /head body div id=box !-- 使用DIV声明一个盒子 --