CSS3 + DIV 網頁樣式與佈局 (全案例微課版)

劉輝在河南財經大學主要負責網頁設計、網站開發和Android開發課程，主要擅長HTML5、CSS3、JavaScript、jQuery技術，一直負責畢業班的實訓工作，在移動終端軟件開發方面有多年的開發經驗，具有很強的實戰經驗。

第1章　網頁設計需要學什麽   001
1.1　認識網頁和網站   002
1.1.1　認識網頁    002
1.1.2　認識網站    003
1.2　網頁設計需要的技術   004
1.2.1　HTML   004
1.2.2　DIV佈局     005
1.2.3　CSS樣式     005
1.2.4　腳本語言JavaScript     006
1.3　網頁文檔的基本結構   007
1.3.1　製作第一個網頁   007
1.3.2　文檔類型說明     008
1.3.3　html標簽     008
1.3.4　頭部標簽     008
1.3.5　主體標簽     008
1.3.6　註釋標簽     009
1.4　網頁設計的流程   009
1.4.1　網站規劃     010
1.4.2　搜集資料     010
1.4.3　設計網頁結構      010
1.4.4　獲取網頁素材      011
1.4.5　搭建網頁DIV層   012
1.4.6　設計網頁效果      013
1.4.7　測試網頁     013

第2章　網頁實現技術——HTML5   015
2.1　HTML5中的常用標簽  016
2.1.1　基礎標簽的應用   016
2.1.2　文本格式標簽     017
2.1.3　超級鏈接標簽     017
2.1.4　列表標簽的應用   018
2.2　HTML5中的圖像標簽  019
2.2.1　插入並編輯網頁中的圖像   020
2.2.2　定義圖像熱點區域     021
2.2.3　繪制網頁圖形圖像     022
2.3　HTML5中的表單標簽  023
2.3.1　文本類輸入框     024
2.3.2　按鈕類輸入框     025
2.3.3　網頁中的按鈕     026
2.3.4　圖像域和文件域   027
2.3.5　設置表單中的列表     028
2.3.6　表單常用屬性的應用    029
2.4　HTML5中的表格標簽  030
2.4.1　表格的基本結構    030
2.4.2　使用屬性編輯表格      031
2.4.3　完整的表格標簽    033
2.5　HTML5中的多媒體標簽    034
2.5.1　audio標簽的應用   034
2.5.2　在網頁中添加音頻文件  035
2.5.3　認識video標簽     036
2.5.4　在網頁中添加視頻文件  037
2.6 <div>標簽    039
2.7　<span>標簽      040
2.8　新手常見疑難問題     041
2.9 實戰技能訓練營   041

第3章　初始CSS3層疊樣式表  042
3.1 CSS概述   043
3.1.1　CSS的功能介紹    043
3.1.2　CSS的發展歷史    043
3.1.3　CSS的構造規則    044
3.1.4　CSS的註釋   044
3.2 CSS中的常用單位    045
3.2.1　顏色單位     045
3.2.2　長度單位     048
3.3 創建和編輯CSS 文件  049
3.4 在HTML5 中調用CSS 的方法    051
3.4.1　行內樣式     051
3.4.2　內嵌樣式     052
3.4.3　鏈接樣式     053
3.4.4　導入樣式      054
3.5 調用方法的優先級     055
3.5.1　行內樣式和內嵌樣式比較     055
3.5.2　內嵌樣式和鏈接樣式比較     055
3.5.3　鏈接樣式和導入樣式     056
3.6　新手常見疑難問題     057
3.7　實戰技能訓練營   057

