CSS3+DIV網(wǎng)頁樣式與布局（全案例微課版）

第1章　網(wǎng)頁設(shè)計需要學(xué)什么   001
1.1　認識網(wǎng)頁和網(wǎng)站   002
1.1.1　認識網(wǎng)頁    002
1.1.2　認識網(wǎng)站    003
1.2　網(wǎng)頁設(shè)計需要的技術(shù)   004
1.2.1　HTML   004
1.2.2　DIV布局     005
1.2.3　CSS樣式     005
1.2.4　腳本語言JavaScript     006
1.3　網(wǎng)頁文檔的基本結(jié)構(gòu)   007
1.3.1　制作個網(wǎng)頁   007
1.3.2　文檔類型說明     008
1.3.3　html標(biāo)簽     008
1.3.4　頭部標(biāo)簽     008
1.3.5　主體標(biāo)簽     008
1.3.6　注釋標(biāo)簽     009
1.4　網(wǎng)頁設(shè)計的流程   009
1.4.1　網(wǎng)站規(guī)劃     010
1.4.2　搜集資料     010
1.4.3　設(shè)計網(wǎng)頁結(jié)構(gòu)      010
1.4.4　獲取網(wǎng)頁素材      011
1.4.5　搭建網(wǎng)頁DIV層   012
1.4.6　設(shè)計網(wǎng)頁效果      013
1.4.7　測試網(wǎng)頁     013
第2章　網(wǎng)頁實現(xiàn)技術(shù)——HTML5   015
2.1　HTML5中的常用標(biāo)簽  016
2.1.1　基礎(chǔ)標(biāo)簽的應(yīng)用   016
2.1.2　文本格式標(biāo)簽     017
2.1.3　超級鏈接標(biāo)簽     017
2.1.4　列表標(biāo)簽的應(yīng)用   018
2.2　HTML5中的圖像標(biāo)簽  019
2.2.1　插入并編輯網(wǎng)頁中的圖像   020
2.2.2　定義圖像熱點區(qū)域     021
2.2.3　繪制網(wǎng)頁圖形圖像     022
2.3　HTML5中的表單標(biāo)簽  023
2.3.1　文本類輸入框     024
2.3.2　按鈕類輸入框     025
2.3.3　網(wǎng)頁中的按鈕     026
2.3.4　圖像域和文件域   027
2.3.5　設(shè)置表單中的列表     028
2.3.6　表單常用屬性的應(yīng)用    029
2.4　HTML5中的表格標(biāo)簽  030
2.4.1　表格的基本結(jié)構(gòu)    030
2.4.2　使用屬性編輯表格      031
2.4.3　完整的表格標(biāo)簽    033
2.5　HTML5中的多媒體標(biāo)簽    034
2.5.1　audio標(biāo)簽的應(yīng)用   034
2.5.2　在網(wǎng)頁中添加音頻文件  035
2.5.3　認識video標(biāo)簽     036
2.5.4　在網(wǎng)頁中添加視頻文件  037
2.6 標(biāo)簽    039
2.7　標(biāo)簽      040
2.8　新手常見疑難問題     041
2.9 實戰(zhàn)技能訓(xùn)練營   041
第3章　初始CSS3層疊樣式表  042
3.1 CSS概述   043
3.1.1　CSS的功能介紹    043
3.1.2　CSS的發(fā)展歷史    043
3.1.3　CSS的構(gòu)造規(guī)則    044
3.1.4　CSS的注釋   044
3.2 CSS中的常用單位    045
3.2.1　顏色單位     045
3.2.2　長度單位     048
3.3 創(chuàng)建和編輯CSS 文件  049
3.4 在HTML5 中調(diào)用CSS 的方法    051
3.4.1　行內(nèi)樣式     051
3.4.2　內(nèi)嵌樣式     052
3.4.3　鏈接樣式     053
3.4.4　導(dǎo)入樣式      054
3.5 調(diào)用方法的優(yōu)先級     055
3.5.1　行內(nèi)樣式和內(nèi)嵌樣式比較     055
3.5.2　內(nèi)嵌樣式和鏈接樣式比較     055
3.5.3　鏈接樣式和導(dǎo)入樣式     056
3.6　新手常見疑難問題     057
3.7　實戰(zhàn)技能訓(xùn)練營   057
第4 章 CSS3 選擇器的特性及應(yīng)用    058
4.1　認識CSS 選擇器      059
4.2　選擇器的應(yīng)用     059
4.2.1　標(biāo)簽選擇器   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　結(jié)構(gòu)偽類選擇器    067
4.2.10　UI 元素狀態(tài)偽類選擇器     068
4.3 選擇器聲明       069
4.3.1　集體聲明      069
4.3.2　多重嵌套聲明       070
4.4　CSS3 的繼承特性     070
4.4.1　繼承關(guān)系      070
4.4.2　CSS 繼承的運用     071
4.5 CSS3 的層疊特性     072
4.5.1　同一選擇器被多次定義的處理      072
4.5.2　同一標(biāo)簽運用不同類型選擇器的處理   072
4.6　新手常見疑難問題     073
4.7　實戰(zhàn)技能訓(xùn)練營   073
第5 章 使用CSS3 設(shè)計字體與文本樣式    074
5.1 設(shè)置字體樣式     075
5.1.1　控制字體類型      075
5.1.2　定義字體大小      076
5.1.3　定義字體風(fēng)格      077
5.1.4　控制文字的粗細    077
5.1.5　將小寫字母轉(zhuǎn)換為大寫字母  078
5.1.6　設(shè)置字體的復(fù)合屬性    079
5.1.7　定義文字的顏色    080
5.2　設(shè)置文本的高級樣式   081
5.2.1　添加文本的陰影效果    081
5.2.2　設(shè)置文本溢出效果      082
5.2.3　控制文本的換行    082
5.2.4　設(shè)置字體尺寸      083
5.3　設(shè)置文本間距與對齊方式   084
5.3.1　設(shè)置單詞之間的間隔     084
5.3.2　設(shè)置字符之間的間隔     085
5.3.3　為文本添加裝飾線       086
5.3.4　設(shè)置垂直對齊方式       086
5.3.5　轉(zhuǎn)換文本的大小寫       088
5.3.6　設(shè)置文本的水平對齊方式     088
5.3.7　設(shè)置文本的縮進效果     090
5.3.8　設(shè)置文本的行間距       090
5.3.9　文本的空白處理     091
5.3.10　文本的反排     092
5.4　新手常見疑難問題     093
5.5　實戰(zhàn)技能訓(xùn)練營   093
第6 章　使用CSS3 設(shè)計圖片與邊框樣式    095
6.1 圖片樣式基礎(chǔ)     096
6.1.1　圖片大小     096
6.1.2　圖片對齊     097
6.1.3　文字環(huán)繞圖片       099
6.1.4　圖片與文字的間距       100
6.2　邊框樣式基礎(chǔ)     101
6.2.1　邊框樣式     101
6.2.2　邊框顏色     103
6.2.3　邊框線寬     104
6.2.4　邊框復(fù)合屬性      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 實戰(zhàn)技能訓(xùn)練營   110
第7 章 使用CSS3 控制網(wǎng)頁背景樣式   111
7.1　背景樣式基礎(chǔ)     112
7.1.1　設(shè)置背景顏色      112
7.1.2　網(wǎng)頁板塊配色      113
7.1.3　設(shè)置背景圖像      114
7.1.4　平鋪背景圖像      115
7.1.5　固定背景圖像      116
7.1.6　定位背景圖像      117
7.2　新增控制背景屬性     119
7.2.1　背景圖像大小      119
7.2.2　背景顯示區(qū)域      120
7.2.3　裁剪背景圖像      121
7.2.4　背景復(fù)合屬性      122
7.3　網(wǎng)頁背景漸變效果     123
7.3.1　線性漸變效果      123
7.3.2　徑向漸變效果      124
7.4 新手常見疑難問題     125
7.5 實戰(zhàn)技能訓(xùn)練營   126
第8 章 使用CSS3 定義鏈接和鼠標(biāo)樣式    127
8.1　鏈接樣式基礎(chǔ)     128
8.1.1　設(shè)置鏈接樣式      128
8.1.2　定義下劃線樣式    130
8.1.3　定義鏈接背景圖    131
8.1.4　定義鏈接提示信息      132
8.1.5　定義鏈接按鈕      133
8.2　定義鼠標(biāo)指針特效     134
8.2.1　鼠標(biāo)樣式基礎(chǔ)      134
8.2.2　變幻鼠標(biāo)光標(biāo)      137
8.2.3　定義滾動條樣式    138
8.3 新手常見疑難問題     139
8.4　實戰(zhàn)技能訓(xùn)練營   140
第9 章　使用CSS3 設(shè)計表格樣式     141
9.1　表格樣式基礎(chǔ)     142
9.1.1　設(shè)置表格顏色      142
9.1.2　設(shè)置表格邊框      143
9.1.3　設(shè)置表格邊框?qū)挾?     144
9.1.4　設(shè)置表格邊框顏色      145
9.1.5　設(shè)置表格標(biāo)題的位置    145
9.1.6　隱藏空單元格      146
9.1.7　設(shè)置單元格的邊距      147
9.2　設(shè)置懸浮變色的表格   148
9.3　使用表格布局網(wǎng)頁     151
9.4　新手常見疑難問題     153
9.5　實戰(zhàn)技能訓(xùn)練營   153
第10 章　使用CSS3 設(shè)計表單樣式    154
10.1　表單樣式基礎(chǔ)    155
10.1.1　表單字體樣式     155
10.1.2　表單邊框樣式     156
10.1.3　表單背景樣式     157
10.1.4　設(shè)計表單按鈕樣式     158
10.1.5　設(shè)計下拉菜單樣式     159
10.2　制作用戶登錄頁面    160
10.3　制作用戶注冊頁面    161
10.4　新手常見疑難問題    162
10.5 實戰(zhàn)技能訓(xùn)練營      163
第11 章　使用CSS3 設(shè)計列表與菜單樣式   164
11.1 項目列表樣式    165
11.1.1　無序項目列表      165
11.1.2　有序項目列表      166
11.1.3　自定義項目列表    167
11.1.4　圖片列表樣式      168
11.1.5　設(shè)置圖片列表的位置    169
11.1.6　列表復(fù)合屬性的應(yīng)用    170
11.1.7　將段落轉(zhuǎn)變成列表      171
11.2　菜單樣式基礎(chǔ)    172
11.2.1　制作動態(tài)導(dǎo)航菜單      172
11.2.2　制作水平方向菜單      173
11.2.3　制作多級菜單列表      175
11.2.4　模擬制作SOSO 導(dǎo)航欄     177
11.3　新手常見疑難問題    179
11.4　實戰(zhàn)技能訓(xùn)練營      179
第12 章　使用CSS3 濾鏡設(shè)計網(wǎng)頁圖片特效     180
12.1　CSS3 中的濾鏡      181
12.2　設(shè)置基本濾鏡效果    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　使用復(fù)合濾鏡效果    188
12.3　新手常見疑難問題    189
12.4　實戰(zhàn)技能訓(xùn)練營      189
第13 章 使用CSS3 設(shè)計動畫效果    191
13.1　2D 轉(zhuǎn)換動畫效果     192
13.1.1　添加2D 移動效果      192
13.1.2　添加2D 旋轉(zhuǎn)效果      193
13.1.3　添加2D 縮放效果      194
13.1.4　添加2D 傾斜效果      195
13.1.5　添加2D 綜合變換效果      196
13.2　3D 轉(zhuǎn)換動畫效果     197
13.2.1　添加3D 移動效果      197
13.2.2　添加3D 旋轉(zhuǎn)效果      200
13.2.3　添加3D 縮放效果      202
13.3　設(shè)計過渡動畫效果    204
13.3.1　設(shè)置過渡屬性     204
13.3.2　設(shè)置過渡時間     205
13.3.3　設(shè)置延遲時間     206
13.3.4　設(shè)置過渡動畫類型     207
13.4　設(shè)計幀動畫效果      208
13.4.1　設(shè)置關(guān)鍵幀    208
13.4.2　設(shè)置動畫屬性     210
13.5　新手常見疑難問題    212
13.6　實戰(zhàn)技能訓(xùn)練營      213
第14 章 使用CSS 中的盒子模型     214
14.1 塊級元素與行內(nèi)級元素    215
14.1.1 塊級元素的應(yīng)用   215
14.1.2 行內(nèi)元素的應(yīng)用   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 設(shè)置彈性子元素的位置     231
14.4.3 設(shè)置彈性子元素的橫向?qū)R方式  231
14.4.4 設(shè)置彈性子元素的縱向?qū)R方式  233
14.4.5 設(shè)置彈性子元素的換行方式      234
14.5 新手常見疑難問題    235
14.6 實戰(zhàn)技能訓(xùn)練營      236
第15 章 CSS DIV 布局的浮動與定位   237
15.1 定義DIV   238
15.1.1 什么是DIV    238
15.1.2 創(chuàng)建DIV    238
15.2 網(wǎng)頁元素的定位      238
15.2.1 靜態(tài)定位    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 設(shè)置列寬度     246
15.4.2 設(shè)置列數(shù)     246
15.4.3 設(shè)置列間距     247
15.4.4 設(shè)置列邊框樣式    248
15.5 新手常見疑難問題    250
15.6 實戰(zhàn)技能訓(xùn)練營      250
第16 章 使用CSS3 布局網(wǎng)頁版式    251
16.1 認識CSS3 布局版式  252
16.1.1 將頁面用DIV 分塊     252
16.1.2 設(shè)置各塊位置     252
16.1.3 用CSS 定位版式       253
16.2 固定寬度網(wǎng)頁布局模式    255
16.2.1 網(wǎng)頁單列布局模式     255
16.2.2 網(wǎng)頁1-2-1 型布局模式      258
16.2.3 網(wǎng)頁1-3-1 型布局模式      260
16.3 自動縮放網(wǎng)頁布局模式    262
16.3.1 1-2-1 等比例變寬布局   262
16.3.2 1-2-1 單列變寬布局     262
16.3.3 1-3-1 單側(cè)列寬度固定布局   263
16.3.4 1-3-1 中間列寬度固定布局   265
16.3.5 1-3-1 雙側(cè)列寬度固定布局   267
16.3.6 1-3-1 中列和左側(cè)列寬度固定布局     269
16.4 新手常見疑難問題    271
16.5 實戰(zhàn)技能訓(xùn)練營      271
第17 章 設(shè)計可響應(yīng)式的移動網(wǎng)頁     273
17.1 什么是響應(yīng)式網(wǎng)頁設(shè)計    274
17.2 像素和屏幕分辨率    275
17.3 視口      275
17.3.1 視口的分類和常用屬性     275
17.3.2 媒體查詢    276
17.4 設(shè)計響應(yīng)式網(wǎng)頁的布局    277
17.4.1 常用布局類型     277
17.4.2 布局的實現(xiàn)方式   277
17.4.3 響應(yīng)式布局的設(shè)計與實現(xiàn)   278
17.5 設(shè)計響應(yīng)式圖片      279
17.5.1 使用 標(biāo)簽     279
17.5.2 使用CSS 圖片     280
17.6 設(shè)計響應(yīng)式視頻      281
17.7 設(shè)計響應(yīng)式導(dǎo)航菜單  282
17.8 設(shè)計響應(yīng)式表格      284
17.8.1 隱藏表格中的列    284
17.8.2 滾動表格中的列    285
17.8.3 轉(zhuǎn)換表格中的列    286
17.9 新手常見疑難問題    288
17.10 實戰(zhàn)技能訓(xùn)練營     289
第18 章 使用JavaScript 控制CSS3 樣式     290
18.1 JavaScript 語法基礎(chǔ)  291 
18.1.1 什么是JavaScript       291
18.1.2 數(shù)據(jù)類型    291
18.1.3 變量    292
18.1.4 運算符      293
18.1.5 流程控制語句     295
18.1.6 JavaScript 中的函數(shù)     297
18.2 常見的JavaScript 編寫工具     299
18.2.1 記事本編寫工具   299
18.2.2 Dreamweaver 編寫工具      300
18.3 JavaScript 在HTML 中的使用    300
18.3.1 在HTML 網(wǎng)頁頭中嵌入JavaScript代碼    301
18.3.2 在HTML 網(wǎng)頁中嵌入JavaScript代碼    301
18.3.3 在HTML 網(wǎng)頁的元素事件中嵌入JavaScript代碼    302
18.3.4 在HTML 中調(diào)用JavaScript 文件   303
18.3.5 通過JavaScript 偽URL 引入JavaScript腳本代碼    303
18.4 JavaScript 與CSS3 的結(jié)合使用  304
18.4.1 動態(tài)改變網(wǎng)頁元素     304
18.4.2 改變網(wǎng)頁元素的動態(tài)樣式   305
18.4.3 動態(tài)定位網(wǎng)頁元素     306
18.4.4 設(shè)置網(wǎng)頁元素的顯示與隱藏      307
18.5 HTML5、CSS3 和JavaScript 的搭配應(yīng)用      308
18.5.1 設(shè)定左右移動的圖片   308
18.5.2 制作背景顏色選擇器   310
18.5.3 制作文字跑馬燈效果   312
18.6 新手常見疑難問題    313
18.7 實戰(zhàn)技能訓(xùn)練營      314
第19 章 使用CSS 設(shè)計XML 文檔樣式    315
19.1 XML 語法基礎(chǔ)   316
19.1.1 XML 的基本應(yīng)用       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 設(shè)置字體屬性     320
19.2.3 設(shè)置色彩屬性     321
19.2.4 設(shè)置邊框?qū)傩?    322
19.2.5 設(shè)置文本屬性     322
19.3 新手常見疑難問題    323
19.4 實戰(zhàn)技能訓(xùn)練營      323
第20 章 流行的響應(yīng)式開發(fā)框架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 使用導(dǎo)航組件     332
20.3.4 綁定導(dǎo)航和下拉菜單   334
20.3.5 使用面包屑    335
20.3.6 使用廣告屏    335
20.3.7 使用card（卡片）      336
20.3.8 使用進度條    337
20.3.9 使用模態(tài)框    340
20.3.10 使用滾動監(jiān)聽    342
20.4 膠囊導(dǎo)航選項卡（Tab 欄）      344
20.5 新手常見疑難問題    345
20.6 實戰(zhàn)技能訓(xùn)練營      346
第21 章 項目實訓(xùn)1——開發(fā)連鎖咖啡響應(yīng)式網(wǎng)站    347
21.1 網(wǎng)站概述  348
21.1.1 網(wǎng)站結(jié)構(gòu)    348
21.1.2 設(shè)計效果    348
21.1.3 設(shè)計準(zhǔn)備    349
21.2 設(shè)計首頁布局    350
21.3 設(shè)計可切換導(dǎo)航      351
21.4 主體內(nèi)容  356
21.4.1 設(shè)計輪播廣告區(qū)   356
21.4.2 設(shè)計產(chǎn)品推薦區(qū)   358
21.4.3 設(shè)計登錄、注冊按鈕和Logo      359
21.4.4 設(shè)計特色展示區(qū)   360
21.4.5 設(shè)計產(chǎn)品生產(chǎn)流程區(qū)   361
21.5 設(shè)計底部隱藏導(dǎo)航    364
第22 章 項目實訓(xùn)2——開發(fā)房產(chǎn)企業(yè)響應(yīng)式網(wǎng)站    365
22.1 網(wǎng)站概述  366
22.1.1 網(wǎng)站結(jié)構(gòu)    366
22.1.2 設(shè)計效果    366
22.1.3 設(shè)計準(zhǔn)備    367
22.2 設(shè)計主頁  367
22.2.1 主頁布局    367
22.2.2 設(shè)計導(dǎo)航條    368
22.2.3 設(shè)計輪播廣告     370
22.2.4 設(shè)計功能區(qū)    372
22.2.5 設(shè)計特色展示     373
22.2.6 設(shè)計腳注    377
22.3 設(shè)計側(cè)邊導(dǎo)航欄      378
22.4 設(shè)計登錄頁      380
第23 章 項目實訓(xùn)3——開發(fā)在線購物網(wǎng)站  382
23.1 整體布局  383
23.1.1 設(shè)計分析    383
23.1.2 排版架構(gòu)    383
23.2 主要模塊設(shè)計    384
23.2.1 Logo 與導(dǎo)航區(qū)     384
23.2.2 Banner 與資訊區(qū)    385
23.2.3 產(chǎn)品類別區(qū)域     387
23.2.4 頁腳區(qū)域    388
第24 章 項目實訓(xùn)4——開發(fā)企業(yè)門戶網(wǎng)站  389
24.1 構(gòu)思布局  390
24.1.1 設(shè)計分析    390
24.1.2 排版架構(gòu)    390
24.2 主要模塊設(shè)計    391
24.2.1 Logo 與導(dǎo)航菜單       391
24.2.2 Banner 區(qū)     392
24.2.3 資訊區(qū)      393
24.2.4 版權(quán)信息    395