1. 重构经验分享
医网技术部 陈俊勇
2012-03-20

2. 你：你在公司是做什么的？
我：哦，网页设计师~~
你：那帮我设计一个xxx吧~~
我：噢，我不做设计的~~
你：那你又叫网页设计师~~
我：……
我：好吧，我现在是前端开发~~
他：那你帮我开发一个小小的功能吧~
我：可我不会那些后台开发语言~~
他：那你又叫开发~~
我：……
我：好吧，简单点，我算是页面制作的吧~~
你：哦？那不是美工做的吗？
我：那是设计师，不叫美工~~
你：那还不是一样，你到底是做什么的？
我：好吧，直接点，我写div + css的~
你：哦，原来是写div + css的，早说嘛~~这个，我懂！
我：……

3. HTML是用来结构化文档 (M)
CSS是用来实现内容的视觉效果 (V)
JavaScript是用来实现用户的交互行为 (C)

4. HTML是用来结构化文档 (M)
CSS是用来实现内容的视觉效果 (V)
JavaScript是用来实现用户的交互行为 (C)

10. 该是什么就用什么

11. 1. 关注结构设计
2. 关注语义
3. 理解block、inline、inline-block
4. 理解嵌套
5. 考虑可访问性、扩展性、复用性

12. 1. 关注结构设计
2. 关注语义
3. 理解block、inline、inline-block
4. 理解嵌套
5. 考虑可访问性、扩展性、复用性

14. 1. 关注结构设计
2. 关注语义
3. 理解block、inline、inline-block
4. 理解嵌套
5. 考虑可访问性、扩展性、复用性

15. 通用文档结构：h1~h6、p
强调： strong、em
引用或者参考：blockquote, q, cite
表格：table(tr, th, th, tbody, colgroup……)
表单：form, fieldset, length, label, input, select, textarea, button
列表：ul(li), ol(li), dl(dt, dd)
媒体：img, object
程序：pre, code, var
通用容器：div, span

16. 1. 关注结构设计
2. 关注语义
3. 理解block、inline、inline-block
4. 理解嵌套
5. 考虑可访问性、扩展性、复用性

17. 1. 仅仅是display:block、inline、inline-block就够了吗？
2. 块格式化上下文( Block formatting context )
3. 行内格式化上下文( Inline formatting context )
4. hasLayout

18. 1. 关注结构设计
2. 关注语义
3. 理解block、inline、inline-block
4. 理解嵌套
5. 考虑可访问性、扩展性、复用性

19. • block与block或inline之间的嵌套
• Inline与inline之间的嵌套
• 必须组合使用的标签之间的嵌套

20. 1. 关注结构设计
2. 关注语义
3. 理解block、inline、inline-block
4. 理解嵌套
5. 考虑可访问性、扩展性、复用性

21. HTML是用来结构化文档 (M)
CSS是用来实现内容的视觉效果 (V)
JavaScript是用来实现用户的交互行为 (C)

22. • CSS： Cascading Style Sheets
• CSS用来做什么：用来描述界面如何呈现，实现丰富的排版和布局
• CSS Hack
• CSS3：更丰富的布局、更精致的UI表现、更生动的动画
• LESS、JSS、SASS……

23. • CSS： Cascading Style Sheets
• CSS用来做什么：用来描述界面如何呈现，实现丰富的排版和布局
• CSS Hack
• CSS3：更丰富的布局、更精致的UI表现、更生动的动画
• LESS、JSS、SASS……

24. • 层叠样式表（英语：Cascading Style Sheets，简写CSS），
• 由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。
• 目前最新版本是CSS2.1，为W3C的候选推荐标准。CSS3现在已被大部分现代浏览器支援，而下一版的CSS4仍在开发过程中。

25. • CSS： Cascading Style Sheets
• CSS用来做什么：用来描述界面如何呈现，实现丰富的排版和布局
• CSS Hack
• CSS3：更丰富的布局、更精致的UI表现、更生动的动画
• LESS、JSS、SASS……

26. • 叠层和继承
• 优先级
• 性能
• 盒子模型
• 格式化
• 布局方式

29. • CSS： Cascading Style Sheets
• CSS用来做什么：用来描述界面如何呈现，实现丰富的排版和布局
• CSS Hack
• CSS3：更丰富的布局、更精致的UI表现、更生动的动画
• LESS、JSS、SASS……

30. • property:value; /* 所有浏览器 */
• property:value9; /* 所有IE浏览器 */
• Property:value!important;
• +property:value; /* IE6、IE7 */
• *property:value; /* IE6、IE7 */
• _property:value; /* IE6 */
• -webkit- /* chrome、Safari */
• -khtml- /* chrome、Safari */
• -moz- /* Firefox */
• -ms- /* MSIE */
• -o- /* Opera */

31. • CSS： Cascading Style Sheets
• CSS用来做什么：用来描述界面如何呈现，实现丰富的排版和布局
• CSS Hack
• CSS3：更丰富的布局、更精致的UI表现、更生动的动画
• LESS、JSS、SASS……

32. • 圆角 border-radius
• 阴影 box-shadow
• 文字阴影 text-shadow
• 变形 transform
• 进渡 transition
• 渐变 gradient
• 动画 animation
• 选择器
:first-child、:only-child、:nth-child(n)、:nth-last-child(n)、
:first-of-type、:last-of-type、:only-of-type、:nth-of-type(n)、:nth-last-of-type(n)

33. • CSS： Cascading Style Sheets
• CSS用来做什么：用来描述界面如何呈现，实现丰富的排版和布局
• CSS Hack
• CSS3：更丰富的布局、更精致的UI表现、更生动的动画
• LESS、JSS、SASS……

35. 能干这么多事，还有其它的吗？……

36. OOCSS

37. HTML5/CSS3

38. 响应式设计
http://mediaqueri.es/

39. 结束了 ？？
性能优化、SEO、数据化运营

40. 这回真的是结束了~
谢谢~