第4 章 CSS3 選擇器的特性及應用    058
4.1　認識CSS 選擇器      059
4.2　選擇器的應用     059
4.2.1　標簽選擇器   059
4.2.2　類選擇器     061
4.2.3　ID 選擇器     062
4.2.4　全局選擇器   063
4.2.5　組合選擇器   063
4.2.6　繼承選擇器   064
4.2.7　偽類選擇器   065
4.2.8　屬性選擇器   066
4.2.9　結構偽類選擇器    067
4.2.10　UI 元素狀態偽類選擇器     068
4.3 選擇器聲明       069
4.3.1　集體聲明      069
4.3.2　多重嵌套聲明       070
4.4　CSS3 的繼承特性     070
4.4.1　繼承關系      070
4.4.2　CSS 繼承的運用     071
4.5 CSS3 的層疊特性     072
4.5.1　同一選擇器被多次定義的處理      072
4.5.2　同一標簽運用不同類型選擇器的處理   072
4.6　新手常見疑難問題     073
4.7　實戰技能訓練營   073

第5 章 使用CSS3 設計字體與文本樣式    074
5.1 設置字體樣式     075
5.1.1　控制字體類型      075
5.1.2　定義字體大小      076
5.1.3　定義字體風格      077
5.1.4　控制文字的粗細    077
5.1.5　將小寫字母轉換為大寫字母  078
5.1.6　設置字體的復合屬性    079
5.1.7　定義文字的顏色    080
5.2　設置文本的高級樣式   081
5.2.1　添加文本的陰影效果    081
5.2.2　設置文本溢出效果      082
5.2.3　控制文本的換行    082
5.2.4　設置字體尺寸      083
5.3　設置文本間距與對齊方式   084
5.3.1　設置單詞之間的間隔     084
5.3.2　設置字符之間的間隔     085
5.3.3　為文本添加裝飾線       086
5.3.4　設置垂直對齊方式       086
5.3.5　轉換文本的大小寫       088
5.3.6　設置文本的水平對齊方式     088
5.3.7　設置文本的縮進效果     090
5.3.8　設置文本的行間距       090
5.3.9　文本的空白處理     091
5.3.10　文本的反排     092
5.4　新手常見疑難問題     093
5.5　實戰技能訓練營   093

第6 章　使用CSS3 設計圖片與邊框樣式    095
6.1 圖片樣式基礎     096
6.1.1　圖片大小     096
6.1.2　圖片對齊     097
6.1.3　文字環繞圖片       099
6.1.4　圖片與文字的間距       100
6.2　邊框樣式基礎     101
6.2.1　邊框樣式     101
6.2.2　邊框顏色     103
6.2.3　邊框線寬     104
6.2.4　邊框復合屬性      105
6.3　圓角邊框樣式     106
6.3.1　定義圓角邊框      106
6.3.2　指定兩個圓角半徑      107
6.3.3　繪制四個不同圓角的邊框    107
6.3.4　繪制不同種類的邊框    108
6.4 新手常見疑難問題     110
6.5 實戰技能訓練營   110

第7 章 使用CSS3 控制網頁背景樣式   111
7.1　背景樣式基礎     112
7.1.1　設置背景顏色      112
7.1.2　網頁板塊配色      113
7.1.3　設置背景圖像      114
7.1.4　平鋪背景圖像      115
7.1.5　固定背景圖像      116
7.1.6　定位背景圖像      117
7.2　新增控制背景屬性     119
7.2.1　背景圖像大小      119
7.2.2　背景顯示區域      120
7.2.3　裁剪背景圖像      121
7.2.4　背景復合屬性      122
7.3　網頁背景漸變效果     123
7.3.1　線性漸變效果      123
7.3.2　徑向漸變效果      124
7.4 新手常見疑難問題     125
7.5 實戰技能訓練營   126

第8 章 使用CSS3 定義鏈接和鼠標樣式    127
8.1　鏈接樣式基礎     128
8.1.1　設置鏈接樣式      128
8.1.2　定義下劃線樣式    130
8.1.3　定義鏈接背景圖    131
8.1.4　定義鏈接提示信息      132
8.1.5　定義鏈接按鈕      133
8.2　定義鼠標指針特效     134
8.2.1　鼠標樣式基礎      134
8.2.2　變幻鼠標光標      137
8.2.3　定義滾動條樣式    138
8.3 新手常見疑難問題     139
8.4　實戰技能訓練營   140

