《 CSS3+DIV網頁樣式與布局（全案例微課版）》是2021年清華大學出版社出版的一本圖書，作者是劉輝。
基本介紹
- 中文名：CSS3+DIV網頁樣式與布局（全案例微課版）
- 作者：劉輝
- 出版社：清華大學出版社
- 出版時間：2021年
- 定價：89 元
- ISBN：9787302568698
內容簡介,目錄,
內容簡介
《CSS3+DIV網頁樣式與布局（全案例微課版）》是針對零基礎讀者編寫的網頁樣式與布局入門教材。本書側重案例實訓，並提供掃碼微課來講解當前的熱點案例。《CSS3+DIV網頁樣式與布局（全案例微課版）》分為24章，內容包括網頁設計需要學什麼、網頁實現技術HTML5、初始CSS3層疊樣式表、CSS3選擇器的套用及特性、使用CSS3設計字型與文本樣式、使用CSS3設計圖片與框線樣式、使用CSS3控制網頁背景樣式、使用CSS3定義連結與滑鼠樣式、使用CSS3設計表格樣式、使用CSS3設計表單樣式、使用CSS3設計列表與選單樣式、使用CSS3濾鏡設計網頁圖片特效、使用CSS3設計動畫效果、使用CSS3中的盒子模型、CSS3+DIV布局的浮動與定位、使用CSS3布局網頁版式、設計可回響式的移動網頁、使用JavaScript控制CSS3樣式、使用CSS設計XML 文檔樣式、流行的回響式開發框架Bootstrap以及4個熱點綜合項目。《CSS3+DIV網頁樣式與布局（全案例微課版）》通過精選熱點案例，讓初學者快速掌握網頁樣式與布局的開發技術。通過微信掃碼看視頻，讀者可以隨時在移動端觀看案例對應的視頻操作。
目錄
第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 腳本語言JavaScript006
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 下載與安裝Bootstrap327
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
