超實(shí)用的CSS代碼段

序1 CSS的前世今生 VII
序2 你絕對(duì)不可能全部做對(duì)的
CSS題 XVII
序3 最流行的前端面試題 XXVI
第1章 文字與字體 1
1．1 在網(wǎng)頁(yè)中使用自定義字體 1
1．2 文本縮進(jìn)和首字符下沉 3
1．3 自定義文本被選中時(shí)的樣式 4
1．4 文本對(duì)齊 4
1．5 調(diào)整文字、字符的間距 5
1．6 文本的裝飾――畫(huà)線(xiàn)、粗體、斜體 6
1．7 文字陰影 6
1．8 文字毛玻璃效果 7
1．9 文本溢出處理 7
1．10 金屬質(zhì)感文字 8
1．11 隱藏文本 9
1．11．1 使用text-indent 9
1．11．2 使用定位 9
1．12 文字旋轉(zhuǎn) 10
1．13 現(xiàn)代字體棧 10
第2章 邊框和圖片 12
2．1 邊框新屬性的基礎(chǔ)與實(shí)例 12
2．1．1 border-color 12
2．1．2 border-image 13
2．1．3 border-radius 17
2．1．4 box-shadow 18
2．2 搜索框 19
2．2．1 使用背景圖片的搜索框 19
2．2．2 只使用CSS的搜索框 20
2．3 微博發(fā)布框 21
2．4 拍立得效果框 26
2．5 CSS 3動(dòng)畫(huà)邊框 27
2．6 邊框移動(dòng)特效 31
2．7 Banner圖片的標(biāo)簽 32
2．8 黑白圖片 34
2．9 圖片水印 34
2．10 圖片細(xì)節(jié)放大展示 35
2．11 圖片的瀑布流 39
2．11．1 浮動(dòng)的瀑布流 40
2．11．2 絕對(duì)定位的瀑布流 42
2．12 圖片墻 45
2．13 圖片輪播圖 47
2．13．1 使用定位實(shí)現(xiàn) 48
2．13．2 使用透明度實(shí)現(xiàn) 52
2．13．3 縫切換 52
2．14 幻燈片 56
2．15 手風(fēng)琴效果 60
2．16 圖片自適應(yīng) 61
2．17 使用純CSS繪制圖像 62
2．18 圖片原地放大 66
2．19 圖片翻轉(zhuǎn) 67
2．20 圖像地圖 68
第3章 按鈕和鏈接 71
3．1 圓角按鈕 71
3．2 簡(jiǎn)單導(dǎo)航欄 74
3．3 二級(jí)導(dǎo)航欄 76
3．4 三級(jí)導(dǎo)航欄 78
3．5 滑動(dòng)菜單 80
3．6 網(wǎng)頁(yè)右鍵菜單 82
3．7 下拉菜單 84
3．8 CSS 3圓形導(dǎo)航菜單 87
3．9 標(biāo)簽云 90
3．10 TAB標(biāo)簽頁(yè) 91
3．10．1 使用JavaScript 92
3．10．2 使用CSS target偽類(lèi) 92
3．11 選中文字分享 93
3．12 鏈接百葉窗效果 94
3．13 iPhone開(kāi)關(guān) 96
3．14 按鈕式單選框與復(fù)選框 97
3．15 自定義播放器 100
3．16 文字變鏈接 104
3．17 根據(jù)文件格式設(shè)置鏈接圖標(biāo) 104
3．18 鏈接標(biāo)簽“a”的順序 105
第4章 背景和顏色 108
4．1 顏色和漸變的基礎(chǔ)與實(shí)例 108
4．1．1 顏色 108
4．1．2 漸變簡(jiǎn)述 109
4．1．3 帶前綴的漸變 109
4．1．4 W3C標(biāo)準(zhǔn)漸變（不帶前綴） 111
4．1．5 重復(fù)漸變 111
4．2 高光效果 112
4．3 多背景 112
4．4 全屏背景 113
4．5 斑馬線(xiàn)背景 114
4．6 棋盤(pán)背景 115
4．7 易拉罐效果 117
4．8 頁(yè)面頂部陰影 119
第5章 變換與動(dòng)畫(huà) 120
5．1 CSS 3變換與動(dòng)畫(huà)的基礎(chǔ)及實(shí)例 120
5．1．1 CSS 3變形概述 120
5．1．2 CSS 3變形語(yǔ)法詳解及應(yīng)用 121
5．1．3 CSS 3轉(zhuǎn)換概述 122
5．1．4 CSS 3轉(zhuǎn)換語(yǔ)法詳解 123
5．1．5 CSS 3轉(zhuǎn)換具體實(shí)例 124
5．1．6 CSS 3動(dòng)畫(huà)概述 124
5．1．7 CSS 3動(dòng)畫(huà)語(yǔ)法詳解 125
5．1．8 簡(jiǎn)單實(shí)例 127
5．2 紙張邊角動(dòng)畫(huà)效果 127
5．2．1 紙張邊角稍稍卷起 128
5．2．2 邊角翻折 130
5．2．3 更具立體感的邊角翻折效果 132
5．3 氣泡式提示 134
5．4 對(duì)聯(lián)廣告 136
5．5 頁(yè)面loading效果 137
5．6 進(jìn)度條 139
5．7 圖標(biāo)滑動(dòng)切換特效 142
5．8 流星劃過(guò)效果 143
5．9 雪花飄落效果 144
5．10 數(shù)字滾動(dòng)器 146
5．11 模擬時(shí)鐘 149
5．12 蘋(píng)果著名的DOCK欄 154
5．13 蘋(píng)果系統(tǒng)的Stack特效 158
5．14 扇形展開(kāi) 161
5．15 回到頁(yè)面的頂部 166
5．16 拖曳和拋出 167
5．16．1 拖曳實(shí)現(xiàn)原理 167
5．16．2 拋出與模擬拋物原理 168
5．16．3 窗口實(shí)現(xiàn) 168
第6章 頁(yè)面的布局 170
6．1 圖文混排 170
6．2 文本內(nèi)容垂直居中 172
6．3 自適應(yīng)寬度的水平居中 173
6．4 固定寬度且居中 174
6．5 固定頁(yè)腳 175
6．6 控制位置：絕對(duì)位置和相對(duì)位置 177
6．7 一個(gè)圖文混排的網(wǎng)頁(yè)選項(xiàng)卡 178
6．8 兼容瀏覽器的最小高度 182
6．9 讓div顯示在屏幕的中央 183
6．10 iPad屏幕布局 185
6．11 經(jīng)典的CSS Clearfix 186
6．12 升級(jí)版的Clearfix 187
6．13 強(qiáng)制垂直滾動(dòng)條 189
6．14 CSS 3文本分列 190
6．15 讓div層在Flash之上 192
6．16 float引起div自適應(yīng)高度效的解
決方案 193
6．17 Flexbox布局風(fēng)格 196
6．18 動(dòng)態(tài)高度下的居中 201
6．19 純CSS實(shí)現(xiàn)固定表頭 202
6．20 Metro布局風(fēng)格 205
第7章 美化與裝飾 209
7．1 文本裝飾 209
7．1．1 文本的顏色 209
7．1．2 文本畫(huà)線(xiàn) 210
7．1．3 文本的空白 212
7．1．4 文本的方向 212
7．2 發(fā)光輸入框 213
7．3 自定義滾動(dòng)條 214
7．4 頁(yè)面頂部陰影 218
7．5 巧妙實(shí)現(xiàn)分隔線(xiàn) 218
7．6 三角形列表符號(hào) 221
7．7 紙頁(yè)面卷曲效果 222
7．8 跨瀏覽器的透明度 225
7．9 鼠標(biāo)指向時(shí)變成手型 227
7．10 鼠標(biāo)移動(dòng)到div上高亮顯示 227
7．11 發(fā)光錨鏈接 229
7．12 屏蔽Webkit瀏覽器的高亮效果 230
7．13 多種風(fēng)格的翻頁(yè)頁(yè)碼 232
7．13．1 Yahoo舊版翻頁(yè)風(fēng)格 232
7．13．2 Yahoo新版翻頁(yè)風(fēng)格 234
7．13．3 Meneame翻頁(yè)風(fēng)格 236
7．13．4 YouTube翻頁(yè)風(fēng)格 238
7．14 創(chuàng)建針線(xiàn)縫合效果 239
第8章 盒子 241
8．1 CSS 3盒模型 241
8．2 內(nèi)層CSS 3盒陰影 243
8．3 外層CSS 3盒陰影 243
8．4 純CSS 3透明水晶盒 244
8．5 投影發(fā)光效果 249
第9章 3D相關(guān) 251
9．1 3D文字 251
9．2 3D圖片立體效果 253
9．3 3D按鈕 258
9．4 3D下拉菜單 264
9．5 3D旋轉(zhuǎn)動(dòng)畫(huà) 269
第10章 CSS Hack 273
10．1 讓網(wǎng)站在所有瀏覽器下顯示一致
（CSS Reset） 273
10．2 解決IE 6中浮動(dòng)元素的雙倍邊距
問(wèn)題 276
10．3 識(shí)別不同瀏覽器 277
10．4 背景與圖片透明 281
10．5 IE 10 CSS Hack 285
10．6 CSS 3 濾鏡 286
10．7 常用的CSS Hack列表 291
10．8 CSS重置方案（CSS Reset） 294
10．8．1 方案一 294
10．8．2 方案二（雅虎方案） 295
10．8．3 方案三 295
第11章 其他常用代碼 297
11．1 使用CSS 3實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器 297
11．2 使用CSS 3制作網(wǎng)頁(yè)播放器 301
11．3 不使用table的Form表單 306
11．4 可以重復(fù)利用的規(guī)則 310
11．5 在同一元素上使用多種類(lèi) 312
11．6 CSS塊引用模板 313
11．7 花式CSS 3 Pull-引文 314
11．8 一般媒體查詢(xún) 315
11．9 CSS 3背景梯度 317
11．10 CSS日歷顯示效果 318
11．11 字符編碼 322
11．12 手機(jī)APP使用的簡(jiǎn)潔注冊(cè)頁(yè)面 323
11．13 手機(jī)簡(jiǎn)潔價(jià)目表 327
11．14 手機(jī)簡(jiǎn)潔任務(wù)表 331
11．15 微店購(gòu)物車(chē) 334
11．16 APP導(dǎo)航與提醒 338
11．17 簡(jiǎn)潔記事本 341
11．18 手機(jī)文件下載 345
11．19 迷你下拉列表框 347
11．20 Google Font API 349
11．21 動(dòng)態(tài)提示框 350
11．22 用CSS創(chuàng)建內(nèi)容幻燈片 353
11．23 打印自動(dòng)顯示超鏈接URL 357
11．24 禁用Webkit內(nèi)核某些屬性 357
11．24．1 禁用電話(huà)號(hào)碼轉(zhuǎn)換為
鏈接樣式（移動(dòng)設(shè)備） 357
11．24．2 禁用原生彈出菜單
（移動(dòng)設(shè)備） 357
11．24．3 禁用用戶(hù)選中 358
11．24．4 禁用輸入框、文本框的
輪廓線(xiàn) 358
11．24．5 禁用文本框的縮放功能 358