CSS高效開發(fā)實(shí)戰(zhàn)：CSS 3、LESS、SASS、Bootstrap、Foundation

第一篇　揭開CSS 3的面紗
第1章 CSS 3與現(xiàn)代Web標(biāo)準(zhǔn) 2
1．1 未來Web標(biāo)準(zhǔn)的發(fā)展 2
1．1．1 “去Adobe”化 2
1．1．2 基礎(chǔ)功能集成 3
1．1．3 客戶端執(zhí)行更多的邏輯和
渲染任務(wù) 3
1．1．4 適應(yīng)移動(dòng)設(shè)備的發(fā)展 3
1．2 什么是CSS 3 3
1．3 CSS 3的特性 4
1．3．1 圓角 4
1．3．2 陰影 4
1．3．3 漸變 5
1．3．4 變換 5
1．3．5 動(dòng)畫 6
1．3．6 媒介查詢 6
1．4 檢測(cè)瀏覽器是否支持CSS 3 7
1．4．1 使用Modernizr檢測(cè)
支持CSS 3 7
1．4．2 支持CSS 3的瀏覽器 8
1．5 用CSS 3實(shí)現(xiàn)的優(yōu)秀網(wǎng)頁 9
1．6 小結(jié) 10
第2章　溫故知新――HTML、
CSS基礎(chǔ) 11
2．1 W3C標(biāo)準(zhǔn)、HTML語言和CSS 11
2．1．1 W3C組織與W3C標(biāo)準(zhǔn) 11
2．1．2 什么是HTML 12
2．1．3 什么是CSS 13
2．1．4 HTML+CSS之最佳拍檔 13
2．2 不可不知的CSS盒子模型 14
2．3 跨瀏覽器的CSS 15
2．4 理解瀏覽器的屬性前綴 16
2．4．1 常用的屬性前綴 16
2．4．2 屬性前綴的排序 17
2．5 揭開浮動(dòng)布局的秘密 17
2．5．1 浮動(dòng)導(dǎo)致的布局變動(dòng) 17
2．5．2 清除浮動(dòng) 20
2．6 看穿CSS的定位技術(shù) 21
2．6．1 相對(duì)定位技術(shù)與實(shí)戰(zhàn) 21
2．6．2 絕對(duì)定位技術(shù)與實(shí)戰(zhàn) 22
2．7 小結(jié) 24
第3章　使用CSS選擇器讓樣式
表更健壯 25
3．1 基礎(chǔ)選擇器 25
3．1．1 標(biāo)簽選擇器 25
3．1．2 類選擇器 26
3．1．3 id選擇器 27
3．1．4 通配符選擇器 27
3．1．5 子元素選擇器 28
3．1．6 后代元素選擇器 28
3．1．7 相鄰元素選擇器 29
3．1．8 屬性選擇器 30
3．1．9 組選擇器 30
3．1．10 復(fù)合選擇器 31
3．2 偽類選擇器 32
3．2．1 結(jié)構(gòu)化偽類 32
3．2．2 目標(biāo)偽類：target 39
3．2．3 狀態(tài)偽類 39
3．2．4 否定偽類：not(S) 40
3．3 實(shí)戰(zhàn)演練――選擇器 41
3．3．1 偽類選擇器的實(shí)戰(zhàn)――
新聞聚合類網(wǎng)頁 41
3．3．2 基礎(chǔ)選擇器的組合實(shí)
戰(zhàn)――新聞聚合類網(wǎng)頁 43
3．4 小結(jié) 44
第4章 設(shè)計(jì)更炫目的字體 45
4．1 添加和使用自定義字體 45
4．1．1 傳統(tǒng)的字體定義 45
4．1．2 個(gè)性化的字體定義 46
4．1．3 個(gè)性化的字體圖標(biāo) 46
4．2 使用反射讓文字倒映 47
4．2．1 反射的基本語法 47
4．2．2 變幻多端的反射效果實(shí)例 48
4．3 字體陰影――光暈、浮雕、投影
效果 49
4．4 字體描邊 50
4．5 字體分欄――讓網(wǎng)頁像報(bào)紙一樣
分欄排版 51
4．6 實(shí)戰(zhàn)演練――處理字體溢出和破字 53
4．7 小結(jié) 54
第5章 背景和顏色 55
5．1 設(shè)定背景圖的大小 55
5．2 利用圖層疊加實(shí)現(xiàn)多背景 57
5．3 使用圖片背景的origin和clip屬性 58
5．3．1 background-origin屬性 58
5．3．2 background-clip屬性 59
5．4 顏色模式 60
5．4．1 RGBA模式 60
5．4．2 HSLA模式 61
5．5 透明顏色 62
5．6 語法糖――currentColor屬性 63
5．7 漸變――放棄圖片的首選良方 63
5．7．1 線性漸變 63
5．7．2 放射漸變 65
5．8 實(shí)戰(zhàn)演練――漸變效果 67
5．8．1 帶有立體凸起效果的按鈕 67
5．8．2 構(gòu)造尺寸更靈活的背景 68
5．8．3 使用放射漸變制作光影
效果 68
5．9 小結(jié) 69
第6章 更個(gè)性的邊框 71
6．1 圓角邊框 71
6．1．1 圓角邊框的基本用法 71
6．1．2 使用百分比作為單位 72
6．1．3 設(shè)置不同弧度的圓角 73
6．2 邊框陰影 73
6．2．1 內(nèi)外陰影 74
6．2．2 偏移量 75
6．2．3 陰影尺寸 76
6．2．4 模糊距離 76
6．3 圖片邊框――讓圖片環(huán)繞在元素
周圍 77
6．4 通過resize屬性來改變輸入框的
大小 79
6．5 實(shí)戰(zhàn)演練――CSS 3邊框效果 80
6．5．1 邊框圓角在Bootstrap和
淘寶網(wǎng)中的應(yīng)用 80
6．5．2 邊框陰影在蘋果官網(wǎng)中
的應(yīng)用 80
6．6 小結(jié) 81
第7章 變換和動(dòng)畫 83
7．1 CSS 3的變換類型 83
7．1．1 rotate旋轉(zhuǎn)變換 83
7．1．2 skew扭曲變換 86
7．1．3 scale比例縮放 86
7．1．4 translate位移變換 86
7．1．5 transform小結(jié) 87
7．2 使用transition制作交互動(dòng)畫 87
7．3 使用@keyframes制作動(dòng)畫 89
7．3．1 @keyframes的基本語法 89
7．3．2 用@keyframes制作循環(huán)
動(dòng)畫 90
7．3．3 @keyframes小結(jié) 91
7．4 實(shí)戰(zhàn)演練――結(jié)合變換制作3D
旋轉(zhuǎn)卡片 91
7．5 可參考的CSS動(dòng)畫資源 92
7．5．1 Hover．css――鼠標(biāo)hover
動(dòng)畫 92
7．5．2 iHover――hover動(dòng)畫類庫 93
7．5．3 CSS 3和JavaScript的結(jié)合 94
7．6 小結(jié) 94
第8章 媒介查詢和響應(yīng)式設(shè)計(jì) 95
8．1 媒介類型=各種瀏覽終端 95
8．2 認(rèn)識(shí)響應(yīng)式網(wǎng)頁設(shè)計(jì) 96
8．3 媒介查詢的基本語法 98
8．4 設(shè)備 99
8．4．1 常見設(shè)備的寬度和高度 99
8．4．2 檢測(cè)設(shè)備翻轉(zhuǎn) 100
8．5 實(shí)戰(zhàn)演練――應(yīng)用媒介查詢制作
響應(yīng)式導(dǎo)航欄 101
8．6 小結(jié) 103
第9章　更簡(jiǎn)便的布局――彈性盒子 104
9．1 認(rèn)識(shí)彈性盒子 104
9．2 彈性盒子的語法 105
9．3 操作元素 106
9．3．1 控制子元素的方向 107
9．3．2 控制元素對(duì)齊 108
9．3．3 控制元素顯示順序 109
9．4 實(shí)戰(zhàn)演練――用彈性盒子設(shè)計(jì)
閱讀APP 110
9．5 小結(jié) 113
第10章 CSS常用工具 114
10．1 使用Prefix free處理CSS 3
跨瀏覽器兼容 114
10．2 應(yīng)用Normalize統(tǒng)一不同瀏覽
器下的樣式 115
10．3 應(yīng)用Grunt進(jìn)行CSS壓縮 116
10．4 小結(jié) 119
第二篇　使用CSS 3框架進(jìn)行高效開發(fā)
第11章 流行的CSS布局設(shè)計(jì) 122
11．1 固定布局 122
11．1．1 960的秘密 123
11．1．2 定義列寬 123
11．1．3 運(yùn)用CSS實(shí)現(xiàn)固定列寬
的柵格 124
11．1．4 實(shí)戰(zhàn)演練――運(yùn)用960gs實(shí)
現(xiàn)固定布局的新聞頁面 127
11．2 流式布局 130
11．2．1 計(jì)算列百分比 130
11．2．2 使圖片更加靈活 132
11．2．3 定義最大/最小寬度 133
11．2．4 實(shí)戰(zhàn)演練――實(shí)現(xiàn)一個(gè)
流式布局的新聞頁面 133
11．3 響應(yīng)式布局 137
11．3．1 使用媒介查詢 137
11．3．2 實(shí)戰(zhàn)演練――實(shí)現(xiàn)一個(gè)
響應(yīng)式布局的新聞頁面 139
11．4 小結(jié) 143
第12章 Bootstrap框架實(shí)戰(zhàn) 144
12．1 認(rèn)識(shí)Bootstrap 144
12．1．1 初識(shí)Bootstrap 144
12．1．2 Bootstrap為何如此流行 145
12．1．3 Bootstrap的版本發(fā)展 146
12．2 Bootstrap入門 146
12．2．1 在自己的項(xiàng)目中引入
Bootstrap 147
12．2．2 添加Bootstrap的class
實(shí)現(xiàn)基本樣式 147
12．2．3 調(diào)用Bootstrap的通用
組件 148
12．2．4 添加JavaScript動(dòng)態(tài)效果 149
12．3 Bootstrap的柵格系統(tǒng) 150
12．3．1 固定布局的柵格系統(tǒng) 150
12．3．2 流式布局的柵格系統(tǒng) 151
12．3．3 響應(yīng)式布局的柵格系統(tǒng) 151
12．4 使用Bootstrap的基本樣式 154
12．4．1 字體排版 154
12．4．2 表格 155
12．4．3 表單 158
12．4．4 按鈕 161
12．4．5 圖片 163
12．4．6 響應(yīng)式工具 164
12．4．7 工具類 165
12．5 使用Bootstrap的組件 166
12．5．1 下拉菜單 166
12．5．2 按鈕組 167
12．5．3 input控件組 168
12．5．4 導(dǎo)航 169
12．5．5 列表組 173
12．5．6 分頁 174
12．5．7 標(biāo)簽與Badge 175
12．5．8 縮略圖 176
12．5．9 面板 178
12．5．10 進(jìn)度條 179
12．6 Bootstrap中的JavaScript特效 180
12．6．1 模態(tài)對(duì)話框 180
12．6．2 標(biāo)簽頁切換 182
12．6．3 Tooltip 183
12．6．4 彈出框 183
12．6．5 提示信息 184
12．6．6 按鈕 184
12．6．7 折疊 186
12．6．8 幻燈片 187
12．7 定制Bootstrap 188
12．7．1 在官方網(wǎng)站進(jìn)行Bootstrap
的定制 188
12．7．2 修改源代碼定制
Bootstrap 190
12．8 其他Bootstrap資源 192
12．9 小結(jié) 194
第13章 Foundation框架實(shí)戰(zhàn) 195
13．1 認(rèn)識(shí)Foundation 195
13．2 Foundation的安裝和使用 196
13．2．1 傳統(tǒng)方式的下載安裝 197
13．2．2 使用Compass進(jìn)行
Foundation開發(fā) 198
13．2．3 在Rails應(yīng)用中引入
Foundation 199
13．3 使用Foundation柵格系統(tǒng) 199
13．3．1 基本柵格系統(tǒng) 199
13．3．2 塊網(wǎng)格（Block Grid） 200
13．4 Foundation基本樣式 201
13．4．1 標(biāo)題和段落 201
13．4．2 列表 202
13．4．3 按鈕 204
13．4．4 面板 206
13．4．5 縮略圖 207
13．4．6 視頻 207
13．4．7 可見性 208
13．5 導(dǎo)航系統(tǒng) 208
13．5．1 面包屑導(dǎo)航 209
13．5．2 側(cè)邊欄導(dǎo)航 209
13．5．3 頭部導(dǎo)航 210
13．5．4 子導(dǎo)航 212
13．6 Foundation中的JavaScript特效 212
13．6．1 幻燈片 212
13．6．2 Clearing lightboxes 214
13．6．3 彈出層顯示 215
13．6．4 長(zhǎng)頁面滾動(dòng)效果 216
13．6．5 其他特效 216
13．7 定制Foundation 218
13．7．1 在官方網(wǎng)站進(jìn)行定制 219
13．7．2 通過配置文件進(jìn)行定制 219
13．8 小結(jié) 220
第14章 LESS和SASS 222
14．1 CSS的缺陷 222
14．1．1 法定義變量 222
14．1．2 重復(fù)代碼 223
14．1．3 計(jì)算問題 223
14．1．4 作用域和命名空間 223
14．1．5 CSS缺陷總結(jié) 224
14．2 LESS 其實(shí)更多 224
14．2．1 LESS介紹 224
14．2．2 LESS使用基礎(chǔ) 225
14．2．3 使用變量和操作符 225
14．2．4 使用Mixin混入 226
14．2．5 內(nèi)嵌規(guī)則 227
14．2．6 運(yùn)算 228
14．2．7 LESS總結(jié) 228
14．3 使用SASS 228
14．3．1 SASS介紹 228
14．3．2 SASS安裝和使用 229
14．3．3 使用變量 229
14．3．4 計(jì)算 230
14．3．5 使用@import導(dǎo)入 230
14．3．6 使用@extend繼承 230
14．3．7 使用@mixin混入 231
14．3．8 使用@function定義函數(shù) 231
14．3．9 控制語句 231
14．3．10 SASS總結(jié) 232
14．4 使用SASS的擴(kuò)展庫Compass 232
14．4．1 CSS 3模塊 233
14．4．2 Reset模塊 235
14．4．3 Utilities模塊 235
14．4．4 Helpers模塊 236
14．4．5 Compass總結(jié) 237
14．5 小結(jié) 237
第15章 其他CSS框架簡(jiǎn)介 238
15．1 輕量級(jí)框架代表――Pure CSS 238
15．2 手機(jī)頁面UI框架――Ratchet
框架 239
15．3 優(yōu)秀的國產(chǎn)CSS框架 240
15．3．1 阿里巴巴的Alice框架 240
15．3．2 網(wǎng)易的NEC 241
15．3．3 百度的GMU框架 242
15．3．4 渴切 243
15．3．5 用于中文排版的Typo．css
243
15．4 小結(jié) 245
第三篇　CSS實(shí)戰(zhàn)項(xiàng)目
第16章　傳統(tǒng)DIV+CSS設(shè)計(jì)的
視頻網(wǎng)站 248
16．1 網(wǎng)站的頁面效果圖分析 248
16．1．1 頁面頭部和頁腳分析 250
16．1．2 首頁主體內(nèi)容分析 250
16．1．3 內(nèi)頁主體內(nèi)容分析 252
16．2 網(wǎng)站的布局規(guī)劃 253
16．2．1 頁面布局規(guī)劃 253
16．2．2 切割首頁及導(dǎo)出圖片 253
16．2．3 切割內(nèi)頁及導(dǎo)出圖片 254
16．3 網(wǎng)站HTML框架的編寫 255
16．3．1 頁面HTML框架搭建 255
16．3．2 頁面頭部和頁腳的HTML
255
16．3．3 頁面公共部分的HTML 256
16．3．4 首頁主體內(nèi)容的HTML 258
16．3．5 內(nèi)頁主體內(nèi)容的HTML 261
16．3．6 首頁HTML代碼總覽 263
16．3．7 內(nèi)頁HTML代碼總覽 264
16．4 網(wǎng)站CSS樣式的編寫 265
16．4．1 頁面公共部分的CSS 265
16．4．2 頁面框架的CSS 267
16．4．3 頁面頭部和頁腳的CSS 268
16．4．4 首頁主體內(nèi)容的CSS 268
16．4．5 內(nèi)頁主體內(nèi)容的CSS 270
16．4．6 網(wǎng)站CSS代碼總覽 271
16．5 小結(jié) 272
第17章　使用HTML 5+CSS 3開發(fā)
搜房網(wǎng) 273
17．1 網(wǎng)站前期策劃 273
17．1．1 理解HTML 5的語義性
元素 273
17．1．2 搜房網(wǎng)網(wǎng)站結(jié)構(gòu) 275
17．1．3 搜房網(wǎng)整站預(yù)覽 275
17．2 搜房網(wǎng)的首頁設(shè)計(jì) 278
17．2．1 首頁的布局 278
17．2．2 設(shè)計(jì)導(dǎo)航欄 282
17．2．3 設(shè)計(jì)宣傳廣告欄 284
17．2．4 CSS布局 287
17．3 搜房網(wǎng)的內(nèi)容頁設(shè)計(jì) 291
17．3．1 出售房源頁面 291
17．3．2 購買房源頁面 293
17．3．3 出租房源頁面 295
17．3．4 房產(chǎn)過戶頁面 297
17．3．5 聯(lián)系我們頁面 299
17．4 小結(jié) 301
第18章　使用Bootstrap實(shí)現(xiàn)論壇后臺(tái)
管理系統(tǒng) 302
18．1 項(xiàng)目開始 302
18．2 頁面布局 303
18．2．1 引入Bootstrap 3框架 303
18．2．2 編寫布局代碼 304
18．3 實(shí)現(xiàn)導(dǎo)航欄 305
18．3．1 構(gòu)建導(dǎo)航的框架代碼 305
18．3．2 填寫標(biāo)題和導(dǎo)航鏈接 305
18．3．3 添加搜索框和通知系統(tǒng) 306
18．3．4 添加管理員的登錄信息 307
18．3．5 構(gòu)建響應(yīng)式導(dǎo)航 308
18．4 實(shí)現(xiàn)左側(cè)邊欄 310
18．5 實(shí)現(xiàn)主功能部分 310
18．5．1 主功能的頭部 311
18．5．2 主功能的帖子列表 312
18．6 小結(jié) 315
第19章　使用Foundation實(shí)現(xiàn)論壇
首頁 316
19．1 項(xiàng)目開始 316
19．2 頁面布局 317
19．2．1 引入Foundation需要
的包 317
19．2．2 移動(dòng)優(yōu)先的布局 318
19．3 實(shí)現(xiàn)頭部導(dǎo)航欄 319
19．4 實(shí)現(xiàn)響應(yīng)式版塊列表 321
19．5 實(shí)現(xiàn)熱門帖子推薦 323
19．6 小結(jié) 325
附錄A 網(wǎng)頁制作的調(diào)試工具及使用 326
附錄B 提升CSS的性能和效率 332