第9 章　使用CSS3 設計表格樣式     141
9.1　表格樣式基礎     142
9.1.1　設置表格顏色      142
9.1.2　設置表格邊框      143
9.1.3　設置表格邊框寬度      144
9.1.4　設置表格邊框顏色      145
9.1.5　設置表格標題的位置    145
9.1.6　隱藏空單元格      146
9.1.7　設置單元格的邊距      147
9.2　設置懸浮變色的表格   148
9.3　使用表格佈局網頁     151
9.4　新手常見疑難問題     153
9.5　實戰技能訓練營   153

第10 章　使用CSS3 設計表單樣式    154
10.1　表單樣式基礎    155
10.1.1　表單字體樣式     155
10.1.2　表單邊框樣式     156
10.1.3　表單背景樣式     157
10.1.4　設計表單按鈕樣式     158
10.1.5　設計下拉菜單樣式     159
10.2　製作用戶登錄頁面    160
10.3　製作用戶註冊頁面    161
10.4　新手常見疑難問題    162
10.5 實戰技能訓練營      163

第11 章　使用CSS3 設計列表與菜單樣式   164
11.1 項目列表樣式    165
11.1.1　無序項目列表      165
11.1.2　有序項目列表      166
11.1.3　自定義項目列表    167
11.1.4　圖片列表樣式      168
11.1.5　設置圖片列表的位置    169
11.1.6　列表復合屬性的應用    170
11.1.7　將段落轉變成列表      171
11.2　菜單樣式基礎    172
11.2.1　製作動態導航菜單      172
11.2.2　製作水平方向菜單      173
11.2.3　製作多級菜單列表      175
11.2.4　模擬製作SOSO 導航欄     177
11.3　新手常見疑難問題    179
11.4　實戰技能訓練營      179

第12 章　使用CSS3 濾鏡設計網頁圖片特效     180
12.1　CSS3 中的濾鏡      181
12.2　設置基本濾鏡效果    182
12.2.1　高斯模糊（blur）濾鏡      182
12.2.2　明暗度（brightness）濾鏡   183
12.2.3　對比度（contrast）濾鏡     183
12.2.4　陰影（drop-shadow）濾鏡   184
12.2.5　灰度（grayscale）濾鏡      185
12.2.6　反相（invert）濾鏡     185
12.2.7　透明度（opacity）濾鏡      186
12.2.8　飽和度（saturate）濾鏡     187
12.2.9　深褐色（sepia）濾鏡   188
12.2.10　使用復合濾鏡效果    188
12.3　新手常見疑難問題    189
12.4　實戰技能訓練營      189

第13 章 使用CSS3 設計動畫效果    191
13.1　2D 轉換動畫效果     192
13.1.1　添加2D 移動效果      192
13.1.2　添加2D 旋轉效果      193
13.1.3　添加2D 縮放效果      194
13.1.4　添加2D 傾斜效果      195
13.1.5　添加2D 綜合變換效果      196
13.2　3D 轉換動畫效果     197
13.2.1　添加3D 移動效果      197
13.2.2　添加3D 旋轉效果      200
13.2.3　添加3D 縮放效果      202
13.3　設計過渡動畫效果    204
13.3.1　設置過渡屬性     204
13.3.2　設置過渡時間     205
13.3.3　設置延遲時間     206
13.3.4　設置過渡動畫類型     207
13.4　設計幀動畫效果      208
13.4.1　設置關鍵幀    208
13.4.2　設置動畫屬性     210
13.5　新手常見疑難問題    212
13.6　實戰技能訓練營      213

第14 章 使用CSS 中的盒子模型     214
14.1 塊級元素與行內級元素    215
14.1.1 塊級元素的應用   215
14.1.2 行內元素的應用   216
14.2 盒子模型  216
14.2.1 定義盒子邊界     217
14.2.2 定義盒子邊框     219
14.2.3 定義盒子補白     220
14.2.4 定義盒子大小     221
14.3 CSS3 新增的盒子模型屬性      222
14.3.1 定義盒子的佈局方向   223
14.3.2 定義盒子的佈局順序   224
14.3.3 定義盒子的佈局位置   225
14.3.4 定義盒子的顯示空間   226
14.3.5 管理盒子空間的大小   227
14.3.6 盒子空間的溢出管理   228
14.4 彈性盒子模型    229
14.4.1 使用彈性盒子     229
14.4.2 設置彈性子元素的位置     231
14.4.3 設置彈性子元素的橫向對齊方式  231
14.4.4 設置彈性子元素的縱向對齊方式  233
14.4.5 設置彈性子元素的換行方式      234
14.5 新手常見疑難問題    235
14.6 實戰技能訓練營      236

