《DIV+CSS 3網頁樣式與布局全程揭秘（第3版）》是2019年8月清華大學出版社出版的圖書，作者是暢利紅。
基本介紹
- 書名：DIV+CSS 3網頁樣式與布局全程揭秘（第3版）
- 作者：暢利紅
- 出版社：清華大學出版社
- 出版時間：2019年08月
- 定價：69.8 元
- ISBN：9787302529316
內容簡介,圖書目錄,
內容簡介
《DIV+CSS 3網頁樣式與布局全程揭秘（第3版）》是一本關於DIV+CSS 網站建設的經典之作，系統地介紹CSS 樣式的基礎理論和實際套用技術，並結合實例講解使用DIV+CSS 布局製作網頁的方法和技巧。在介紹使用CSS 樣式進行設計的同時，還結合實際網頁製作中可能遇到的問題，提供了解決問題的思路、方法和技巧。
《DIV+CSS 3網頁樣式與布局全程揭秘（第3版）》內容簡潔、通俗易懂，通過知識點與案例相結合的方式，讓讀者能夠清晰明了地理解DIV+CSS 布局製作網頁的相關技術內容，從而達到學以致用的目的。全書共分14 章，包括網頁和網站開發知識、了解HTML5、初識CSS 樣式、使用CSS 設定文本和段落樣式、使用CSS 設定背景和圖片樣式、使用CSS 設定列表樣式、使用CSS 設定超連結樣式、使用CSS 設定表格樣式、使用CSS 設定表單元素樣式、使用CSS 設定動畫效果、CSS 樣式的瀏覽器兼容性、使用DIV+CSS 布局網頁、CSS 與JavaScript 實現網頁特效和商業網站案例等內容。
《DIV+CSS 3網頁樣式與布局全程揭秘（第3版）》結構清晰、實例經典、技術實用，適合網頁樣式布局的初、中級讀者，以及希望學習Web 標準對原網站進行重構的網頁設計者，也可以作為高等院校相關專業的教材。
圖書目錄
第1章 網頁和網站開發知識
1.1 了解網頁 1
1.1.1 網頁與網站的關係 1
1.1.2 網頁基本構成元素 3
1.2 定義網頁設計 3
1.2.1 簡述網頁設計 3
1.2.2 網頁設計的特點 4
1.2.3 網頁設計的相關術語 6
1.2.4 常見網站類型 8
1.3 網站開發流程 11
1.3.1 網站策劃 11
1.3.2 規劃網站結構 11
1.3.3 素材收集整理 11
1.3.4 網頁版式與布局分析 12
1.3.5 確定網站主色調 12
1.3.6 設計網站頁面 13
1.3.7 切割和最佳化網頁 13
1.3.8 製作HTML頁面 13
1.3.9 使用CSS樣式控制網頁外觀 13
1.3.10 為網頁套用JavaScript特效 14
1.3.11 網站後台程式開發 14
1.3.12 申請域名和伺服器空間 14
1.3.13 測試並上傳網站 14
1.4 關於DIV+CSS布局 14
1.4.1 布局特點 14
1.4.2 DIV+CSS布局的優勢 15
1.5 Web標準 16
1.5.1 什麼是Web標準 16
1.5.2 Web標準的內容 16
1.5.3 結構、表現、行為和內容 16
1.5.4 遵循Web標準的好處 18
第2章 了解HTML5
2.1 HTML基本概念 19
2.1.1 了解HTML 19
2.1.2 HTML的作用 20
2.1.3 HTML的基礎結構 20
2.1.4 HTML的基本語法 21
2.2 HTML發展史 22
2.2.1 HTML 22
2.2.2 XML 23
2.2.3 XHTML 23
2.2.4 製作HTML頁面 24
實例01 製作簡單的HTML頁面 24
2.3 HTML常用標籤 25
2.3.1 區塊標籤 25
2.3.2 文本標籤 26
2.3.3 格式標籤 26
2.3.4 圖像標籤 27
2.3.5 表格標籤 27
2.3.6 超連結標籤 27
2.4 HTML5基礎 28
2.4.1 了解HTML5 28
2.4.2 HTML5的簡化操作 28
2.4.3 HTML5標籤 29
2.4.4 HTML5廢棄標籤 30
2.4.5 HTML5的選擇器 31
2.4.6 HTML5的優勢 31
2.5 HTML5的套用 32
2.5.1 <canvas>標籤 32
實例02 在網頁中實現繪圖效果 33
2.5.2 聲音和視頻標籤 34
實例03 在網頁中嵌入音頻和視頻 35
第3章 初識CSS樣式
3.1 了解CSS樣式 38
3.1.1 使用CSS樣式的原因 38
3.1.2 使用CSS樣式的優勢 39
3.1.3 使用CSS樣式的作用 40
3.1.4 使用CSS樣式的局限性 41
3.1.5 CSS樣式的基礎語法 41
3.1.6 認識CSS規則的構成 42
3.2 在網頁中套用CSS樣式的4種方法 42
3.2.1 內聯CSS樣式 42
實例04 使用style屬性添加內聯CSS樣式 43
3.2.2 內部CSS樣式 44
實例05 使用style標籤添加內部CSS樣式 44
3.2.3 連結外部CSS樣式檔案 45
實例06 使用link標籤連結外部CSS樣式檔案 45
3.2.4 導入外部CSS樣式檔案 46
實例07 使用@import命令導入外部CSS樣式檔案 47
3.3 CSS選擇器 48
3.3.1 通配選擇器 48
3.3.2 標籤選擇器 48
3.3.3 ID選擇器 48
3.3.4 類選擇器 48
3.3.5 偽類和偽對象選擇器 49
實例08 設定酒店網站文字連結效果 49
3.3.6 群選擇器 50
實例09 設定女裝網站圖片效果 50
3.3.7 派生選擇器 53
3.3.8 層次選擇器 54
3.4 CSS3中的選擇器 55
3.4.1 屬性選擇器 55
3.4.2 結構偽類選擇器 56
3.4.3 UI元素狀態偽類選擇器 56
3.5 CSS樣式的特性 57
3.5.1 繼承性 57
3.5.2 層疊性 58
3.5.3 權重 58
3.6 CSS樣式中的顏色設定和單位 60
3.6.1 CSS中的多種顏色設定方法 60
3.6.2 CSS中的絕對單位 61
3.6.3 CSS中的相對單位 61
3.6.4 CSS3中新增的顏色定義方法 62
第4章 使用CSS設定文本和段落樣式
4.1 設定文本CSS樣式 63
4.1.1 設定字型font-family 63
4.1.2 設定字型大小font-size 63
實例10 設定歡迎頁面中文字的字型和大小 64
4.1.3 設定字型顏色color 65
4.1.4 設定字型粗細font-weight 65
實例11 設定網頁中字型的顏色和粗細 66
4.1.5 設定字型樣式font-style 68
4.1.6 設定英文字型大小寫text-transform 68
4.1.7 設定文字修飾text-decoration 68
實例12 設定網頁中英文字型的屬性 68
4.2 設定段落樣式 72
4.2.1 字間距letter-spacing 72
4.2.2 行間距line-height 72
實例13 在網頁中設計文字間距 72
4.2.3 段落首字下沉 74
4.2.4 段落首行縮進text-indent 74
實例14 設定段落文字首字下沉和縮進樣式 74
4.2.5 段落水平對齊text-align 76
4.2.6 文本垂直對齊vertical-align 76
實例15 設定文本水平居中和垂直居中對齊 76
4.3 使用CSS3嵌入Web字型 78
4.3.1 @font-face語法 78
4.3.2 自定義字型方法 79
4.3.3 聲明多個字型來源 79
4.3.4 @font-face規則的瀏覽器兼容性 80
4.4 在網頁中套用特殊字型 80
實例16 在卡通網頁中使用特殊字型 80
4.5 CSS3中文字效果設定 82
4.5.1 文字陰影text-shadow 82
4.5.2 文本溢出處理text-overflow 83
實例17 為網頁中的文字設定效果 83
第5章 使用CSS設定背景和圖片樣式
5.1 設定背景顏色CSS樣式 86
5.1.1 背景顏色background-color 86
5.1.2 為頁面元素設定不同的背景顏色 86
實例18 為網頁設定背景顏色 86
5.1.3 背景圖像大小background-size 88
5.1.4 背景圖像顯示區域background-origin 88
5.1.5 背景圖像裁剪區域background-clip 88
實例19 控制網頁元素背景圖像 89
5.2 設定背景圖像CSS樣式 91
5.2.1 背景圖像background-image 91
5.2.2 背景圖像重複方式background-repeat 91
實例20 設定圖片網站背景圖像 91
5.2.3 背景圖像固定background-attachment 93
5.2.4 背景圖像位置background-position 93
實例21 設定網頁背景和圖像固定位置 94
5.2.5 漸變背景 95
5.3 設定圖片CSS樣式 96
5.3.1 圖片框線border 96
實例22 設定卡通網站中的圖片框線 99
5.3.2 圖片縮放 100
實例23 實現跟隨瀏覽器視窗縮放的圖片 100
5.3.3 圖片水平對齊 102
5.3.4 圖片的垂直對齊 103
5.4 在網頁中實現圖文混排 104
5.4.1 使用CSS樣式實現文本繞圖效果 104
5.4.2 設定文本繞圖間距 105
實例24 實現圖文混排並設定間距 105
5.5 網頁中特殊的圖像效果套用 106
5.5.1 全螢幕大圖切換 106
實例25 設計作品展示頁面 107
5.5.2 滑鼠經過圖像動態效果 109
實例26 製作圖片展示網頁 109
第6章 使用CSS設定列表樣式
6.1 了解網頁中的列表 113
6.2 設定列表的CSS樣式 113
6.2.1 ul無序項目列表 114
6.2.2 ol有序編號列表 114
實例27 製作無序列表和有序列表 114
6.2.3 dl定義列表 116
6.2.4 更改列表項目樣式 117
6.2.5 自定義列表符號 117
6.3 使用列表製作導航選單 118
6.3.1 使用CSS樣式創建橫嚮導航選單 118
實例28 製作遊戲網站導航 118
6.3.2 使用CSS樣式創建豎嚮導航選單 119
6.4 列表在網頁中的特殊套用 120
6.4.1 滾動圖像 120
實例29 在網頁中實現四圖橫向滾動效果 120
6.4.2 動態堆疊卡 124
實例30 製作個性網站歡迎頁面 124
第7章 使用CSS設定超連結樣式
7.1 了解網頁超連結 128
7.1.1 什麼是超連結 128
7.1.2 關於連結路徑 128
7.1.3 超連結對象 129
7.1.4 創建超連結原則 129
7.2 CSS樣式偽類 130
7.2.1 :link偽類 130
7.2.2 :hover偽類 130
7.2.3 :active偽類 131
7.2.4 :visited偽類 131
7.3 超連結CSS樣式套用 132
7.3.1 超連結文字樣式 132
實例31 設定遊戲網站文字超連結效果 132
7.3.2 按鈕式超連結 134
實例32 製作設計網站導航選單 134
7.3.3 為超連結添加背景 136
實例33 背景翻轉導航選單 136
7.4 設定網頁中的游標效果 138
7.5 超連結在網頁中的特殊套用 139
7.5.1 傾斜導航選單 139
實例34 玩具網站傾斜導航 139
7.5.2 動感超連結 141
實例35 卡通網站動感導航選單 142
第8章 使用CSS設定表格樣式
8.1 了解表格 145
8.1.1 認識表格標籤與結構 145
8.1.2 表格標題<caption>標籤 147
8.1.3 表格列<colgroup>和<col>標籤 148
8.1.4 水平對齊和垂直對齊 149
8.2 使用CSS樣式控制表格外觀 150
8.2.1 設定表格框線 150
8.2.2 設定表格背景顏色 150
8.2.3 設定表格背景圖像 150
實例36 製作網站新聞欄目 150
8.3 使用CSS樣式實現表格特效 154
8.3.1 設定單元行背景顏色 154
8.3.2 :hover偽類在表格中的套用 154
實例37 使用CSS實現表格的互動效果 154
第9章 使用CSS設定表單元素樣式
9.1 關於表單 157
9.1.1 表單標籤<form> 157
9.1.2 輸入標籤<input> 158
9.1.3 文本域標籤<textarea> 158
9.1.4 選擇域標籤<select>和<option> 159
9.1.5 其他表單元素 159
9.1.6 關於<label>、<legend>和<fieldset>標籤 162
實例38 創建簡單的網頁表單 163
9.2 使用CSS樣式控制表單元素 165
9.2.1 使用CSS樣式設定表單元素的背景色和框線 165
實例39 製作網站登錄頁面 165
9.2.2 使用CSS樣式實現圓角文本欄位 169
實例40 製作圓角登錄框 169
9.2.3 使用CSS樣式設定下拉列表效果 170
實例41 製作網站搜尋欄 170
9.3 表單在網頁中的特殊套用 173
9.3.1 聚焦型提示語消失 173
實例42 文本欄位提示語效果1 173
9.3.2 輸入型提示語消失 176
實例43 文本欄位提示語效果2 176
第10章 使用CSS設定動畫效果
10.1 CSS3變形屬性簡介 178
10.2 實現網頁元素2D變形效果 179
10.2.1 旋轉變形 179
實例44 實現網頁元素的旋轉效果 179
10.2.2 縮放和翻轉變形 181
實例45 實現網頁元素的縮放效果 181
10.2.3 移動變形 182
實例46 實現網頁元素位置的移動 183
10.2.4 傾斜變形 184
實例47 實現網頁元素的傾斜效果 184
10.2.5 矩陣變形 186
10.3 實現元素3D變形效果 186
10.3.1 3D位移 186
實例48 實現網頁元素的3D位移效果 187
10.3.2 3D旋轉 188
實例49 實現網頁元素的3D旋轉效果 189
10.3.3 3D縮放 191
實例50 實現網頁元素的3D縮放效果 191
10.3.4 3D矩陣 192
10.4 CSS3過渡簡介 193
10.4.1 CSS3過渡屬性 193
10.4.2 如何創建過渡動畫 193
10.5 CSS3實現元素過渡效果 194
10.5.1 transition-property屬性——實現過渡效果 194
10.5.2 transition-duration屬性——過渡時間 195
實例51 實現網頁元素的變形過渡效果 195
10.5.3 transition-delay屬性——過渡延遲時間 197
10.5.4 transition-timing-function屬性——過渡方式 198
10.6 CSS3關鍵幀動畫簡介 198
10.6.1 CSS3新增的animation屬性 198
10.6.2 @keyframes的語法 199
10.7 為網頁元素套用關鍵幀動畫 200
10.7.1 使用@keyframes聲明動畫 200
10.7.2 調用@keyframes聲明的動畫 201
10.8 CSS3動畫子屬性詳解 201
10.8.1 animation-name屬性——調用動畫 201
10.8.2 animation-duration屬性——動畫播放時間 202
10.8.3 animation-timing-function屬性——動畫播放方式 202
10.8.4 animation-delay屬性——動畫開始播放時間 202
10.8.5 animation-iteration-count屬性——動畫播放次數 202
10.8.6 animation-direction屬性——動畫播放方向 202
10.8.7 animation-play-state屬性——動畫播放狀態 203
10.8.8 animation-fill-mode屬性——動畫時間外屬性 203
實例52 製作關鍵幀動畫效果 203
第11章 CSS樣式的瀏覽器兼容性
11.1 CSS選擇器的瀏覽器兼容性 207
11.1.1 基礎選擇器的瀏覽器兼容性 207
11.1.2 層次選擇器的瀏覽器兼容性 207
11.1.3 偽類選擇器的瀏覽器兼容性 208
實例53 美化超連結按鈕樣式 209
11.1.4 屬性選擇器的瀏覽器兼容性 211
11.2 文本屬性的瀏覽器兼容性 212
11.2.1 文字和段落樣式的瀏覽器兼容性 212
11.2.2 text-overflow屬性的瀏覽器兼容性 213
11.2.3 text-shadow屬性的瀏覽器兼容性 214
11.2.4 @font-face規則的瀏覽器兼容性 214
11.3 背景和圖片的瀏覽器兼容性 216
11.3.1 background-clip屬性的瀏覽器兼容性 216
11.3.2 CSS3多背景的瀏覽器兼容性 217
11.3.3 opacity屬性的瀏覽器兼容性 218
11.4 框線屬性的瀏覽器兼容性 218
11.4.1 框線基礎屬性的瀏覽器兼容性 218
11.4.2 border-color屬性的瀏覽器兼容性 219
11.4.3 border-radius屬性的瀏覽器兼容性 219
實例54 為網頁元素設定圓角效果 220
11.4.4 border-image屬性的瀏覽器兼容性 222
11.4.5 box-shadow屬性的瀏覽器兼容性 223
11.5 盒模型的瀏覽器兼容性 224
11.5.1 CSS盒模型的瀏覽器兼容性 224
11.5.2 定位屬性的瀏覽器兼容性 224
11.5.3 outline屬性的瀏覽器兼容性 226
11.5.4 多列布局屬性的瀏覽器兼容性 226
實例55 實現網頁內容分列布局 227
11.6 CSS動畫的瀏覽器兼容性 229
11.6.1 CSS3變形屬性的瀏覽器兼容性 229
11.6.2 CSS3過渡屬性的瀏覽器兼容性 230
11.6.3 animation屬性的瀏覽器兼容性 231
11.6.4 @keyframes的瀏覽器兼容性 231
第12章 使用DIV+CSS布局網頁
12.1 關於DIV 232
12.1.1 什麼是DIV 232
12.1.2 如何在網頁中插入DIV 232
12.1.3 <DIV>與<span>標籤的區別 233
12.2 ID與class 234
12.2.1 什麼是ID 234
12.2.2 什麼時候使用ID 235
12.2.3 什麼是class 235
12.2.4 什麼時候使用class 235
12.3 CSS盒模型 236
12.3.1 什麼是CSS盒模型 236
12.3.2 CSS盒模型的要點 237
12.3.3 margin屬性 237
實例56 製作房產網站歡迎頁 237
12.3.4 border屬性 238
12.3.5 padding屬性 239
實例57 製作圖片網頁 239
12.3.6 content部分 240
12.4 CSS3中的彈性盒模型 240
12.4.1 box-orient屬性控制盒子取向 241
12.4.2 box-direction屬性控制盒子順序 242
12.4.3 box-ordinal-group屬性控制盒子位置 243
12.4.4 box-flex屬性控制盒子彈性空間 245
12.4.5 盒子空間管理box-pack和box-align屬性 246
12.4.6 盒子空間溢出管理box-lines屬性 248
12.5 網頁元素定位 248
12.5.1 關於position屬性 248
12.5.2 relative定位方式 249
實例58 實現圖像的疊加效果 249
12.5.3 absolute定位方式 250
實例59 製作科技公司網站頁面 250
12.5.4 fixed定位方式 252
實例60 固定不動的網站導航選單 252
12.5.5 float定位方式 253
實例61 製作圖片列表頁面 253
12.6 常用DIV+CSS布局解析 256
12.6.1 內容居中的網頁布局 256
12.6.2 浮動的網頁布局 257
12.6.3 自適應高度的解決方法 261
12.7 CSS3中的界面相關屬性 261
12.7.1 內容溢出處理overflow 262
12.7.2 區域縮放調節resize 263
12.7.3 輪廓外框線outline 264
12.7.4 多列布局column 265
12.7.5 航序列號nav-index 265
12.8 CSS3的其他屬性 265
12.8.1 判斷對象@media 265
實例62 根據不同的瀏覽器視窗顯示不同的背景顏色 266
12.8.2 載入伺服器端字型@font-face 266
12.9 使用CSS3製作網頁特效 267
實例63 網頁動態互動導航選單 267
第13章 CSS與JavaScript實現網頁特效
13.1 JavaScript基礎 272
13.1.1 JavaScript的發展 272
13.1.2 JavaScript的特點 273
13.1.3 JavaScript語法中的基本要求 273
13.1.4 CSS樣式與JavaScript 275
13.2 使用JavaScript的方法 275
13.2.1 使用<Script>標籤嵌入JavaScript代碼 275
13.2.2 調用外部JavaScript腳本檔案 276
13.2.3 直接位於事件處理部分的代碼中 276
13.3 JavaScript中的數據類型和變數 276
13.3.1 數據類型 276
13.3.2 變數 277
13.4 JavaScript運算符 277
13.4.1 算術運算符 277
13.4.2 邏輯運算符 277
13.4.3 比較運算符 278
13.5 JavaScript程式語句 278
13.5.1 if條件語句 278
13.5.2 switch條件語句 278
13.5.3 for循環語句 279
13.5.4 while循環語句 279
13.6 jQuery 279
13.6.1 jQuery Mobile 279
13.6.2 jQuery UI 281
實例64 製作摺疊式作品展示欄目 282
13.7 常見網頁特效 284
13.7.1 廣告切換效果 285
實例65 製作簡潔的左右輪換廣告效果 285
13.7.2 頁面切換 288
實例66 全螢幕頁面切換效果 288
第14章 商業網站案例
14.1 如何簡寫CSS樣式 295
14.1.1 顏色值簡寫 295
14.1.2 簡寫font屬性 295
14.1.3 簡寫background屬性 296
14.1.4 簡寫border屬性 296
14.1.5 簡寫margin和padding屬性 297
14.1.6 簡寫list屬性 298
14.2 最佳化CSS樣式 298
14.2.1 CSS選擇符的命名規範 299
14.2.2 重用CSS樣式 299
14.2.3 覆蓋的方法簡化CSS樣式 299
14.3 企業網站 300
14.3.1 設計分析 300
14.3.2 布局分析 300
14.3.3 案例製作 300
14.4 兒童用品網站 306
14.4.1 設計分析 306
14.4.2 布局分析 306
14.4.3 案例製作 306
14.5 遊戲網站 312
14.5.1 設計分析 312
14.5.2 布局分析 312
14.5.3 案例製作 312
