网站重构与CSS编程进阶.ppt

网站重构和CSS编程进阶 一、网站重构 Web标准的定义 为什么要使用Web标准 结构、表现和行为 Web标准的定义 Web标准就是结构化的语言(XHTML和XML),解释性语言(CSS)，对象模型(DOM)和脚本语言(ECMAScript)。更形象的理解就是结构，表现和行为相分离。 为什么要使用Web标准 易于协同开发和维护 代码量减少，降低了带宽成本 提高网站易用性和用户体验 与未来浏览器和手持设备兼容 搜索引擎优化(SEO) 结构、表现和行为 二、CSS基础 糟糕的代码和优秀的代码 什么时候使用ID，什么时候使用Class 错误的命名和正确的命名 块级标签和内联标签 浏览器模式和文档类型声明 CSS定义的优先级顺序和继承关系 糟糕的代码和优秀的代码* 糟糕的代码：没有意义的标签，结构和表现部分混杂在一起，不可读。 优秀的代码：具有语义，结构和表现相分离，可读，优雅。 ID和Class* ID：用于标识页面唯一的区块，比如说导航条，正文，版权。 Class：用于可以重用的区块或者定义。 注意：不要滥用ID和Class。 错误的命名和正确的命名 块级标签和内联标签 块级标签需要折行，display默认属性为block，典型如div，h1，ul等；可以设置宽，高； 内联标签不会折行，display默认属性为inline，典型如span，a，strong等；不能设置宽高，但是可以设置行高。 浏览器模式和文档类型声明 两种浏览器模式一种是标准模式（standard mode），另一种是怪异模式（quirks mode）； 标准性文档声明有很多种，一般推荐使用过渡型（transitional）标准。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtml CSS优先级循序和继承关系 优先级： p{} div p{} ment{} #comment{} div#content #container #content{} style=”” 继承关系：子定义会继承父定义，但会覆盖父定义的内容。 三、CSS中的布局 CSS中的盒模型 IE和FF的盒模型解析差异 三种定位机制：普通流、绝对定位和浮动 CSS中的盒模型* IE和FF的盒模型解析差异* IE5.x和怪异模式下的IE6.0与FF的差异 #myBox { width:300px; height:200px; padding:10px; border: 10px solid blue; background-color: red; } IE和FF的盒模型解析差异* IE5.x和怪异模式下的IE6.0与FF的差异 IE和FF的盒模型解析差异 IE5.x和怪异模式下的IE6.0与FF的差异 结论：FF区块实际宽度不是内容的定义宽度(width)，而是内容，填充和边框的宽度总和；IE5.x和怪异模式下的IE6.0实际宽度就是内容部分定义的宽度。 解决方案：使用统一的标准文档声明，不要给区块添加具有指定宽度的填充，而是尝试将填充或空白边添加到父标签或子标签。 IE和FF的盒模型解析差异* IE6.0和7.0与FF标准模式解析差异 IE和FF的盒模型解析差异* IE6.0和7.0与FF标准模式解析差异 IE和FF的盒模型解析差异 IE6.0和7.0与FF标准模式解析差异 结论：当父和子标签垂直叠加时，IE在垂直方向上不会做padding和margin叠加，而FF会；而当父标签padding为0时，FF会把子标签的margin叠加到父标签上面，子标签和父标签之间不在有间距。 解决方案：使用统一的标准文档声明，不要在父、子标签重复定义padding和margin属性。 普通流、绝对定位、和浮动 普通流 默认的定位。各标签在页面上的位置是由标签在html代码中的位置和自身的属性（块级标签或者内联标签）决定的。 普通流、绝对定位、和浮动 相对定位和绝对定位 普通流、绝对定位、和浮动 相对定位和绝对定位 普通流、绝对定位、和浮动 相对定位和绝对定位 特点： 相对定位无论是否移动，元素仍然占据原来的空间； 绝对定位不占据空间，绝对定位的标签位置相对于最近已定位的父标签，如果不存在，则相对于body； IE中如果相对于右(right)和底部(bottom)设置绝对定位，需要确定相对定位的框设置了尺寸。 普通流、绝对定位、和浮动* 浮动 普通流、绝对定位、和浮动* 浮动 普通流、绝对定位、和浮动* 浮动 普通流、绝对定位、和浮动 浮动 特点