第15 章 CSS+DIV 佈局的浮動與定位   237
15.1 定義DIV   238
15.1.1 什麽是DIV    238
15.1.2 創建DIV    238
15.2 網頁元素的定位      238
15.2.1 靜態定位    239
15.2.2 相對定位    239
15.2.3 絕對定位    240
15.2.4 固定定位    241
15.2.5 浮動定位    241
15.3 其他CSS 佈局定位方式   242
15.3.1 溢出（overflow）定位      243
15.3.2 隱藏（visibility）定位      244
15.3.3 z-index 空間定位    245
15.4 新增CSS3 多列佈局  245
15.4.1 設置列寬度     246
15.4.2 設置列數     246
15.4.3 設置列間距     247
15.4.4 設置列邊框樣式    248
15.5 新手常見疑難問題    250
15.6 實戰技能訓練營      250

第16 章 使用CSS3 佈局網頁版式    251
16.1 認識CSS3 佈局版式  252
16.1.1 將頁面用DIV 分塊     252
16.1.2 設置各塊位置     252
16.1.3 用CSS 定位版式       253
16.2 固定寬度網頁佈局模式    255
16.2.1 網頁單列佈局模式     255
16.2.2 網頁1-2-1 型佈局模式      258
16.2.3 網頁1-3-1 型佈局模式      260
16.3 自動縮放網頁佈局模式    262
16.3.1 1-2-1 等比例變寬佈局   262
16.3.2 1-2-1 單列變寬佈局     262
16.3.3 1-3-1 單側列寬度固定佈局   263
16.3.4 1-3-1 中間列寬度固定佈局   265
16.3.5 1-3-1 雙側列寬度固定佈局   267
16.3.6 1-3-1 中列和左側列寬度固定佈局     269
16.4 新手常見疑難問題    271
16.5 實戰技能訓練營      271

第17 章 設計可響應式的移動網頁     273
17.1 什麽是響應式網頁設計    274
17.2 像素和屏幕分辨率    275
17.3 視口      275
17.3.1 視口的分類和常用屬性     275
17.3.2 媒體查詢    276
17.4 設計響應式網頁的佈局    277
17.4.1 常用佈局類型     277
17.4.2 佈局的實現方式   277
17.4.3 響應式佈局的設計與實現   278
17.5 設計響應式圖片      279
17.5.1 使用<picture> 標簽     279
17.5.2 使用CSS 圖片     280
17.6 設計響應式視頻      281
17.7 設計響應式導航菜單  282
17.8 設計響應式表格      284
17.8.1 隱藏表格中的列    284
17.8.2 滾動表格中的列    285
17.8.3 轉換表格中的列    286
17.9 新手常見疑難問題    288
17.10 實戰技能訓練營     289

第18 章 使用JavaScript 控制CSS3 樣式     290
18.1 JavaScript 語法基礎  291 
18.1.1 什麽是JavaScript       291
18.1.2 數據類型    291
18.1.3 變量    292
18.1.4 運算符      293
18.1.5 流程控制語句     295
18.1.6 JavaScript 中的函數     297
18.2 常見的JavaScript 編寫工具     299
18.2.1 記事本編寫工具   299
18.2.2 Dreamweaver 編寫工具      300
18.3 JavaScript 在HTML 中的使用    300
18.3.1 在HTML 網頁頭中嵌入JavaScript代碼    301
18.3.2 在HTML 網頁中嵌入JavaScript代碼    301
18.3.3 在HTML 網頁的元素事件中嵌入JavaScript代碼    302
18.3.4 在HTML 中調用JavaScript 文件   303
18.3.5 通過JavaScript 偽URL 引入JavaScript腳本代碼    303
18.4 JavaScript 與CSS3 的結合使用  304
18.4.1 動態改變網頁元素     304
18.4.2 改變網頁元素的動態樣式   305
18.4.3 動態定位網頁元素     306
18.4.4 設置網頁元素的顯示與隱藏      307
18.5 HTML5、CSS3 和JavaScript 的搭配應用      308
18.5.1 設定左右移動的圖片   308
18.5.2 製作背景顏色選擇器   310
18.5.3 製作文字跑馬燈效果   312
18.6 新手常見疑難問題    313
18.7 實戰技能訓練營      314

