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

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