重构经验分享
- 1. 重构经验分享
医网技术部 陈俊勇
2012-03-20
- 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
- 19. • block与block或inline之间的嵌套
• Inline与inline之间的嵌套
• 必须组合使用的标签之间的嵌套
- 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……