网站重构和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）标准。,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)设置绝对定位，需要确定相对定位的框设置了尺寸。,普通流、绝对定位、和浮动*,浮动,普通流、绝对定位、和浮动*,浮动,普通流、绝对定位、和浮动*,浮动,普通流、绝对定位、和浮动,浮动特点：当元素浮动时，它将不再处于文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框。-正文的图文混排块级元素float以后就没有默认的100%宽度。-非常漂亮的纯CSS阴影效果因为浮动元素脱离了文档流，所以包含图片和文本的div不占据空间，所以要在这个div的某个地方清除浮动*。,四、实践,超链接样式分页圆角框导航条滑动门技术图像阴影和图像映射表格和表单图文混排,超链接样式*,背景图结合填充设置为块级标签获得宽高属性用文本缩进隐藏文字链接链接伪类实现背景替换,分页样式*,D分页样式,圆角框,简单的圆角框,圆角框*,高度自适应的圆角框,圆角框,高度和宽度都自适应的圆角框,导航条,垂直导航条AutosFinanceGamesGeoCitiesGroups,导航条*,水平导航条生活休闲文化视线心理测试家居家饰饮食男女科技数码视频大赏写真美图,导航条,导航条变体,滑动门技术*,图像阴影和图像映射*,最简单的图像阴影原理：将一个大的阴影图像作为一个容器div的背景，然后用负值的空白边(margin)偏移图像，从而显示出阴影。,图像阴影和图像映射*,照片相框效果的图像阴影原理：给图像加上边框(border)和填充(padding)。,图像阴影和图像映射*,纯CSS的图像阴影原理：分别给容器div，img，a设置边框，然后设置相对定位，向上和向左各便宜一个像素。通过同一个边框颜色的渐变形成阴影。,图像阴影和图像映射*,CSS的图像映射原理：将包含图像的容器div相对定位，然后设置a为块级标签，并将其绝对定位，设置其定位的偏移量(例如top和left)到要包含热点位置的图像上。为了修正IE和Opera浏览器，设置背景颜色并把a标签的透明度设置为1。,图像阴影和图像映射*,有提示的CSS的图像映射()原理：在a中增加两个span，一个显示黑边框，一个显示白边框加上a的黄色边框。当鼠标滑过(hover)a时显示a的内容。,表格和表单*,数据表格表格的作用就是用来展现二维数据的。,表格和表单,数据表格captionthead,tbody,tfootth,表格和表单*,表单和表格table类似，一个展现二维数据，一个是收集二维的数据(键值对)，推荐使用table来组织表单。当然其他标签也可以，比如p和label的组合。,图文混排*,浮动的图文混排优点：简单，方便。缺点：需要清除浮动。,图文混排*,绝对定位的图文混排优点：定位准确，重用性高。缺点：复杂，容易跟不上需求变化。,实践总结,区块之间应该独立*准确的使用ID和Class使用div和span要赋给有意义的名称不要过度使用没有语义的div和span*先编写html代码，然后才是CSS,五、编程规范*,CSS命名规范Basic.css解析,六、浏览器BUG和CSS调试,常见的浏览器bug CSS调试技巧,常见的浏览器bug*,双空白边(Double-margin)浮动bugIE6重复字符bug,CSS调试技巧,增加border增加带颜色的背景(background),七、更深入的话题,CSS FrameworkCSS FilterCSS 2,The End,参考书目：网站重构精通CSS-高级Web解决方案,
