超越CSS

1.1 超越CSS簡介⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯3
1.1.1 需要什么樣的工具來開始學習
⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯3
1.1.2 為什么需要超越CSS ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯4
1.1.3 盡情地發(fā)揮創(chuàng)造力⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯8
1.1.4 輔助功能本身就是設(shè)計，而不應(yīng)僅把它當
1.1.4 成一個特性⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯10
1.1.5 向超越CSS進發(fā)⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯14
1.2 超越CSS原則⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯21
1.2.1 不是所有的瀏覽器都顯示相同的設(shè)計
⋯⋯⋯⋯⋯⋯23
1.2.2 運用所有有效的CSS選擇符⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯23
1.2.3 CSS3：展望未來⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯28
1.2.4 運用JavaScript和DOM來彌補CSS的不足
⋯⋯⋯⋯⋯29
1.2.5 避免運用Hacks和濾鏡⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯29
1.2.6 使用富含語義的命名規(guī)范和微型格式
⋯⋯⋯⋯⋯⋯31
1.2.7 分享你的想法，與他人協(xié)作⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯39
1.3 什么使超越CSS變得可能⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯45
1.3.1 意想不到的CSS用途⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯47
1.3.2 瀏覽器分級支持⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯49
1.3.3 發(fā)現(xiàn)，過程，靈感，超越⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯51
1.4 突出內(nèi)容的設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯53
1.4.1 突出內(nèi)容的途徑⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯55
1.4.2 一個典型的沒經(jīng)過優(yōu)化的CSS布局
⋯⋯⋯⋯⋯⋯⋯57
1.4.3 優(yōu)化內(nèi)容順序而不管有還是沒有樣式
⋯⋯⋯⋯⋯⋯58
1.5 語義就是含義⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯63
1.5.1 “CSS 裸體日”⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯63
1.5.2 將含義翻譯成標記：這個標記是正確的
⋯⋯⋯⋯⋯64
1.5.3 內(nèi)容告訴你了什么⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯74
1.5.4 語義的前行⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯74
1.6 標記這個世界⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯77
1.6.1 整個世界是一個列表；每一項都扮演著它
1.6.1 自己的角色⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯77
1.6.2 環(huán)視四座皆列表⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯80
1.6.3 給我寄一張舊金山的hCard ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯84
1.6.4 學會拓寬視野⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯86
1.6.5 從“內(nèi)容”開始工作⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯86
1.7 是時候整理一下你所學的知識了
⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯95
2.1 尋找最佳工作流程⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯99
2.1.1 尋找更好的方式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯99
2.1.2 遵循基于內(nèi)容的過程⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯101
2.2 搜集內(nèi)容⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯105
2.3 使用框架圖來工作⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯107
2.3.1 傳統(tǒng)的框架圖在哪里會失效⋯⋯⋯⋯⋯⋯⋯109
2.3.2 框架圖有商業(yè)價值嗎⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯110
2.3.3 傳統(tǒng)框架圖以及交互腳本⋯⋯⋯⋯⋯⋯⋯⋯⋯111
2.4 使用灰盒方法改進⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯115
2.5 創(chuàng)建靜態(tài)設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯119
2.5.1 更快地通過設(shè)計流程⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯119
2.5.2 把標簽指南加入靜態(tài)設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯⋯120
2.6 使用交互原型⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯123
2.6.1 交互原型使夢想成真⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯123
2.6.2 創(chuàng)建可重用的代碼⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯125
2.6.3 框架圖和原型的模型⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯125
2.6.4 所見即所得：你看到了什么？
⋯⋯⋯⋯⋯⋯⋯126
2.7 遵循交互原型最佳實踐⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯129
2.7.1 選擇用于開發(fā)的瀏覽器⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯129
2.7.2 使用瀏覽器插件⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯129
2.7.3 盡可能少地使用<div>元素⋯⋯⋯⋯⋯⋯⋯⋯132
2.7.4 確保標簽是有效的⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯132
2.7.5 選擇定位優(yōu)先于浮動⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯132
2.7.6 組織CSS ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯134
2.8 過程的實踐⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯139
2.8.1 著眼于組成部分⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯139
2.8.2 編寫分離內(nèi)容的標簽⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯140
2.8.3 用CSS實現(xiàn)靜態(tài)設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯156
2.8.4 構(gòu)建布局⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯157
2.8.5 從body開始⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯158
2.8.6 繼續(xù)向前還是移交⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯164
2.8.7 基本顏色樣式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯164
2.8.8 創(chuàng)建商標⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯165
2.8.9 加上Logo⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯165
2.8.10 導航條樣式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯167
2.8.11 設(shè)計頁腳樣式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯171
2.8.12 理解元素的排版樣式⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯174
2.9 匯總⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯177
3.1 引入基于網(wǎng)格的設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯181
3.1.1 設(shè)計師與網(wǎng)格⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯183
3.1.2 黃金比例和三分之一規(guī)則⋯⋯⋯⋯⋯⋯⋯⋯⋯185
3.1.3 純粹的彈性布局⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯195
3.1.4 合理的網(wǎng)格設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯196
3.2 當今Web設(shè)計中的網(wǎng)格⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯199
3.2.1 減法⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯199
3.2.2 Airbag Industries ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯202
3.2.3 Jeff Croft ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯204
3.2.4 Veerle的博客⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯206
3.3 尋找Web之外的網(wǎng)格⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯209
3.4 為Web設(shè)計帶來新的網(wǎng)格⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯223
3.4.1 打破新聞⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯223
3.4.2 以網(wǎng)格作為指導⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯224
3.4.3 揭穿小秘密⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯227
3.4.4 著迷于新聞手法⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯227
3.4.5 保持你的畫面⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯228
3.5 在意想不到的地方發(fā)現(xiàn)靈感⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯231
3.5.1 把主頁改頭換面⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯231
3.5.2 引入基調(diào)板⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯234
3.5.3 擁有一個設(shè)計剪貼簿⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯236
3.5.4 要獲得界面靈感去看雜志吧⋯⋯⋯⋯⋯⋯⋯⋯241
3.5.5 獲得版式靈感⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯241
3.5.6 重新審視Flash設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯245
3.5.7 使用圖片與相片⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯246
3.6 精美的藝術(shù)活動⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯253
3.6.1 設(shè)計不僅僅是創(chuàng)建引人注目的視覺效果
⋯⋯⋯253
3.6.2 不要把焦點放在技術(shù)上⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯254
3.6.3 提升基調(diào)⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯257
3.6.4 尋找不同觀點⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯259
3.6.5 帶著目標剪貼⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯263
3.7 Web設(shè)計的美術(shù)⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯265
4.1 卓越的CSS ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯271
4.1.1 絕對定位⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯272
4.1.2 相對定位⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯285
4.1.3 浮動的創(chuàng)意⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯291
4.1.4 創(chuàng)建側(cè)邊欄⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯296
4.1.5 結(jié)合多種技術(shù)⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯299
4.2 CSS3（三倍好運） ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯311
4.2.1 各部分的匯總⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯311
4.2.2 開發(fā)新的標準⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯313
4.2.3 回到未來⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯314
4.2.4 使用CSS3選擇符模塊進行設(shè)計⋯⋯⋯⋯⋯⋯⋯314
4.2.5 使用斑馬紋提高可讀性⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯315
4.2.6 使用背景和邊框模塊進行設(shè)計⋯⋯⋯⋯⋯⋯⋯318
4.2.7 使用多幅背景圖片進行設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯323
4.2.8 設(shè)計多欄布局⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯333
4.2.9 使用多欄布局模塊⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯339
4.3 高級布局⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯343
4.3.1 回到網(wǎng)格（Grid） ⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯344
4.3.2 使用高級布局模塊進行設(shè)計⋯⋯⋯⋯⋯⋯⋯⋯349
4.4 結(jié)束語⋯