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 應用CSS樣式 4
1.2.3 CSS樣式表 8
1.2.4 導入外部樣式表 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 設計Logo樣式 80
3.4.2 設計標題樣式 82
3.4.3 設計正文樣式 85
3.4.4 規(guī)劃網(wǎng)頁字體大小 86
3.4.5 設計居中顯示 88
3.4.6 設計對象垂直對齊 90
3.4.7 隱藏和截取網(wǎng)頁文字 92
3.4.8 設計文章版式 96
3.5 在線練習 100
第4章　使用CSS美化圖像 101
視頻講解：1小時26分鐘
4.1 設置圖像樣式 102
4.1.1 定義圖像大小 102
4.1.2 定義圖像邊框 103
4.1.3 定義圖像不透明度 106
4.1.4 定義圓角圖像 107
4.1.5 定義陰影圖像 108
4.2 設計背景圖像樣式 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 設計圖文混排版式 132
4.4.2 設計按鈕 134
4.4.3 設計花邊框 136
4.4.4 設計圖片鑲邊特效 137
4.4.5 設計發(fā)光的球體 138
4.4.6 設計圖標 138
4.4.7 設計圖片水印 141
4.5 在線練習 142
第5章　使用CSS美化超鏈接 143
視頻講解：23分鐘
5.1 超鏈接基本樣式 144
5.2 案例實戰(zhàn) 146
5.2.1 設計下劃線樣式 146
5.2.2 設計動態(tài)下劃線樣式 149
5.2.3 設計按鈕樣式 150
5.2.4 設計背景圖像交換樣式 151
5.2.5 設計鼠標指針樣式 153
5.2.6 設計圖片按鈕樣式 155
5.2.7　設計滑動背景樣式 156
5.2.8　設計超鏈接類型樣式 158
5.3 在線練習 160
第6章　使用CSS美化列表 161
視頻講解：50分鐘
6.1 列表基本樣式 162
6.1.1 定義項目符號 162
6.1.2 自定義項目符號 163
6.1.3 使用背景圖像設計
項目符號 164
6.2 案例實戰(zhàn) 166
6.2.1 設計堆疊樣式 166
6.2.2 設計水平排列樣式 167
6.2.3 設計菜單樣式 170
6.2.4 設計導航條 171
6.2.5 設計下拉菜單 174
6.2.6 設計折疊導航面板 177
6.2.7 設計帶提示信息的菜單 180
6.2.8 設計排行榜 182
6.2.9 設計圖文列表欄目 185
6.2.10 設計選項卡 188
6.2.11 設計多級菜單 191
6.3 在線練習 194
第7章　使用CSS美化表格 195
視頻講解：55分鐘
7.1 設置屬性 196
7.1.1 設置表格屬性 196
7.1.2 設置單元格屬性 198
7.2 表格基本樣式 199
7.2.1 設計表格邊框線 200
7.2.2 定義單元格間距和空隙 202
7.2.3 隱藏空單元格 203
7.2.4 定義標題樣式 204
7.3 案例實戰(zhàn) 206
7.3.1 設計斑馬線表格 206
7.3.2 設計粗線框表格 209
7.3.3 設計淺色風格表格 211
7.3.4 設計清新風格表格 214
7.3.5 設計圓潤邊框表格 215
7.3.6 設計數(shù)據(jù)分組表格 218
7.3.7 設計單線表格 221
7.3.8 設計日歷表 222
7.4 在線練習 226
第8章　使用CSS美化表單 227
視頻講解：40分鐘
8.1 HTML5表單基礎(chǔ) 228
8.2 案例實戰(zhàn) 230
8.2.1 設計登錄表單 230
8.2.2 設計信息登記表 231
8.2.3 設計易用表單 236
8.2.4 設計注冊表單 239
8.2.5 設計聯(lián)系表單 241
8.2.6 設計高亮樣式 244
8.2.7 設計圖標表單 246
8.2.8 設計反饋表 248
8.2.9 設計搜索表單 253
8.3 在線練習 256
第9章　使用DIV+CSS設計網(wǎng)頁 257
視頻講解：1小時48分鐘
9.1 設計文檔結(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 設置文檔類型 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 設計固寬+彈性頁面 298
9.5.2 設計兩欄彈性頁面 299
9.5.3 設計兩欄浮動頁面 301
9.5.4 設計三欄彈性頁面 302
9.5.5 設計兩列固寬+單列
彈性頁面 305
9.5.6 設計兩列彈性+單列
固定頁面 308
9.6 在線練習 310
第10章　使用HTML5+CSS3
設計網(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 設計文章塊 315
10.1.5 設計區(qū)塊 317
10.1.6 設計導航條 320
10.1.7 設計輔助欄 322
10.1.8 設計主要區(qū)域 323
10.1.9 設計標題欄 324
10.1.10 設計標題組 325
10.1.11 設計頁腳欄 326
10.2 CSS3增強的界面特性 327
10.2.1 定義顯示方式 327
10.2.2 定義可控大小 327
10.2.3 定義輪廓 329
10.2.4 設置輪廓樣式 331
10.2.5 定義邊框背景 335
10.3 案例實戰(zhàn) 339
10.3.1 設計HTML5文檔
居中顯示 339
10.3.2 設計HTML5文檔
彈性顯示 343
10.3.3 調(diào)整HTML5欄目
顯示順序 344
10.3.4 禁止HTML5欄目
錯行顯示 348
10.3.5 設計HTML5多欄
等高顯示 349
10.4 在線練習 353
第11章　使用CSS3設計彈性布局 354
視頻講解：32分鐘
11.1 多列布局 355
11.1.1 設置列寬 355
11.1.2 設置列數(shù) 356
11.1.3 設置間距 357
11.1.4 設置列邊框 357
11.1.5 設置跨列顯示 358
11.1.6 設置列高度 360
11.2 舊版伸縮盒 360
11.2.1 啟動伸縮盒 360
11.2.2　設置寬度 361
11.2.3 設置順序 363
11.2.4 設置方向 364
11.2.5 設置對齊方式 366
11.3 新版伸縮盒 368
11.3.1 認識Flexbox系統(tǒng) 368
11.3.2 啟動伸縮盒 369
11.3.3 設置主軸方向 370
11.3.4 設置行數(shù) 371
11.3.5 設置對齊方式 372
11.3.6 設置伸縮項目 375
11.4 伸縮盒版本比較和兼容 378
11.4.1 版本比較和兼容方法 378
11.4.2 案例：設計3欄頁面 382
11.4.3 案例：設計3行3列
應用 386
11.5 在線練習 389
第12章　使用CSS3設計動態(tài)樣式 390
視頻講解：1小時4分鐘
12.1 CSS3變形 391
12.1.1 認識Transform 391
12.1.2 設置原點 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 設置變形類型 397
12.1.9 設置透視距離和原點 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 設置過渡屬性 408
12.2.2 設置過渡時間 408
12.2.3 設置延遲過渡時間 409
12.2.4 設置過渡動畫類型 410
12.2.5 設置過渡觸發(fā)動作 410
12.3 幀動畫 416
12.3.1 設置關(guān)鍵幀 416
12.3.2 設置動畫屬性 418
12.4 案例實戰(zhàn) 421
12.4.1 設計圖形 421
12.4.2 設計冒泡背景按鈕 424
12.4.3 設計動畫效果菜單 426
12.4.4 設計照片特效 428
12.4.5 設計立體盒子 429
12.4.6 旋轉(zhuǎn)盒子 432
12.4.7 設計翻轉(zhuǎn)廣告 434
12.4.8 設計跑步效果 435
12.4.9 設計折疊面板 437
12.5 在線練習 439
第13章　使用CSS3設計響應式頁面 440
視頻講解：21分鐘
13.1 媒體查詢基礎(chǔ) 441
13.1.1 媒體類型和媒體查詢 441
13.1.2 使用@media 442
13.1.3 應用@media 445
13.2 案例實戰(zhàn) 449
13.2.1 判斷顯示屏幕寬度 449
13.2.2 設計響應式版式 451
13.2.3 設計響應式菜單 454
13.2.4 設計自動隱藏布局 455
13.2.5 設計自適應手機頁面 458
13.3 在線練習 462
第14章　使用JavaScript控制CSS
樣式 463
視頻講解：1小時14分鐘
14.1 在網(wǎng)頁中使用JavaScript
腳本 464
14.1.1 使用