重构经验分享

1,031 views
961 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,031
On SlideShare
0
From Embeds
0
Number of Embeds
275
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

重构经验分享

  1. 1. 重构经验分享 医网技术部 陈俊勇 2012-03-20
  2. 2. 你:你在公司是做什么的?我:哦,网页设计师~~你:那帮我设计一个xxx吧~~我:噢,我不做设计的~~你:那你又叫网页设计师~~我:……我:好吧,我现在是前端开发~~他:那你帮我开发一个小小的功能吧~我:可我不会那些后台开发语言~~他:那你又叫开发~~我:……我:好吧,简单点,我算是页面制作的吧~~你:哦?那不是美工做的吗?我:那是设计师,不叫美工~~你:那还不是一样,你到底是做什么的?我:好吧,直接点,我写div + css的~你:哦,原来是写div + css的,早说嘛~~这个,我懂!我:……
  3. 3. HTML是用来结构化文档 (M)CSS是用来实现内容的视觉效果 (V)JavaScript是用来实现用户的交互行为 (C)
  4. 4. HTML是用来结构化文档 (M)CSS是用来实现内容的视觉效果 (V)JavaScript是用来实现用户的交互行为 (C)
  5. 5. 该是什么就用什么
  6. 6. 1. 关注结构设计2. 关注语义3. 理解block、inline、inline-block4. 理解嵌套5. 考虑可访问性、扩展性、复用性
  7. 7. 1. 关注结构设计2. 关注语义3. 理解block、inline、inline-block4. 理解嵌套5. 考虑可访问性、扩展性、复用性
  8. 8. 1. 关注结构设计2. 关注语义3. 理解block、inline、inline-block4. 理解嵌套5. 考虑可访问性、扩展性、复用性
  9. 9. 通用文档结构: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
  10. 10. 1. 关注结构设计2. 关注语义3. 理解block、inline、inline-block4. 理解嵌套5. 考虑可访问性、扩展性、复用性
  11. 11. 1. 仅仅是display:block、inline、inline-block就够了吗?2. 块格式化上下文( Block formatting context )3. 行内格式化上下文( Inline formatting context )4. hasLayout
  12. 12. 1. 关注结构设计2. 关注语义3. 理解block、inline、inline-block4. 理解嵌套5. 考虑可访问性、扩展性、复用性
  13. 13. • block与block或inline之间的嵌套• Inline与inline之间的嵌套• 必须组合使用的标签之间的嵌套
  14. 14. 1. 关注结构设计2. 关注语义3. 理解block、inline、inline-block4. 理解嵌套5. 考虑可访问性、扩展性、复用性
  15. 15. HTML是用来结构化文档 (M)CSS是用来实现内容的视觉效果 (V)JavaScript是用来实现用户的交互行为 (C)
  16. 16. • CSS: Cascading Style Sheets• CSS用来做什么:用来描述界面如何呈现,实现丰富的排版和布局• CSS Hack• CSS3:更丰富的布局、更精致的UI表现、更生动的动画• LESS、JSS、SASS……
  17. 17. • CSS: Cascading Style Sheets• CSS用来做什么:用来描述界面如何呈现,实现丰富的排版和布局• CSS Hack• CSS3:更丰富的布局、更精致的UI表现、更生动的动画• LESS、JSS、SASS……
  18. 18. • 层叠样式表(英语:Cascading Style Sheets,简写CSS),• 由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。• 目前最新版本是CSS2.1,为W3C的候选推荐标准。CSS3现在已被大部分现代浏览器支援,而下一版的CSS4仍在开发过程中。
  19. 19. • CSS: Cascading Style Sheets• CSS用来做什么:用来描述界面如何呈现,实现丰富的排版和布局• CSS Hack• CSS3:更丰富的布局、更精致的UI表现、更生动的动画• LESS、JSS、SASS……
  20. 20. • 叠层和继承• 优先级• 性能• 盒子模型• 格式化• 布局方式
  21. 21. • CSS: Cascading Style Sheets• CSS用来做什么:用来描述界面如何呈现,实现丰富的排版和布局• CSS Hack• CSS3:更丰富的布局、更精致的UI表现、更生动的动画• LESS、JSS、SASS……
  22. 22. • 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 */
  23. 23. • CSS: Cascading Style Sheets• CSS用来做什么:用来描述界面如何呈现,实现丰富的排版和布局• CSS Hack• CSS3:更丰富的布局、更精致的UI表现、更生动的动画• LESS、JSS、SASS……
  24. 24. • 圆角 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)
  25. 25. • CSS: Cascading Style Sheets• CSS用来做什么:用来描述界面如何呈现,实现丰富的排版和布局• CSS Hack• CSS3:更丰富的布局、更精致的UI表现、更生动的动画• LESS、JSS、SASS……
  26. 26. 能干这么多事,还有其它的吗?……
  27. 27. OOCSS
  28. 28. HTML5/CSS3
  29. 29. 响应式设计http://mediaqueri.es/
  30. 30. 结束了 ??性能优化、SEO、数据化运营
  31. 31. 这回真的是结束了~ 谢谢~

×