大巧不工Web前端设计修炼之道——（5）原型模型化

1.布局之道

• 固定布局：以px为单位进行布局
• 流性布局：以%为单位进行布局，加min-width、max-width
• 弹性布局：以em为单位代替px。px是相对于显示器屏幕而言的，而em是相对于当前对象内文本的字体尺寸而言。

1.1基本布局样式属性：
1.单位：1em=16px, 12px = 0.75em , 10px = 0.625em
2.浮动: Align属性、clear属性
3.定位：position，除边界外，一般选择relative。除非所有元素精确定位。

1.2基于网格系统的CSS框架布局
以960像素为例：划分为12列，每列间距20px。

1.3流体布局
将像素转化为100%比。

2.样式就是设计

这一章简介CSS样式，记下一些知识点，不在详述。
1.规划样式文件：global.css（全局样式）、layout.css（结构布局样式）、color.css（色彩样式）、text.css（文字样式）和reset.css（重置框架中的样式）。
2.加上头注释。
3.优先权：
多规则之间的优先级，使用一个4位数字来表示权重，每个选择器的权重决定用哪些样式。

1. 元素的内联样式属性：加1,0,0,0
2. 每个ID选择器（#id）：加0,1,0,0
3. 每个class选择器(.class)、属性选择器([attr=”-“])及伪类(:hover)，加0,0,1,0
4. 每个元素或伪元素(:firstchild)等，加0,0,0,1
5. 其他选择器(如全局选择器*，子选择器>)，加0,0,0,0
6. ！important优先级最高

最后逐位相加数字串，得到最终的特异值，按照从左到右的顺序逐位比较。
比如：

body h2 {color:#fff};//由两个普通元素组成，符合第4条规则，相加为0002
h2{color:#ccc};//只有一个普通元素组成，符合第4条规则，特意值为0001
//采用第一个规则解析，0002>0001

h2.category{color:#fff};//由一个普通元素和一个class选择器组成（3，4），相加为0011
h2{color:#ccc};//第4条，特异值0001
//比较结果0011>0001，采用第一个规则

3.动态交互之美

1.JavaScript代码只出现在.js文件中
2.不在JavaScript中定义css样式
3.HTML元素中不出现onclick等元素，所有行为用绑定的方式来实现

4.设计理念的碰撞与融合

1.PNG透明色应用
2.大菜单：不要分太多级
3.Tab选项卡：导航的最佳实践
4.模态窗口：

• 图像、视频预览
• 注册、登录
• 帮助、提示

5.unobtrusive的web开发：关注web开发的可维护性、可访问性、可搜索性。

• 使用更有语义的HTML标签
• 只将<table>用语表格式的数据
• 避免使用无意义的div、span
• 所以CSS非必须，没有CSS，页面也可以正常访问
• 尽量重用class
• 将css放在外部.css文件中或者style标签中
• js文件写在外部文件中
• 不适用onclick内联方式绑定事件、也不使用JavaScript：void(0)之类的代码