CSS3+DIV網(wǎng)頁(yè)樣式與布局從入門到精通（微課精編版）

目　錄
第1章　CSS3基礎(chǔ) 1
視頻講解：33分鐘
1.1 CSS發(fā)展歷史 2
1.2 使用CSS 3
1.2.1 CSS樣式 3
1.2.2 應(yīng)用CSS樣式 4
1.2.3 CSS樣式表 8
1.2.4 導(dǎo)入外部樣式表 9
1.2.5 CSS注釋 10
1.3 CSS特性 11
1.3.1 CSS層疊性 11
1.3.2 CSS繼承性 15
1.4 案例實(shí)戰(zhàn) 16
1.5 在線練習(xí) 20
第2章　使用CSS3選擇器 21
視頻講解：42分鐘
2.1 元素選擇器 22
2.1.1 標(biāo)簽選擇器 22
2.1.2 類選擇器 22
2.1.3 ID選擇器 24
2.1.4 通配選擇器 25
2.2 關(guān)系選擇器 26
2.2.1 包含選擇器 26
2.2.2 子選擇器 27
2.2.3 相鄰選擇器 28
2.2.4 兄弟選擇器 30
2.2.5 分組選擇器 31
2.3 屬性選擇器 32
2.4 偽類選擇器 36
2.4.1 動(dòng)態(tài)偽類 37
2.4.2 結(jié)構(gòu)偽類 40
2.4.3 否定偽類 48
2.4.4 狀態(tài)偽類 50
2.4.5 目標(biāo)偽類 52
2.5 在線練習(xí) 53
第3章　使用CSS美化網(wǎng)頁(yè)文本 54
視頻講解：1小時(shí)59分鐘
3.1 字體基本樣式 55
3.1.1 定義字體類型 55
3.1.2 定義字體大小 56
3.1.3 定義字體顏色 58
3.1.4 定義字體粗細(xì) 58
3.1.5 定義斜體字體 59
3.1.6 定義下劃線 60
3.1.7 定義字體大小寫 60
3.2 文本基本樣式 62
3.2.1 定義文本對(duì)齊 62
3.2.2 定義垂直對(duì)齊 63
3.2.3 定義字距和詞距 65
3.2.4 定義行高 66
3.2.5 定義縮進(jìn) 69
3.3 CSS3文本樣式 70
3.3.1 定義文本陰影 70
3.3.2 定義溢出文本 72
3.3.3 定義文本換行 74
3.3.4 動(dòng)態(tài)添加文本 77
3.3.5 自定義字體類型 79
3.4 案例實(shí)戰(zhàn) 80
3.4.1 設(shè)計(jì)Logo樣式 80
3.4.2 設(shè)計(jì)標(biāo)題樣式 82
3.4.3 設(shè)計(jì)正文樣式 85
3.4.4 規(guī)劃網(wǎng)頁(yè)字體大小 86
3.4.5 設(shè)計(jì)居中顯示 88
3.4.6 設(shè)計(jì)對(duì)象垂直對(duì)齊 90
3.4.7 隱藏和截取網(wǎng)頁(yè)文字 92
3.4.8 設(shè)計(jì)文章版式 96
3.5 在線練習(xí) 100
第4章　使用CSS美化圖像 101
視頻講解：1小時(shí)26分鐘
4.1 設(shè)置圖像樣式 102
4.1.1 定義圖像大小 102
4.1.2 定義圖像邊框 103
4.1.3 定義圖像不透明度 106
4.1.4 定義圓角圖像 107
4.1.5 定義陰影圖像 108
4.2 設(shè)計(jì)背景圖像樣式 110
4.2.1 定義背景圖像 110
4.2.2 定義顯示方式 111
4.2.3 定義顯示位置 112
4.2.4 定義固定背景 115
4.2.5 定義原點(diǎn) 116
4.2.6 定義裁剪區(qū)域 118
4.2.7 定義大小 120
4.2.8 定義多背景圖 121
4.3 定義漸變背景樣式 123
4.3.1 線性漸變 123
4.3.2 徑向漸變 128
4.4 案例實(shí)戰(zhàn) 132
4.4.1 設(shè)計(jì)圖文混排版式 132
4.4.2 設(shè)計(jì)按鈕 134
4.4.3 設(shè)計(jì)花邊框 136
4.4.4 設(shè)計(jì)圖片鑲邊特效 137
4.4.5 設(shè)計(jì)發(fā)光的球體 138
4.4.6 設(shè)計(jì)圖標(biāo) 138
4.4.7 設(shè)計(jì)圖片水印 141
4.5 在線練習(xí) 142
第5章　使用CSS美化超鏈接 143
視頻講解：23分鐘
5.1 超鏈接基本樣式 144
5.2 案例實(shí)戰(zhàn) 146
5.2.1 設(shè)計(jì)下劃線樣式 146
5.2.2 設(shè)計(jì)動(dòng)態(tài)下劃線樣式 149
5.2.3 設(shè)計(jì)按鈕樣式 150
5.2.4 設(shè)計(jì)背景圖像交換樣式 151
5.2.5 設(shè)計(jì)鼠標(biāo)指針樣式 153
5.2.6 設(shè)計(jì)圖片按鈕樣式 155
5.2.7　設(shè)計(jì)滑動(dòng)背景樣式 156
5.2.8　設(shè)計(jì)超鏈接類型樣式 158
5.3 在線練習(xí) 160
第6章　使用CSS美化列表 161
視頻講解：50分鐘
6.1 列表基本樣式 162
6.1.1 定義項(xiàng)目符號(hào) 162
6.1.2 自定義項(xiàng)目符號(hào) 163
6.1.3 使用背景圖像設(shè)計(jì)
項(xiàng)目符號(hào) 164
6.2 案例實(shí)戰(zhàn) 166
6.2.1 設(shè)計(jì)堆疊樣式 166
6.2.2 設(shè)計(jì)水平排列樣式 167
6.2.3 設(shè)計(jì)菜單樣式 170
6.2.4 設(shè)計(jì)導(dǎo)航條 171
6.2.5 設(shè)計(jì)下拉菜單 174
6.2.6 設(shè)計(jì)折疊導(dǎo)航面板 177
6.2.7 設(shè)計(jì)帶提示信息的菜單 180
6.2.8 設(shè)計(jì)排行榜 182
6.2.9 設(shè)計(jì)圖文列表欄目 185
6.2.10 設(shè)計(jì)選項(xiàng)卡 188
6.2.11 設(shè)計(jì)多級(jí)菜單 191
6.3 在線練習(xí) 194
第7章　使用CSS美化表格 195
視頻講解：55分鐘
7.1 設(shè)置屬性 196
7.1.1 設(shè)置表格屬性 196
7.1.2 設(shè)置單元格屬性 198
7.2 表格基本樣式 199
7.2.1 設(shè)計(jì)表格邊框線 200
7.2.2 定義單元格間距和空隙 202
7.2.3 隱藏空單元格 203
7.2.4 定義標(biāo)題樣式 204
7.3 案例實(shí)戰(zhàn) 206
7.3.1 設(shè)計(jì)斑馬線表格 206
7.3.2 設(shè)計(jì)粗線框表格 209
7.3.3 設(shè)計(jì)淺色風(fēng)格表格 211
7.3.4 設(shè)計(jì)清新風(fēng)格表格 214
7.3.5 設(shè)計(jì)圓潤(rùn)邊框表格 215
7.3.6 設(shè)計(jì)數(shù)據(jù)分組表格 218
7.3.7 設(shè)計(jì)單線表格 221
7.3.8 設(shè)計(jì)日歷表 222
7.4 在線練習(xí) 226
第8章　使用CSS美化表單 227
視頻講解：40分鐘
8.1 HTML5表單基礎(chǔ) 228
8.2 案例實(shí)戰(zhàn) 230
8.2.1 設(shè)計(jì)登錄表單 230
8.2.2 設(shè)計(jì)信息登記表 231
8.2.3 設(shè)計(jì)易用表單 236
8.2.4 設(shè)計(jì)注冊(cè)表單 239
8.2.5 設(shè)計(jì)聯(lián)系表單 241
8.2.6 設(shè)計(jì)高亮樣式 244
8.2.7 設(shè)計(jì)圖標(biāo)表單 246
8.2.8 設(shè)計(jì)反饋表 248
8.2.9 設(shè)計(jì)搜索表單 253
8.3 在線練習(xí) 256
第9章　使用DIV+CSS設(shè)計(jì)網(wǎng)頁(yè) 257
視頻講解：1小時(shí)48分鐘
9.1 設(shè)計(jì)文檔結(jié)構(gòu) 258
9.1.1 定義文檔結(jié)構(gòu) 258
9.1.2 使用div和span 259
9.1.3 使用id和class 260
9.1.4 設(shè)置文檔類型 261
9.1.5 認(rèn)識(shí)顯示模式 262
9.2 CSS布局基礎(chǔ) 264
9.2.1 CSS盒模型結(jié)構(gòu) 265
9.2.2 盒子大小 266
9.2.3 盒子邊框 267
9.2.4 盒子邊界 269
9.2.5 盒子補(bǔ)白 271
9.2.6 認(rèn)識(shí)顯示類型 273
9.3 浮動(dòng)布局 275
9.3.1 定義浮動(dòng)顯示 275
9.3.2 清除浮動(dòng) 278
9.3.3 浮動(dòng)嵌套 280
9.3.4 混合浮動(dòng)布局 282
9.4 定位顯示 287
9.4.1 定義定位顯示 287
9.4.2 定位框 290
9.4.3 相對(duì)定位 292
9.4.4 定位層疊 293
9.4.5 混合定位布局 295
9.5 案例實(shí)戰(zhàn) 297
9.5.1 設(shè)計(jì)固寬+彈性頁(yè)面 298
9.5.2 設(shè)計(jì)兩欄彈性頁(yè)面 299
9.5.3 設(shè)計(jì)兩欄浮動(dòng)頁(yè)面 301
9.5.4 設(shè)計(jì)三欄彈性頁(yè)面 302
9.5.5 設(shè)計(jì)兩列固寬+單列
彈性頁(yè)面 305
9.5.6 設(shè)計(jì)兩列彈性+單列
固定頁(yè)面 308
9.6 在線練習(xí) 310
第10章　使用HTML5+CSS3
設(shè)計(jì)網(wǎng)頁(yè) 311
視頻講解：1小時(shí)6分鐘
10.1 HTML5文檔基礎(chǔ) 312
10.1.1 文檔變化 312
10.1.2 標(biāo)簽用法 313
10.1.3 編寫HTML5文檔 314
10.1.4 設(shè)計(jì)文章塊 315
10.1.5 設(shè)計(jì)區(qū)塊 317
10.1.6 設(shè)計(jì)導(dǎo)航條 320
10.1.7 設(shè)計(jì)輔助欄 322
10.1.8 設(shè)計(jì)主要區(qū)域 323
10.1.9 設(shè)計(jì)標(biāo)題欄 324
10.1.10 設(shè)計(jì)標(biāo)題組 325
10.1.11 設(shè)計(jì)頁(yè)腳欄 326
10.2 CSS3增強(qiáng)的界面特性 327
10.2.1 定義顯示方式 327
10.2.2 定義可控大小 327
10.2.3 定義輪廓 329
10.2.4 設(shè)置輪廓樣式 331
10.2.5 定義邊框背景 335
10.3 案例實(shí)戰(zhàn) 339
10.3.1 設(shè)計(jì)HTML5文檔
居中顯示 339
10.3.2 設(shè)計(jì)HTML5文檔
彈性顯示 343
10.3.3 調(diào)整HTML5欄目
顯示順序 344
10.3.4 禁止HTML5欄目
錯(cuò)行顯示 348
10.3.5 設(shè)計(jì)HTML5多欄
等高顯示 349
10.4 在線練習(xí) 353
第11章　使用CSS3設(shè)計(jì)彈性布局 354
視頻講解：32分鐘
11.1 多列布局 355
11.1.1 設(shè)置列寬 355
11.1.2 設(shè)置列數(shù) 356
11.1.3 設(shè)置間距 357
11.1.4 設(shè)置列邊框 357
11.1.5 設(shè)置跨列顯示 358
11.1.6 設(shè)置列高度 360
11.2 舊版伸縮盒 360
11.2.1 啟動(dòng)伸縮盒 360
11.2.2　設(shè)置寬度 361
11.2.3 設(shè)置順序 363
11.2.4 設(shè)置方向 364
11.2.5 設(shè)置對(duì)齊方式 366
11.3 新版伸縮盒 368
11.3.1 認(rèn)識(shí)Flexbox系統(tǒng) 368
11.3.2 啟動(dòng)伸縮盒 369
11.3.3 設(shè)置主軸方向 370
11.3.4 設(shè)置行數(shù) 371
11.3.5 設(shè)置對(duì)齊方式 372
11.3.6 設(shè)置伸縮項(xiàng)目 375
11.4 伸縮盒版本比較和兼容 378
11.4.1 版本比較和兼容方法 378
11.4.2 案例：設(shè)計(jì)3欄頁(yè)面 382
11.4.3 案例：設(shè)計(jì)3行3列
應(yīng)用 386
11.5 在線練習(xí) 389
第12章　使用CSS3設(shè)計(jì)動(dòng)態(tài)樣式 390
視頻講解：1小時(shí)4分鐘
12.1 CSS3變形 391
12.1.1 認(rèn)識(shí)Transform 391
12.1.2 設(shè)置原點(diǎn) 391
12.1.3 2D旋轉(zhuǎn) 393
12.1.4 2D縮放 394
12.1.5 2D平移 394
12.1.6 2D傾斜 395
12.1.7 2D矩陣 396
12.1.8 設(shè)置變形類型 397
12.1.9 設(shè)置透視距離和原點(diǎn) 398
12.1.10 3D平移 402
12.1.11 3D縮放 403
12.1.12 3D旋轉(zhuǎn) 404
12.1.13 透視函數(shù) 405
12.1.14 變形原點(diǎn) 406
12.1.15 背景可見 406
12.2 過(guò)渡動(dòng)畫 407
12.2.1 設(shè)置過(guò)渡屬性 408
12.2.2 設(shè)置過(guò)渡時(shí)間 408
12.2.3 設(shè)置延遲過(guò)渡時(shí)間 409
12.2.4 設(shè)置過(guò)渡動(dòng)畫類型 410
12.2.5 設(shè)置過(guò)渡觸發(fā)動(dòng)作 410
12.3 幀動(dòng)畫 416
12.3.1 設(shè)置關(guān)鍵幀 416
12.3.2 設(shè)置動(dòng)畫屬性 418
12.4 案例實(shí)戰(zhàn) 421
12.4.1 設(shè)計(jì)圖形 421
12.4.2 設(shè)計(jì)冒泡背景按鈕 424
12.4.3 設(shè)計(jì)動(dòng)畫效果菜單 426
12.4.4 設(shè)計(jì)照片特效 428
12.4.5 設(shè)計(jì)立體盒子 429
12.4.6 旋轉(zhuǎn)盒子 432
12.4.7 設(shè)計(jì)翻轉(zhuǎn)廣告 434
12.4.8 設(shè)計(jì)跑步效果 435
12.4.9 設(shè)計(jì)折疊面板 437
12.5 在線練習(xí) 439
第13章　使用CSS3設(shè)計(jì)響應(yīng)式頁(yè)面 440
視頻講解：21分鐘
13.1 媒體查詢基礎(chǔ) 441
13.1.1 媒體類型和媒體查詢 441
13.1.2 使用@media 442
13.1.3 應(yīng)用@media 445
13.2 案例實(shí)戰(zhàn) 449
13.2.1 判斷顯示屏幕寬度 449
13.2.2 設(shè)計(jì)響應(yīng)式版式 451
13.2.3 設(shè)計(jì)響應(yīng)式菜單 454
13.2.4 設(shè)計(jì)自動(dòng)隱藏布局 455
13.2.5 設(shè)計(jì)自適應(yīng)手機(jī)頁(yè)面 458
13.3 在線練習(xí) 462
第14章　使用JavaScript控制CSS
樣式 463
視頻講解：1小時(shí)14分鐘
14.1 在網(wǎng)頁(yè)中使用JavaScript
腳本 464
14.1.1 使用