第19 章 使用CSS 設計XML 文檔樣式    315
19.1 XML 語法基礎   316
19.1.1 XML 的基本應用       316
19.1.2 XML 文檔的組成和聲明     317
19.1.3 XML 元素介紹     318
19.2 CSS 修飾XML 文件  319
19.2.1 在XML 中使用CSS   320
19.2.2 設置字體屬性     320
19.2.3 設置色彩屬性     321
19.2.4 設置邊框屬性     322
19.2.5 設置文本屬性     322
19.3 新手常見疑難問題    323
19.4 實戰技能訓練營      323

第20 章 流行的響應式開發框架Bootstrap  325
20.1 Bootstrap 概述   326
20.1.1 Bootstrap 的特色    326
20.1.2 Bootstrap 4 的重大更新      326
20.2 下載與安裝Bootstrap     327
20.2.1 下載Bootstrap      327
20.2.2 安裝Bootstrap      329
20.2.3 使用Bootstrap      329
20.3 使用常用組件    330
20.3.1 使用下拉菜單     330
20.3.2 使用按鈕組    331
20.3.3 使用導航組件     332
20.3.4 綁定導航和下拉菜單   334
20.3.5 使用麵包屑    335
20.3.6 使用廣告屏    335
20.3.7 使用card（卡片）      336
20.3.8 使用進度條    337
20.3.9 使用模態框    340
20.3.10 使用滾動監聽    342
20.4 膠囊導航選項卡（Tab 欄）      344
20.5 新手常見疑難問題    345
20.6 實戰技能訓練營      346

第21 章 項目實訓1——開發連鎖咖啡響應式網站    347
21.1 網站概述  348
21.1.1 網站結構    348
21.1.2 設計效果    348
21.1.3 設計準備    349
21.2 設計首頁佈局    350
21.3 設計可切換導航      351
21.4 主體內容  356
21.4.1 設計輪播廣告區   356
21.4.2 設計產品推薦區   358
21.4.3 設計登錄、註冊按鈕和Logo      359
21.4.4 設計特色展示區   360
21.4.5 設計產品生產流程區   361
21.5 設計底部隱藏導航    364

第22 章 項目實訓2——開發房產企業響應式網站    365
22.1 網站概述  366
22.1.1 網站結構    366
22.1.2 設計效果    366
22.1.3 設計準備    367
22.2 設計主頁  367
22.2.1 主頁佈局    367
22.2.2 設計導航條    368
22.2.3 設計輪播廣告     370
22.2.4 設計功能區    372
22.2.5 設計特色展示     373
22.2.6 設計腳註    377
22.3 設計側邊導航欄      378
22.4 設計登錄頁      380

第23 章 項目實訓3——開發在線購物網站  382
23.1 整體佈局  383
23.1.1 設計分析    383
23.1.2 排版架構    383
23.2 主要模塊設計    384
23.2.1 Logo 與導航區     384
23.2.2 Banner 與資訊區    385
23.2.3 產品類別區域     387
23.2.4 頁腳區域    388

第24 章 項目實訓4——開發企業門戶網站  389
24.1 構思佈局  390
24.1.1 設計分析    390
24.1.2 排版架構    390
24.2 主要模塊設計    391
24.2.1 Logo 與導航菜單       391
24.2.2 Banner 區     392
24.2.3 資訊區      393
24.2.4 版權信息    395