Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

重构 这一路走来

1,335 views

Published on

  • ppt的字体表示很蛋疼
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

重构 这一路走来

  1. 1. 重 —— 一路走来构 这 ——Mr.Fly
  2. 2. 学习 趣兴趣兴 探寻探寻 模仿模仿
  3. 3. 累积 学以致用学以致用 熟练熟练 淀沉淀沉
  4. 4. 思 考 什么要 写?为 这样什么要 写?为 这样 有没有 的 法?别 办有没有 的 法?别 办 原因是什么?问题原因是什么?问题
  5. 5. 步进 自己的总结 经验自己的总结 经验 学 人的成果习别学 人的成果习别 探 更新的技寻 术探 更新的技寻 术 1+1>21+1>2
  6. 6. 然 后 呢 稿高保真 原设计 还稿高保真 原设计 还 写出更好的代码写出更好的代码 写出更高效的代码写出更高效的代码
  7. 7. 我 可以做得更好们还
  8. 8. 我 做的是什么?们 网 !页 网 是用来干什么的?页 提供 用 来 体 !给 户 阅读 验 那我 怎么来提高用 体 舒适度?们 户 验 用 都 心什么?户 关 网站打 的速度开 网 的 效果页 视觉 网 的交互性能页 网 的易用性页 ……
  9. 9. 排除外部相 因素关 从我 角度出们 发 在之前的基 上我 能做什么?础 们 --- 准标 + 高效 + 增强渐进 ... --- css sprites+ 片整合、图 压缩 ... --- 模 化块 结构 ... --- css media query...  代 写得更好码  片 化图 优  化代 ,降低 成本简 码 维护  适 多 的需求应 设备
  10. 10. HOW?
  11. 11. 如何把 html 写得更好?  整洁  范规  化语义
  12. 12. 整者序也 洁者 也净 整洁
  13. 13. 可 性好读 适当的 ,能提高代 的可 性缩进 码 读
  14. 14. 可 性好读 去除无用的,繁 的杂 结构
  15. 15. 规则 范围 范规
  16. 16. 写书 规则 嵌套规则 1.完整的结构 2. 小写标签 3.正 的确 关闭标签 4.字符转义 1.inlie 2.block
  17. 17. 嵌套规则 1.block 元素能包含 block 和 inline 元素 2.inline 只能包含 inline 元素 3.hn p dt 不能包含 block 元素 4. 行 束的 无法包含其他 ,如单 结 标签 标签 img input br 5.form a label button 无法包含自己 6.button 只能包含文字和 片图 7.select table 类等只能包含特定的子元素 嵌套 速 文档:规则 查 http://www.cssforest.org/wiki/index.php?n=Cssforest.Xhtmldtd
  18. 18. XHMTL 嵌套需要按照一定的 行,自己去随便使用看标签 规则进 上去没影响,但是 往往 致各 各 的 生。这样 导 种 样 问题产
  19. 19. 化语义 无语义标签 有语义标签 性 的,比如结构 质 div span 内容性 的,比如质 p a hn input ul 拒绝 divitis spanitis 的出现
  20. 20. 各司其职 文本性 的质 如 p strgong hn del sup sub ins …… 列表性 的质 如 ul li ol dl dt dd …… 表 的单 如 form input select textera botton label  …… 其他 片 接 媒体 ……图 链
  21. 21. 上帝 了你一双黑色的眼睛, 用来翻白眼。给 请别
  22. 22. 如何把 CSS 写得更好?  良好的命名 范规  模 化块 css 管理  高效的写作方式  css 化和优 压缩
  23. 23. 良好的命名 范规 位置 内容 如: top 、 header 、 main 、 footer 、 sider…… 如: menu 、 nav 、 news 、 product 、 tips…… 功能 如: reel_box 、 scroll_images 、 btn_submit 、 pop_box……
  24. 24. 1.中国式命名法!尤其 是 写的还 缩 ··· 2. ID 与 Class 3.仁者 仁智者 智。见 见
  25. 25. 模 化的块 css 管理 1. 稿 行分析 分不同的模对设计 进 划 块 2. 相同的模 行分析其 微的差对 块进 细 别 3. 模 从全局方面 行合理命名对 块 进
  26. 26. 1 1 2 2 3 4
  27. 27. 1.商品 片区域图 2.商品信息区域 3.商品 系信息联 4.商品功能按 区域钮 分析 pro_gallery pro_info pro_contact pro_event 需要还 .clearfix .f_l .f_r …… <div class="pro_detail clearfix"> <div class="pro_gallery f_l"></div> <div class="pro_sider clearfix f_r"> <div class="pro_info f_l"></div> <div class="pro_contact f_r"></div> <div class="pro_event"></div> </div> </div> .pro_datail{ ...} .pro_gallery{...} .pro_sider{...} .pro_info{...} .pro_info.f_l{...} .pro_contact{...} .pro_event{...}
  28. 28. 高效的 写方式书 1.Reset 2. 写简 3.善用 器选择 4.css hack 5.适当的注释
  29. 29. CSS 化和优 压缩 1. 化 式属性优 样 值 2.使用 <link> 入外部 式表调 样 3.慎用表 式达 4.代 布 行码发 时进 压缩
  30. 30. .class{ font-size:12px; color:#ff0000; font-family:Microsoft YaHei;line-height:24px; border:0;} .class{ font:12px/24px Microsoft YaHei; color:red; border:none;} *{margin:0;padding:0;} body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} ol,ul{margin:0; padding:0;list-style:none;} img { border:none; } <link rel="stylesheet" type="text/css" href="style.css" media="screen and (min- width: 400px)"> http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/ CSS HACK : http://centricle.com/ref/css/filters/ csstidy: http://www.css88.com/tool/csstidy/?lang=cn
  31. 31. 网 片如何更 化?页图 优  切片技巧  片图 压缩  片合并图  延 加时 载
  32. 32. 能省 省则 切片技巧 片分类 片命名 只取所图 图 需 片合并图 同类型的多 片我 可以通 整张图 们 过 合成一 片,然后再使用张图 css 定 位 延 加时 载 多 猫 首屏概念图杀 片的图 压缩 明白 jpg 、 png8 、 png24 、 gif 等 网 常用 片格式的不同特点页 图
  33. 33. bg2css: http://www.cssforest.org/blog/index.php?id=133 展 :扩 阅读 http://blog.bingo929.com/css-sprites-css-techniques-tools- tutorials.html
  34. 34. Demo
  35. 35. = ? <div class="event_btns"> <a href="#" class="join"> 立即参加活动 </a> <a href="#" class="follow"> 注活关 动 </a> </div> .join,.follow{ ...} .join{...} .follow{...} 代 可重 性不高,无法再次利用码 复 而且 片需要更多图 片尺寸:图 170*37 145*37 片数图 2 大小: 1.48kb
  36. 36. <div class="event_btns btn_style_red_s"> <a href="#"><span><em> 立即参加活动 </em></span></a> <a href="#"><span><em> 注活关 动 </em></span></a> </div> .btn_style_red_s a,.btn_style_red_s a span,.btn_style_red_s a em{...} .btn_style_red_s a{...} .btn_style_red_s a span{...} .btn_style_red_s a span em{...} ,需要更多的代结构复杂 码 才可实现 片尺寸:图 5*37*3 片数:图 3 大小: 1.37KB 片尺寸:图 5*111 片数:图 1 大小: 881 字节 合并
  37. 37. <div class="event_btns btn_style_red"> <a href="#"><span> 立即参加活动 </span></a> <a href="#"><span> 注活关 动 </span></a> </div> .btn_style_red a,.btn_style_red a span{...} .btn_style_red a{...} .btn_style_red a span{...} 化程度高,代 可重结构优 码 性高复 , 但是…… 片尺寸:图 125*37 片数图 :1 大小: 929 字节
  38. 38. GIF 与 PNG 都是水平 描,也就是 ,水平重 色比垂直重 色的 片更小扫 说 复颜 复颜 图 片尺寸:图 250*37 片数图 :1 大小: 766 字节 率:压缩 18%
  39. 39. <div class="event_btns btn_style_red"> <a href="#"><span> 立即参加活动 </span></a> <a href="#"><span> 注活关 动 </span></a> </div> .event_btns {font-size:0;} .event_btns *{ font-size:12px;} .btn_style_red a,.btn_style_red a span{ display:inline-block; *display:inline; zoom:1; color:#fff; text-shadow:0 1px 1px #000; line-height:37px; background:url(../images/btn_large.png) no-repeat;} .btn_style_red a{ padding-left:49px;margin:0 10px;} .btn_style_red a span{ background-position:right 0; padding-right:49px;}
  40. 40. 精益求精
  41. 41. 永无止境
  42. 42. 谢谢 THE END

×