《网站重构和CSS编程进阶幻灯片课件》由会员分享，可在线阅读，更多相关《网站重构和CSS编程进阶幻灯片课件（55页珍藏版）》请在金锄头文库上搜索。
1、网站重构和CSS编程进阶,凤凰网技术中心 应用管理部,一、网站重构,Web标准的定义 为什么要使用Web标准 结构、表现和行为,Web标准的定义,Web标准就是结构化的语言(XHTML和XML),解释性语言(CSS)，对象模型(DOM)和脚本语言(ECMAScript)。更形象的理解就是结构，表现和行为相分离。,为什么要使用Web标准,易于协同开发和维护 代码量减少，降低了带宽成本 提高网站易用性和用户体验 与未来浏览器和手持设备兼容 搜索引擎优化(SEO),二、CSS基础,糟糕的代码和优秀的代码 什么时候使用ID，什么时候使用Class 错误的命名和正确的命名 块级标签和内联标签 浏览器模式
2、和文档类型声明 CSS定义的优先级顺序和继承关系,糟糕的代码和优秀的代码*,糟糕的代码：没有意义的标签，结构和表现部分混杂在一起，不可读。 优秀的代码：具有语义，结构和表现相分离，可读，优雅。,ID和Class*,ID：用于标识页面唯一的区块，比如说导航条，正文，版权。 Class：用于可以重用的区块或者定义。 注意：不要滥用ID和Class。,错误的命名和正确的命名,块级标签和内联标签,块级标签需要折行，display默认属性为block，典型如div，h1，ul等；可以设置宽，高； 内联标签不会折行，display默认属性为inline，典型如span，a，strong等；不能设置宽高，但
3、是可以设置行高。,浏览器模式和文档类型声明,两种浏览器模式一种是标准模式（standard mode），另一种是怪异模式（quirks mode）； 标准性文档声明有很多种，一般推荐使用过渡型（transitional）标准。 ,CSS优先级循序和继承关系,优先级： p div p ment #comment div#content #container #content style=” 继承关系：子定义会继承父定义，但会覆盖父定义的内容。,三、CSS中的布局,CSS中的盒模型 IE和FF的盒模型解析差异 三种定位机制：普通流、绝对定位和浮动,CSS中的盒模型*,IE和FF的盒模型解析差异*,
4、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实际宽度就是内容部分定义的宽度。 解决方案：使用统一的标准文档声明，不要给区块添加
5、具有指定宽度的填充，而是尝试将填充或空白边添加到父标签或子标签。,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属性。,普通流、绝对定位、和
6、浮动,普通流 默认的定位。各标签在页面上的位置是由标签在html代码中的位置和自身的属性（块级标签或者内联标签）决定的。,普通流、绝对定位、和浮动,相对定位和绝对定位,普通流、绝对定位、和浮动,相对定位和绝对定位,普通流、绝对定位、和浮动,相对定位和绝对定位 特点： 相对定位无论是否移动，元素仍然占据原来的空间； 绝对定位不占据空间，绝对定位的标签位置相对于最近已定位的父标签，如果不存在，则相对于body； IE中如果相对于右(right)和底部(bottom)设置绝对定位，需要确定相对定位的框设置了尺寸。,普通流、绝对定位、和浮动*,浮动,普通流、绝对定位、和浮动*,浮动,普通流、绝对定位、
7、和浮动*,浮动,普通流、绝对定位、和浮动,浮动 特点： 当元素浮动时，它将不再处于文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框。-正文的图文混排 块级元素float以后就没有默认的100%宽度。-非常漂亮的纯CSS阴影效果 因为浮动元素脱离了文档流，所以包含图片和文本的div不占据空间，所以要在这个div的某个地方清除浮动*。,四、实践,超链接样式 分页 圆角框 导航条 滑动门技术 图像阴影和图像映射 表格和表单 图文混排,超链接样式*,背景图结合填充 设置为块级标签获得宽高属性 用文本缩进隐藏文字链接 链接伪类实现背景替换,分页样式*,D分页样式,圆角框,简单的圆角框,圆角框*,
8、高度自适应的圆角框,圆角框,高度和宽度都自适应的圆角框,导航条,垂直导航条 Autos Finance Games GeoCities Groups ,导航条*,水平导航条 生活休闲 文化视线 心理测试 家居家饰 饮食男女 科技数码 视频大赏 写真美图 ,导航条,导航条变体,滑动门技术*,图像阴影和图像映射*,最简单的图像阴影 原理：将一个大的阴影图像作为一个容器div的背景，然后用负值的空白边(margin)偏移图像，从而显示出阴影。,图像阴影和图像映射*,照片相框效果的图像阴影 原理：给图像加上边框(border)和填充(padding)。,图像阴影和图像映射*,纯CSS的图像阴影 原理：
9、分别给容器div，img，a设置边框，然后设置相对定位，向上和向左各便宜一个像素。通过同一个边框颜色的渐变形成阴影。,图像阴影和图像映射*,CSS的图像映射 原理：将包含图像的容器div相对定位，然后设置a为块级标签，并将其绝对定位，设置其定位的偏移量(例如top和left)到要包含热点位置的图像上。为了修正IE和Opera浏览器，设置背景颜色并把a标签的透明度设置为1。,图像阴影和图像映射*,有提示的CSS的图像映射() 原理：在a中增加两个span，一个显示黑边框，一个显示白边框加上a的黄色边框。当鼠标滑过(hover)a时显示a的内容。 ,表格和表单*,数据表格 表格的作用就是用来展现二
10、维数据的。,表格和表单,数据表格 caption thead,tbody,tfoot th,表格和表单*,表单 和表格table类似，一个展现二维数据，一个是收集二维的数据(键值对)，推荐使用table来组织表单。当然其他标签也可以，比如p和label的组合。,图文混排*,浮动的图文混排 优点：简单，方便。 缺点：需要清除浮动。,图文混排*,绝对定位的图文混排 优点：定位准确，重用性高。 缺点：复杂，容易跟不上需求变化。,实践总结,区块之间应该独立* 准确的使用ID和Class 使用div和span要赋给有意义的名称 不要过度使用没有语义的div和span* 先编写html代码，然后才是CSS,五、编程规范*,CSS命名规范 Basic.css解析,六、浏览器BUG和CSS调试,常见的浏览器bug CSS调试技巧,常见的浏览器bug *,双空白边(Double-margin)浮动bug IE6重复字符bug,CSS调试技巧,增加border 增加带颜色的背景(background),七、更深入的话题,CSS Framework CSS Filter CSS 2,The End,参考书目： 网站重构 精通CSS-高级Web解决方案,
