《Div+CSS 3.0網頁布局案例精粹（升級版）》是2019年12月電子工業出版社出版的圖書，作者是張曉景。
基本介紹
- 中文名：Div+CSS 3.0網頁布局案例精粹（升級版）
- 作者：張曉景
- ISBN：9787121377020
- 頁數：404
- 定價：￥79.9
- 出版社：電子工業出版社出版
- 出版時間：2019年12月
- 開本：16
內容簡介,目錄,
內容簡介
本書系統地介紹了CSS樣式的基礎理論和實際套用技術，並結合實例來介紹Div+CSS布局製作網頁的方法和技巧。在實例的製作過程中介紹CSS樣式設計各方面知識的同時，還結合實際網頁製作中可能遇到的問題提供解決問題的思路、方法和技巧，使初學者也可以輕鬆地掌握Div+CSS布局的方式，製作出精美的網頁。本書全面展現了運用Div+CSS進行網頁設計布局的方法，詳細的講解步驟配合圖示，使得每個步驟清晰易懂、一目了然。收中不但套用大量實例對重點難點進行深入的剖析，而且還結合作者多年的網頁設計與教學經驗進行點撥，使讀者學以致用。並且在書中還穿插介紹了有關CSS和HTML的相關知識，立求使讀者了解到最新的網頁設計製作技術。本書內容豐富、結構清晰，注重思維鍛鍊與實踐套用，適合初、中級網頁設計愛好者以及希望學習Web標準對原有網站進行重構的網頁設計者。本書配套資源包中還提供了書中所有實例源檔案和相關視頻教程，供讀者學習和參考。
目錄
第一章 網頁和網站製作流程
1.1 認識網頁 2
1.1.1 網頁和網站 2
1.1.2 網頁的基本構成元素 2
1.2 什麼是網頁設計 3
1.2.1 網頁設計概述 3
1.2.2 網頁設計和網頁製作 4
1.2.3 網頁設計的特點 5
1.2.4 網頁製作相關術語 6
1.3 網頁設計中所涵蓋的內容 11
1.3.1 視聽元素 11
1.3.2 版式設計 11
1.4 如何設計網頁 12
1.4.1 網頁設計的基本原則 12
1.4.2 網頁設計成功的要素 13
1.4.3 網頁設計風格及色彩搭配 14
1.5 網頁設計的原則 14
1.5.1 為用戶考慮的原則 14
1.5.2 主題突出原則 15
1.5.3 整體原則 16
1.5.4 內容與形式相統一 16
1.5.5 更新和維護的原則 17
1.6 網頁設計師應具備的素質 17
1.6.1 藝術素質 17
16.2 技能素質 18
1.6.3 綜合素質 18
1.7 網站的製作流程 19
1.7.1 前期策劃 19
1.7.2 原型設計 20
1.7.3 頁面美化 21
1.7.4 頁面開發 22
1.7.5 後期維護 22
1.8 靜態頁面的製作流程 22
1.8.1 觀察設計稿 22
1.8.2 拆分設計稿 23
1.8.3 網頁設計實現 23
第二章 CSS樣式入門
2.1 CSS的基本概念 25
2.1.1 CSS的特點 25
2.1.2 CSS的基本語法 25
2.1.3 CSS的衝突 26
技能案例：使用就近原則 26
2.2 網頁設計中的CSS 28
2.2.1 如何使用CSS 28
2.2.2 CSS能做什麼 29
2.2.3 CSS不能做什麼 30
2.3 CSS的基本用法 30
2.3.1 內聯樣式 30
2.3.2 嵌入樣式 30
技能案例：設定嵌入樣式 30
2.3.3 外部樣式 31
2.4 CSS的單位和值 31
2.4.1 定義顏色值 32
2.4.2 定義字型 33
2.5 CSS基礎選擇符 34
2.5.1 通配選擇符 34
2.5.2 標籤選擇符 35
2.5.3 id選擇符 35
2.5.4 類選擇符 35
技能案例：使用類選擇符定義樣式 36
2.5.5 群組選擇符 36
2.5.6 基礎選擇符瀏覽器適配 36
2.6 CSS的層次選擇符 36
2.6.1 後代選擇符 37
技能案例：使用後代選擇符定義樣式 37
2.6.2 子選擇符 37
2.6.3 相鄰兄弟選擇符 37
技能案例：使用相鄰兄弟選擇符設定樣式 37
2.6.4 通用兄弟選擇符 38
技能案例：使用通用兄弟選擇符定義樣式 38
2.6.5 層次選擇符瀏覽器適配 39
2.7 偽類和偽元素 39
2.7.1動態偽類選擇符 39
2.7.2 目標偽類選擇符 40
2.7.3 語言偽類選擇器 40
2.7.4 UI元素狀態偽類選擇器 40
2.7.5 結構偽類選擇器 41
2.7.6 偽類選擇符瀏覽器適配 42
2.7.7 偽元素選擇符 44
2.8 套用案例——為頁面添加CSS樣式 45
2.8.1 設計分析 45
2.8.2 製作步驟 45
2.8.3 案例總結 51
2.9 舉一反三——產品介紹網站 51
2.9.1 案例分析 52
2.9.2 視頻操作 52
第三章 使用DIV+CSS布局頁面
3.1 定義Div 55
3.1.1 什麼是Div 55
3.1.2 插入Div 55
3.1.3 Div的嵌套和固定格式 56
3.2 CSS布局定位 57
3.2.1 浮動定位 57
3.2.2 position定位 60
3.3 可視化盒模型 62
3.3.1 盒子模型 62
3.3.2 視覺可視化模型 64
3.3.3 空白邊疊加 64
3.4 常見的網頁布局方式 65
3.4.1 居中布局設計 65
3.4.2 浮動布局設計 66
3.4.3 高度自適應 70
3.5 盒模型的控制屬性 70
3.5.1 overflow 70
技能案例：顯示滾動條 71
3.5.2 overflow-x 71
技能案例：顯示橫向滾動條 71
3.5.3 overflow-y 72
技能案例：顯示豎向滾動條 72
3.6 套用案例——使用DIV+CSS布局頁面 73
3.6.1 設計分析 73
3.6.2 製作步驟 73
3.6.3 案例總結 78
3.7 舉一反三——製作健康網站 78
3.7.1 案例分析 78
3.7.2 視頻操作 79
第四章 使用CSS控制網頁中的背景
4.1 背景顏色 81
4.1.1 設定頁面背景顏色 81
技能案例：添加背景顏色 81
4.1.2 設定塊背景顏色 82
技能案例：添加塊背景 82
4.1.3 漸變背景 83
技能案例：設定線性漸變背景 83
技能案例：設定徑向漸變背景 84
4.2 背景圖片 86
4.2.1 為頁面設定背景圖片 86
技能案例：設定背景圖片 86
4.2.2 背景圖片的重複 87
技能案例：設定背景圖片的重複 87
4.2.3 設定背景圖片的位置 88
技能案例：設定背景圖片的位置 88
4.2.4 設定背景滾動 90
技能案例：設定頁面背景滾動 90
4.2.5 背景樣式縮寫的方式 90
4.3 背景定位 91
4.3.1 背景定位屬性的語法 91
4.3.2 背景定位屬性的瀏覽器適配 91
4.4 背景裁切 92
4.4.1 背景裁切屬性的語法 92
4.4.2 背景裁切的瀏覽器適配 92
4.5 背景大小 93
4.5.1 背景大小屬性的語法 93
4.5.2 背景大小瀏覽器的適配 93
4.6 多重背景圖像 94
4.6.1 多重背景圖像屬性的語法 94
4.6.2 多重背景圖像的瀏覽器適配 95
4.6.3 CSS多背景屬性的優勢 95
4.7 套用案例——製作金融類網站頁面 96
4.7.1 設計分析 96
4.7.2 製作步驟 96
4.7.3 案例總結 102
4.8 舉一反三——製作電子商品網站 102
4.8.1 案例分析 103
4.8.2 視頻操作 103
第五章 使用CSS控制頁面文字樣式
5.1 控制文本樣式 106
5.1.1 文本字型和大小 106
技能案例：設定網頁中的文字字型 107
5.1.2 文本顏色和粗細 110
技能案例：設定網頁中文字的顏色 110
5.1.3 文本的3種樣式 112
技能案例：設定網頁中文字的樣式 112
5.1.4 文本的美化方式 113
技能案例：為網頁中的文字設定下劃線效果 113
5.1.5 英文字母大小寫 113
5.2 控制段落樣式 114
5.2.1 段落水平對齊 114
技能案例：設定文字左對齊、水平居中與右對齊 114
5.2.2 段落垂直對齊 116
技能案例：設定文本段落垂直對齊 116
5.2.3 行間距和字間距 117
5.2.4 首字下沉 118
技能案例：設定網頁中段落首字母下沉 118
5.3 文字陰影及模糊 119
5.3.1 文字陰影及模糊屬性的語法 119
技能案例：設定網頁中文本的陰影 119
5.3.2 文字陰影屬性的瀏覽器適配 120
5.4 文字溢出 120
5.4.1 文字溢出屬性的語法 121
5.4.2 文字溢出屬性瀏覽器的適配 121
5.5 文字斷開轉行 121
5.5.1 文字斷開轉行屬性的語法 121
5.5.2 文字轉行屬性的瀏覽器適配 122
5.6 套用實例——設計類網站 122
5.6.1 設計分析 123
5.6.2 製作步驟 123
5.6.3 案例總結 129
5.7 舉一反三——製作社區類網站 129
5.7.1 案例分析 130
5.7.2 視頻操作 130
第六章 使用CSS控制圖片樣式
6.1圖片樣式 132
6.1.1 圖片框線設定 132
技能案例：設定圖片框線 132
6.1.2 圖片縮放設定 135
技能案例：設定網頁中圖片的縮放 135
6.2 圖片對齊 137
6.2.1 水平對齊設定 137
技能案例：設定圖片的水平對齊 137
6.2.2 垂直對齊設定 138
6.3 圖文混排 139
6.3.1 文本混排 140
技能案例：設定網頁中的圖文混排 140
6.3.2 設定混排間距 140
6.4 圖像框線 141
6.4.1 圖像框線屬性的語法介紹 141
6.4.1 圖像框線的瀏覽器適配 141
6.5 框線圓角 142
6.5.1 框線圓角屬性的語法 142
6.5.2 4個子屬性 143
6.5.3 框線圓角屬性的瀏覽器適配 144
6.6 框線陰影 144
6.6.1 框線陰影屬性的語法 145
6.6.2框線陰影瀏覽器的適配 145
6.7 框線顏色 146
6.7.1 框線顏色屬性的語法 146
6.7.2 框線顏色的瀏覽器適配 147
6.8 套用實例——製作婚慶網站頁面 147
6.8.1 設計分析 147
6.8.2 製作步驟 148
6.8.3 案例總結 153
6.9 舉一反三——產品介紹網站 153
6.9.1 案例分析 154
6.9.2 視頻操作 154
第七章 使用CSS控制列表樣式
7.1 列表控制概述 155
7.1.1 列表控制原則 155
7.1.2 列表的類型及使用 155
技能案例：使用uI製作無序列表 155
技能案例：使用ol製作無序列表 156
技能案例：使用dl製作列表 156
7.1.3 改變項目樣式 157
技能案例：製作突出的列表樣式 157
7.1.4 圖片符號 158
技能案例：製作圖片符號列表 158
7.2 使用列表製作實用選單 159
7.2.1 無需表格的選單 159
技能案例：製作豎排選單 159
7.2.2 選單的橫豎轉換 161
技能案例：製作橫排選單 161
技能案例：製作下拉選單 162
7.3 Opacity 164
7.3.1 Opacity 語法 164
技能案例：為圖片設定透明度 164
7.3.2 Opacity的瀏覽器適配 165
7.4 CSS 顏色模式 165
7.4.1 HSL colors語法 165
技能案例：使用HSL顏色模式 165
7.4.2 HSLA colors 語法 166
技能案例：使用HSLA顏色模式 166
7.4.3 RGBA colors語法 167
技能案例：使用RGBA顏色模式 167
7.4.4 HSL、HSLA和RGBA colors的瀏覽器適配 168
7.5 套用實例——製作音樂網站 169
7.5.1 設計分析 170
7.5.2 製作步驟 170
7.5.3 案例總結 174
7.6 舉一反三——製作設計工作室網站 174
7.6.1 案例分析 174
7.6.2 視頻操作 175
第八章 使用CSS控制表單樣式
8.1 表單設計概述 177
8.1.1 表單的設計原則 177
8.1.2 表單套用分類 178
8.2 表單的設計 179
8.2.1 表單和表單元素 179
8.2.2 標籤、欄位集和圖例 183
技能案例：製作表單 183
8.2.3 使用CSS控制文本欄位 185
技能案例：使用CSS樣式更改表單外觀 185
8.2.4 使用CSS控制複選框與單選框 185
技能案例：使用CSS樣式更改表單外觀2 186
8.2.5 使用CSS控制列表與跳轉選單 186
技能案例：使用CSS樣式更改表單外觀3 186
8.3 套用實例——製作用戶註冊頁面 187
8.3.1 設計分析 187
8.3.2 製作步驟 187
8.3.3 案例總結 195
8.4 舉一反三——製作用戶登錄頁面 195
8.4.1 案例分析 196
8.4.2 視頻操作 196
第九章 使用CSS美化瀏覽器效果
9.1 使用CSS控制超連結 199
9.1.1 認識超連結 199
9.1.2 關於連結路徑 200
9.1.3 超連結屬性控制 202
技能案例：設定超連結屬性 203
9.1.4 偽元素的內容控制屬性 205
技能案例：使用content屬性 206
9.1.5 圖像映射 206
技能案例：設定熱點連結 206
9.1.6 連結的打開方式 208
9.2 超連結特效 208
9.2.1 按鈕式超連結 208
技能案例：製作按鈕式超連結 208
9.2.2 浮雕式超連結 209
技能案例：製作浮雕式超連結 209
9.3 滑鼠特效 210
9.3.1 CSS控制滑鼠箭頭 210
9.3.2 滑鼠變化的超連結 211
技能案例：設定超連結的滑鼠變化 211
9.4 box-sizing 212
9.4.1 box-sizing屬性語法 212
9.4.2 box-sizing的瀏覽器適配 212
技能案例：為框線添加陰影 213
9.5 resize 213
9.5.1 resize屬性 213
9.5.2 resize的瀏覽器適配 214
9.6 outline 214
9.6.1 outline屬性語法 214
9.6.2 outline的瀏覽器適配 215
9.7 nav-index 216
9.7.1 nav-index屬性語法 216
9.7.2 nav-index的瀏覽器適配 216
9.8 套用實例——製作產品宣傳網站頁面 216
9.8.1 設計分析 217
9.8.2 製作步驟 217
9.8.3 案例總結 225
9.9 舉一反三——製作運輸公司網站頁面 225
9.9.1 案例分析 225
9.9.2 視頻操作 226
第十章 使用CSS控制變形動畫效果
10.1 CSS變形屬性簡介 228
10.1.1 變形屬性與函式 228
10.1.2 變形屬性的瀏覽器適配 228
10.2 網頁元素的2D變形效果 230
10.2.1 旋轉變形 230
技能案例：實現元素的旋轉效果 230
10.2.2 縮放和翻轉變形 231
技能案例：實現元素的縮放效果 231
10.2.3 移動變形 232
技能案例：實現元素的縮放效果 232
10.2.4 傾斜變形 233
技能案例：實現網頁元素的傾斜效果 234
10.2.5 矩陣變形 235
10.2.6 定義變形的中心點 235
10.2.7 同時使用多個變形函式 236
10.3 網頁元素3D變形效果 236
10.3.1 3D位移變形 236
技能案例：實現網頁元素的3D位移效果 237
10.3.2 3D旋轉變形 238
技能案例：實現網頁元素的3D旋轉效果 238
10.3.3 3D縮放變形 240
技能案例：實現網頁元素的3D縮放效果 240
10.3.4 3D矩陣變形 241
10.4 CSS過渡效果 242
10.4.1 過渡屬性簡介 242
10.4.2 如何創建過度動畫 242
10.4.3 實現過渡效果 243
10.4.4 設定過渡時間 243
10.5 套用實例——網頁元素變形過渡效果 244
10.5.1 設計分析 244
10.5.2 製作步驟 244
10.5.3 案例總結 247
10.6 舉一反三——製作關鍵幀動畫效果 247
10.6.1 案例分析 247
10.6.2 視頻操作 248
第十一章 CSS與JavaScript的綜合套用
11.1 什麼是JavaScript 250
11.1.1 了解JavaScript 250
技能案例：在頁面中嵌入JavaScript代碼 251
11.1.2 JavaScript的特點 252
11.1.3 JavaScript的套用範圍 253
11.1.4 CSS樣式與JavaScript 255
11.2 JavaScript的語法基礎 255
11.2.1 JavaScript的基本架構 255
技能案例：使用JavaScript實現彈出提示框 256
11.2.2 JavaScript的基本語法 256
11.2.3 數據類型和變數 259
11.2.4 表達式和運算符 260
11.2.5 基本語句 260
技能案例：使用if語句 261
技能案例：使用for語句 261
11.3 JQuery 262
11.3.1 JQuery Mobile 262
11.3.2 JQuery UI 263
技能案例：創建jQuery UI組件 264
11.4 其他JavaScript框架 264
11.4.1 Raect 264
11.4.2 Vue 265
11.4.3 Angular 265
11.5 套用實例——在網頁中套用互動效果 266
11.5.1 設計分析 267
11.5.2 製作步驟 267
11.5.3 案例總結 276
11.6 舉一反三——製作婚紗攝影網站 276
11.6.1 案例分析 277
11.6.2 視頻操作 278
第十二章 CSS與XML的綜合套用
12.1 XML基礎 280
12.1.1 XML的特點 280
技能案例：創建XML頁面 280
12.1.2 XML與HTML 281
技能案例：調用XML檔案 282
12.1.3 XML基本語法 283
12.1.4 格式正確的XML文檔 286
12.2 XML與CSS的連結 287
12.2.1 使用xml:stylesheet處理指令 287
技能案例：使用CSS來格式化XML文檔 287
12.2.2 使用@import指令 289
12.3 XML與CSS的套用 289
12.3.1 顯示學生信息XML文檔 289
技能案例：創建顯示學生信息得XML檔案 289
12.3.2 XML文檔實現隔行變色的表格 291
技能案例：實現XML檔案隔行變色信息表 291
12.4 套用實例——在頁面中調用XML數據 294
12.4.1 設計分析 295
12.4.2 製作步驟 295
12.4.3 案例總結 300
12.5 舉一反三——製作企業網站 300
12.5.1 案例分析 300
12.5.2 視頻操作 301
第十三章 CSS與Ajax的綜合套用
13.1 了解Ajax 303
13.1.1 Ajax簡介 303
13.1.2 Ajax的關鍵元素 304
13.1.3 Ajax的優勢 305
13.1.4 實現Ajax的步驟 305
13.1.5 使用CSS的必要性 306
13.2 Ajax基礎 307
13.2.1 創建XMLHttpRequest對象 307
技能案例：創建Ajax對象 307
13.2.2 發出Ajax請求 308
技能案例：添加表單並獲取數據 308
13.2.3 處理伺服器回響 309
技能案例：添加處理伺服器回響的代碼 309
13.2.4 使用CSS樣式 309
技能案例：為案例添加CSS樣式 309
13.3 HTML 簡介 310
13.3.1 HTML 標籤 310
13.3.2 HTML 事件屬性 311
13.3.3 HTML 標準屬性 313
13.4 套用實例——使用Ajax實現頁面特效 313
13.4.1 設計分析 314
13.4.2 製作步驟 314
13.4.3 案例總結 322
13.5 舉一反三——通過Ajax實現可拖動Div塊 322
13.5.1 案例分析 322
13.5.2 視頻操作 323
第十四章 綜合商業案例
14.1綜合實例——製作遊戲類網站 325
14.1.1 設計分析 325
14.1.2 製作步驟 325
製作網頁頂部導航欄 325
製作網頁的上半部分主體內容 327
製作網頁的下半部分主體內容 330
製作網頁底部信息 336
14.1.3 案例總結 337
14.2 綜合實例——製作醫療保健類網站 337
14.2.1 設計分析 337
14.2.2 製作步驟 337
製作網頁頂部導航信息 337
製作網頁左半部分主體 342
製作網頁中間部分主體 342
製作網頁右半部分主體 345
製作網頁版底信息欄目 347
14.2.3 案例總結 348,第一章 網頁和網站製作流程
1.1 認識網頁 2
1.1.1 網頁和網站 2
1.1.2 網頁的基本構成元素 2
1.2 什麼是網頁設計 3
1.2.1 網頁設計概述 3
1.2.2 網頁設計和網頁製作 4
1.2.3 網頁設計的特點 5
1.2.4 網頁製作相關術語 6
1.3 網頁設計中所涵蓋的內容 11
1.3.1 視聽元素 11
1.3.2 版式設計 11
1.4 如何設計網頁 12
1.4.1 網頁設計的基本原則 12
1.4.2 網頁設計成功的要素 13
1.4.3 網頁設計風格及色彩搭配 14
1.5 網頁設計的原則 14
1.5.1 為用戶考慮的原則 14
1.5.2 主題突出原則 15
1.5.3 整體原則 16
1.5.4 內容與形式相統一 16
1.5.5 更新和維護的原則 17
1.6 網頁設計師應具備的素質 17
1.6.1 藝術素質 17
16.2 技能素質 18
1.6.3 綜合素質 18
1.7 網站的製作流程 19
1.7.1 前期策劃 19
1.7.2 原型設計 20
1.7.3 頁面美化 21
1.7.4 頁面開發 22
1.7.5 後期維護 22
1.8 靜態頁面的製作流程 22
1.8.1 觀察設計稿 22
1.8.2 拆分設計稿 23
1.8.3 網頁設計實現 23
第二章 CSS樣式入門
2.1 CSS的基本概念 25
2.1.1 CSS的特點 25
2.1.2 CSS的基本語法 25
2.1.3 CSS的衝突 26
技能案例：使用就近原則 26
2.2 網頁設計中的CSS 28
2.2.1 如何使用CSS 28
2.2.2 CSS能做什麼 29
2.2.3 CSS不能做什麼 30
2.3 CSS的基本用法 30
2.3.1 內聯樣式 30
2.3.2 嵌入樣式 30
技能案例：設定嵌入樣式 30
2.3.3 外部樣式 31
2.4 CSS的單位和值 31
2.4.1 定義顏色值 32
2.4.2 定義字型 33
2.5 CSS基礎選擇符 34
2.5.1 通配選擇符 34
2.5.2 標籤選擇符 35
2.5.3 id選擇符 35
2.5.4 類選擇符 35
技能案例：使用類選擇符定義樣式 36
2.5.5 群組選擇符 36
2.5.6 基礎選擇符瀏覽器適配 36
2.6 CSS的層次選擇符 36
2.6.1 後代選擇符 37
技能案例：使用後代選擇符定義樣式 37
2.6.2 子選擇符 37
2.6.3 相鄰兄弟選擇符 37
技能案例：使用相鄰兄弟選擇符設定樣式 37
2.6.4 通用兄弟選擇符 38
技能案例：使用通用兄弟選擇符定義樣式 38
2.6.5 層次選擇符瀏覽器適配 39
2.7 偽類和偽元素 39
2.7.1動態偽類選擇符 39
2.7.2 目標偽類選擇符 40
2.7.3 語言偽類選擇器 40
2.7.4 UI元素狀態偽類選擇器 40
2.7.5 結構偽類選擇器 41
2.7.6 偽類選擇符瀏覽器適配 42
2.7.7 偽元素選擇符 44
2.8 套用案例——為頁面添加CSS樣式 45
2.8.1 設計分析 45
2.8.2 製作步驟 45
2.8.3 案例總結 51
2.9 舉一反三——產品介紹網站 51
2.9.1 案例分析 52
2.9.2 視頻操作 52
第三章 使用DIV+CSS布局頁面
3.1 定義Div 55
3.1.1 什麼是Div 55
3.1.2 插入Div 55
3.1.3 Div的嵌套和固定格式 56
3.2 CSS布局定位 57
3.2.1 浮動定位 57
3.2.2 position定位 60
3.3 可視化盒模型 62
3.3.1 盒子模型 62
3.3.2 視覺可視化模型 64
3.3.3 空白邊疊加 64
3.4 常見的網頁布局方式 65
3.4.1 居中布局設計 65
3.4.2 浮動布局設計 66
3.4.3 高度自適應 70
3.5 盒模型的控制屬性 70
3.5.1 overflow 70
技能案例：顯示滾動條 71
3.5.2 overflow-x 71
技能案例：顯示橫向滾動條 71
3.5.3 overflow-y 72
技能案例：顯示豎向滾動條 72
3.6 套用案例——使用DIV+CSS布局頁面 73
3.6.1 設計分析 73
3.6.2 製作步驟 73
3.6.3 案例總結 78
3.7 舉一反三——製作健康網站 78
3.7.1 案例分析 78
3.7.2 視頻操作 79
第四章 使用CSS控制網頁中的背景
4.1 背景顏色 81
4.1.1 設定頁面背景顏色 81
技能案例：添加背景顏色 81
4.1.2 設定塊背景顏色 82
技能案例：添加塊背景 82
4.1.3 漸變背景 83
技能案例：設定線性漸變背景 83
技能案例：設定徑向漸變背景 84
4.2 背景圖片 86
4.2.1 為頁面設定背景圖片 86
技能案例：設定背景圖片 86
4.2.2 背景圖片的重複 87
技能案例：設定背景圖片的重複 87
4.2.3 設定背景圖片的位置 88
技能案例：設定背景圖片的位置 88
4.2.4 設定背景滾動 90
技能案例：設定頁面背景滾動 90
4.2.5 背景樣式縮寫的方式 90
4.3 背景定位 91
4.3.1 背景定位屬性的語法 91
4.3.2 背景定位屬性的瀏覽器適配 91
4.4 背景裁切 92
4.4.1 背景裁切屬性的語法 92
4.4.2 背景裁切的瀏覽器適配 92
4.5 背景大小 93
4.5.1 背景大小屬性的語法 93
4.5.2 背景大小瀏覽器的適配 93
4.6 多重背景圖像 94
4.6.1 多重背景圖像屬性的語法 94
4.6.2 多重背景圖像的瀏覽器適配 95
4.6.3 CSS多背景屬性的優勢 95
4.7 套用案例——製作金融類網站頁面 96
4.7.1 設計分析 96
4.7.2 製作步驟 96
4.7.3 案例總結 102
4.8 舉一反三——製作電子商品網站 102
4.8.1 案例分析 103
4.8.2 視頻操作 103
第五章 使用CSS控制頁面文字樣式
5.1 控制文本樣式 106
5.1.1 文本字型和大小 106
技能案例：設定網頁中的文字字型 107
5.1.2 文本顏色和粗細 110
技能案例：設定網頁中文字的顏色 110
5.1.3 文本的3種樣式 112
技能案例：設定網頁中文字的樣式 112
5.1.4 文本的美化方式 113
技能案例：為網頁中的文字設定下劃線效果 113
5.1.5 英文字母大小寫 113
5.2 控制段落樣式 114
5.2.1 段落水平對齊 114
技能案例：設定文字左對齊、水平居中與右對齊 114
5.2.2 段落垂直對齊 116
技能案例：設定文本段落垂直對齊 116
5.2.3 行間距和字間距 117
5.2.4 首字下沉 118
技能案例：設定網頁中段落首字母下沉 118
5.3 文字陰影及模糊 119
5.3.1 文字陰影及模糊屬性的語法 119
技能案例：設定網頁中文本的陰影 119
5.3.2 文字陰影屬性的瀏覽器適配 120
5.4 文字溢出 120
5.4.1 文字溢出屬性的語法 121
5.4.2 文字溢出屬性瀏覽器的適配 121
5.5 文字斷開轉行 121
5.5.1 文字斷開轉行屬性的語法 121
5.5.2 文字轉行屬性的瀏覽器適配 122
5.6 套用實例——設計類網站 122
5.6.1 設計分析 123
5.6.2 製作步驟 123
5.6.3 案例總結 129
5.7 舉一反三——製作社區類網站 129
5.7.1 案例分析 130
5.7.2 視頻操作 130
第六章 使用CSS控制圖片樣式
6.1圖片樣式 132
6.1.1 圖片框線設定 132
技能案例：設定圖片框線 132
6.1.2 圖片縮放設定 135
技能案例：設定網頁中圖片的縮放 135
6.2 圖片對齊 137
6.2.1 水平對齊設定 137
技能案例：設定圖片的水平對齊 137
6.2.2 垂直對齊設定 138
6.3 圖文混排 139
6.3.1 文本混排 140
技能案例：設定網頁中的圖文混排 140
6.3.2 設定混排間距 140
6.4 圖像框線 141
6.4.1 圖像框線屬性的語法介紹 141
6.4.1 圖像框線的瀏覽器適配 141
6.5 框線圓角 142
6.5.1 框線圓角屬性的語法 142
6.5.2 4個子屬性 143
6.5.3 框線圓角屬性的瀏覽器適配 144
6.6 框線陰影 144
6.6.1 框線陰影屬性的語法 145
6.6.2框線陰影瀏覽器的適配 145
6.7 框線顏色 146
6.7.1 框線顏色屬性的語法 146
6.7.2 框線顏色的瀏覽器適配 147
6.8 套用實例——製作婚慶網站頁面 147
6.8.1 設計分析 147
6.8.2 製作步驟 148
6.8.3 案例總結 153
6.9 舉一反三——產品介紹網站 153
6.9.1 案例分析 154
6.9.2 視頻操作 154
第七章 使用CSS控制列表樣式
7.1 列表控制概述 155
7.1.1 列表控制原則 155
7.1.2 列表的類型及使用 155
技能案例：使用uI製作無序列表 155
技能案例：使用ol製作無序列表 156
技能案例：使用dl製作列表 156
7.1.3 改變項目樣式 157
技能案例：製作突出的列表樣式 157
7.1.4 圖片符號 158
技能案例：製作圖片符號列表 158
7.2 使用列表製作實用選單 159
7.2.1 無需表格的選單 159
技能案例：製作豎排選單 159
7.2.2 選單的橫豎轉換 161
技能案例：製作橫排選單 161
技能案例：製作下拉選單 162
7.3 Opacity 164
7.3.1 Opacity 語法 164
技能案例：為圖片設定透明度 164
7.3.2 Opacity的瀏覽器適配 165
7.4 CSS 顏色模式 165
7.4.1 HSL colors語法 165
技能案例：使用HSL顏色模式 165
7.4.2 HSLA colors 語法 166
技能案例：使用HSLA顏色模式 166
7.4.3 RGBA colors語法 167
技能案例：使用RGBA顏色模式 167
7.4.4 HSL、HSLA和RGBA colors的瀏覽器適配 168
7.5 套用實例——製作音樂網站 169
7.5.1 設計分析 170
7.5.2 製作步驟 170
7.5.3 案例總結 174
7.6 舉一反三——製作設計工作室網站 174
7.6.1 案例分析 174
7.6.2 視頻操作 175
第八章 使用CSS控制表單樣式
8.1 表單設計概述 177
8.1.1 表單的設計原則 177
8.1.2 表單套用分類 178
8.2 表單的設計 179
8.2.1 表單和表單元素 179
8.2.2 標籤、欄位集和圖例 183
技能案例：製作表單 183
8.2.3 使用CSS控制文本欄位 185
技能案例：使用CSS樣式更改表單外觀 185
8.2.4 使用CSS控制複選框與單選框 185
技能案例：使用CSS樣式更改表單外觀2 186
8.2.5 使用CSS控制列表與跳轉選單 186
技能案例：使用CSS樣式更改表單外觀3 186
8.3 套用實例——製作用戶註冊頁面 187
8.3.1 設計分析 187
8.3.2 製作步驟 187
8.3.3 案例總結 195
8.4 舉一反三——製作用戶登錄頁面 195
8.4.1 案例分析 196
8.4.2 視頻操作 196
第九章 使用CSS美化瀏覽器效果
9.1 使用CSS控制超連結 199
9.1.1 認識超連結 199
9.1.2 關於連結路徑 200
9.1.3 超連結屬性控制 202
技能案例：設定超連結屬性 203
9.1.4 偽元素的內容控制屬性 205
技能案例：使用content屬性 206
9.1.5 圖像映射 206
技能案例：設定熱點連結 206
9.1.6 連結的打開方式 208
9.2 超連結特效 208
9.2.1 按鈕式超連結 208
技能案例：製作按鈕式超連結 208
9.2.2 浮雕式超連結 209
技能案例：製作浮雕式超連結 209
9.3 滑鼠特效 210
9.3.1 CSS控制滑鼠箭頭 210
9.3.2 滑鼠變化的超連結 211
技能案例：設定超連結的滑鼠變化 211
9.4 box-sizing 212
9.4.1 box-sizing屬性語法 212
9.4.2 box-sizing的瀏覽器適配 212
技能案例：為框線添加陰影 213
9.5 resize 213
9.5.1 resize屬性 213
9.5.2 resize的瀏覽器適配 214
9.6 outline 214
9.6.1 outline屬性語法 214
9.6.2 outline的瀏覽器適配 215
9.7 nav-index 216
9.7.1 nav-index屬性語法 216
9.7.2 nav-index的瀏覽器適配 216
9.8 套用實例——製作產品宣傳網站頁面 216
9.8.1 設計分析 217
9.8.2 製作步驟 217
9.8.3 案例總結 225
9.9 舉一反三——製作運輸公司網站頁面 225
9.9.1 案例分析 225
9.9.2 視頻操作 226
第十章 使用CSS控制變形動畫效果
10.1 CSS變形屬性簡介 228
10.1.1 變形屬性與函式 228
10.1.2 變形屬性的瀏覽器適配 228
10.2 網頁元素的2D變形效果 230
10.2.1 旋轉變形 230
技能案例：實現元素的旋轉效果 230
10.2.2 縮放和翻轉變形 231
技能案例：實現元素的縮放效果 231
10.2.3 移動變形 232
技能案例：實現元素的縮放效果 232
10.2.4 傾斜變形 233
技能案例：實現網頁元素的傾斜效果 234
10.2.5 矩陣變形 235
10.2.6 定義變形的中心點 235
10.2.7 同時使用多個變形函式 236
10.3 網頁元素3D變形效果 236
10.3.1 3D位移變形 236
技能案例：實現網頁元素的3D位移效果 237
10.3.2 3D旋轉變形 238
技能案例：實現網頁元素的3D旋轉效果 238
10.3.3 3D縮放變形 240
技能案例：實現網頁元素的3D縮放效果 240
10.3.4 3D矩陣變形 241
10.4 CSS過渡效果 242
10.4.1 過渡屬性簡介 242
10.4.2 如何創建過度動畫 242
10.4.3 實現過渡效果 243
10.4.4 設定過渡時間 243
10.5 套用實例——網頁元素變形過渡效果 244
10.5.1 設計分析 244
10.5.2 製作步驟 244
10.5.3 案例總結 247
10.6 舉一反三——製作關鍵幀動畫效果 247
10.6.1 案例分析 247
10.6.2 視頻操作 248
第十一章 CSS與JavaScript的綜合套用
11.1 什麼是JavaScript 250
11.1.1 了解JavaScript 250
技能案例：在頁面中嵌入JavaScript代碼 251
11.1.2 JavaScript的特點 252
11.1.3 JavaScript的套用範圍 253
11.1.4 CSS樣式與JavaScript 255
11.2 JavaScript的語法基礎 255
11.2.1 JavaScript的基本架構 255
技能案例：使用JavaScript實現彈出提示框 256
11.2.2 JavaScript的基本語法 256
11.2.3 數據類型和變數 259
11.2.4 表達式和運算符 260
11.2.5 基本語句 260
技能案例：使用if語句 261
技能案例：使用for語句 261
11.3 JQuery 262
11.3.1 JQuery Mobile 262
11.3.2 JQuery UI 263
技能案例：創建jQuery UI組件 264
11.4 其他JavaScript框架 264
11.4.1 Raect 264
11.4.2 Vue 265
11.4.3 Angular 265
11.5 套用實例——在網頁中套用互動效果 266
11.5.1 設計分析 267
11.5.2 製作步驟 267
11.5.3 案例總結 276
11.6 舉一反三——製作婚紗攝影網站 276
11.6.1 案例分析 277
11.6.2 視頻操作 278
第十二章 CSS與XML的綜合套用
12.1 XML基礎 280
12.1.1 XML的特點 280
技能案例：創建XML頁面 280
12.1.2 XML與HTML 281
技能案例：調用XML檔案 282
12.1.3 XML基本語法 283
12.1.4 格式正確的XML文檔 286
12.2 XML與CSS的連結 287
12.2.1 使用xml:stylesheet處理指令 287
技能案例：使用CSS來格式化XML文檔 287
12.2.2 使用@import指令 289
12.3 XML與CSS的套用 289
12.3.1 顯示學生信息XML文檔 289
技能案例：創建顯示學生信息得XML檔案 289
12.3.2 XML文檔實現隔行變色的表格 291
技能案例：實現XML檔案隔行變色信息表 291
12.4 套用實例——在頁面中調用XML數據 294
12.4.1 設計分析 295
12.4.2 製作步驟 295
12.4.3 案例總結 300
12.5 舉一反三——製作企業網站 300
12.5.1 案例分析 300
12.5.2 視頻操作 301
第十三章 CSS與Ajax的綜合套用
13.1 了解Ajax 303
13.1.1 Ajax簡介 303
13.1.2 Ajax的關鍵元素 304
13.1.3 Ajax的優勢 305
13.1.4 實現Ajax的步驟 305
13.1.5 使用CSS的必要性 306
13.2 Ajax基礎 307
13.2.1 創建XMLHttpRequest對象 307
技能案例：創建Ajax對象 307
13.2.2 發出Ajax請求 308
技能案例：添加表單並獲取數據 308
13.2.3 處理伺服器回響 309
技能案例：添加處理伺服器回響的代碼 309
13.2.4 使用CSS樣式 309
技能案例：為案例添加CSS樣式 309
13.3 HTML 簡介 310
13.3.1 HTML 標籤 310
13.3.2 HTML 事件屬性 311
13.3.3 HTML 標準屬性 313
13.4 套用實例——使用Ajax實現頁面特效 313
13.4.1 設計分析 314
13.4.2 製作步驟 314
13.4.3 案例總結 322
13.5 舉一反三——通過Ajax實現可拖動Div塊 322
13.5.1 案例分析 322
13.5.2 視頻操作 323
第十四章 綜合商業案例
14.1綜合實例——製作遊戲類網站 325
14.1.1 設計分析 325
14.1.2 製作步驟 325
製作網頁頂部導航欄 325
製作網頁的上半部分主體內容 327
製作網頁的下半部分主體內容 330
製作網頁底部信息 336
14.1.3 案例總結 337
14.2 綜合實例——製作醫療保健類網站 337
14.2.1 設計分析 337
14.2.2 製作步驟 337
製作網頁頂部導航信息 337
製作網頁左半部分主體 342
製作網頁中間部分主體 342
製作網頁右半部分主體 345
製作網頁版底信息欄目 347
14.2.3 案例總結 348
