大巧不工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)之類的代碼