《CSS3網頁樣式與布局案例課堂》是2017年9月清華大學出版社出版的圖書，作者是劉玉紅、蒲娟。
基本介紹
- 書名：CSS3網頁樣式與布局案例課堂
- 作者：劉玉紅、蒲娟
- ISBN：9787302477747
- 定價：68元
- 出版社：清華大學出版社
- 出版時間：2017年9月
內容簡介,圖書目錄,
內容簡介
本書以零基礎講解為宗旨，用實例引導讀者深入學習，採取【基礎入門→核心技術→網頁布局→高級技能→綜合案例】的講解模式，深入淺出地講解CSS3的各項技術及實戰技能。
本書第1篇主要講解CSS樣式入門、CSS3樣式的基本語法、CSS3的高級特性等；第2篇主要講解控制網頁字型與段落樣式、控制網頁圖片樣式、控制網頁背景與框線樣式、美化網頁超連結和滑鼠、控制表格和表單樣式、控制列表和選單樣式、使用濾鏡美化網頁元素等；第3篇主要講解CSS定位與DIV布局核心技術、CSS+DIV盒子的浮動與定位、固定寬度網頁布局剖析與製作、自動縮放網頁布局剖析與製作等；第4篇主要講解過渡和動畫效果、2D和3D變幻效果、創建回響式頁面等；第5篇主要講解設計商業門戶類網頁、設計線上購物類網頁、設計企業門戶類網頁、設計娛樂休閒類網頁、設計圖像影音類網頁。
本書適合任何想學習CSS網頁設計與布局的人員，無論您是否從事計算機相關行業，無論您是否接觸過CSS3，通過學習均可快速掌握CSS3的設計方法和技巧。
圖書目錄
第1篇 基 礎 入 門
第1章 CSS樣式入門 3
1.1 認識CSS 4
1.1.1 CSS的功能 4
1.1.2 瀏覽器與CSS 4
1.1.3 CSS的發展歷史 5
1.2 CSS常用單位 5
1.2.1 顏色單位 5
1.2.2 長度單位 9
1.3 編輯和瀏覽CSS 10
1.3.1 手工編寫CSS 10
1.3.2 使用Dreamweaver編寫CSS 11
1.4 在HTML中調用CSS的方法 13
1.4.1 行內樣式 13
1.4.2 內嵌樣式 14
1.4.3 連結樣式 15
1.4.4 導入樣式 16
1.5 調用方法的優先權 17
1.5.1 行內樣式和內嵌樣式的比較 18
1.5.2 內嵌樣式和連結樣式的比較 18
1.5.3 連結樣式和導入樣式的比較 19
1.6 綜合案例——製作產品銷售統計表 20
1.7 大神解惑 22
1.8 跟我練練手 22
第2章 CSS3樣式的基本語法 23
2.1 CSS基礎語法 24
2.1.1 CSS構造規則 24
2.1.2 CSS的注釋 24
2.2 CSS的常用選擇器 25
2.2.1 標籤選擇器 25
2.2.2 類選擇器 26
2.2.3 ID選擇器 27
2.2.4 選擇器的聲明 27
2.3 綜合案例——製作炫彩網站Logo 28
2.4 大神解惑 31
2.5 跟我練練手 31
第3章 CSS3的高級特性 33
3.1 複合選擇器 34
3.1.1 全局選擇器 34
3.1.2 交集選擇器 35
3.1.3 並集選擇器 35
3.1.4 繼承選擇器 36
3.2 CSS3新增的選擇器 37
3.2.1 屬性選擇器 37
3.2.2 結構偽類選擇器 39
3.2.3 UI元素狀態偽類選擇器 40
3.2.4 偽類選擇器 42
3.3 CSS的繼承特性 43
3.3.1 繼承關係 43
3.3.2 CSS繼承的運用 44
3.4 CSS的層疊特性 45
3.4.1 同一選擇器被多次定義的
處理 45
3.4.2 同一標籤運用不同類型選擇器
的處理 46
3.5 綜合案例——製作新聞選單 47
3.6 大神解惑 49
3.7 跟我練練手 50
第II篇 核 心 技 術
第4章 使用CSS3控制網頁字型
與段落樣式 53
4.1 通過CSS控制字型樣式 54
4.1.1 控制字型類型 54
4.1.2 定義字型大小 55
4.1.3 定義字型風格 56
4.1.4 控制文字的粗細 57
4.1.5 將小寫字母轉換為大寫字母 58
4.1.6 設定字型的複合屬性 59
4.1.7 定義文字的顏色 59
4.2 CSS3中新增的文本高級樣式 61
4.2.1 添加文本的陰影效果 61
4.2.2 設定文本溢出效果 62
4.2.3 控制文本的換行 63
4.2.4 設定字型尺寸 64
4.3 通過CSS控制文本間距與對齊方式 65
4.3.1 設定單詞之間的間隔 65
4.3.2 設定字元之間的間隔 66
4.3.3 為文本添加下劃線、上劃線、
刪除線 67
4.3.4 設定垂直對齊方式 68
4.3.5 轉換文本的大小寫 69
4.3.6 設定文本的水平對齊方式 70
4.3.7 設定文本的縮進效果 72
4.3.8 設定文本的行高 73
4.3.9 文本的空白處理 74
4.3.10 文本的反排 75
4.4 綜合案例1——設定網頁標題 76
4.5 綜合案例2——製作新聞頁面 78
4.6 大神解惑 79
4.7 跟我練練手 80
第5章 使用CSS控制網頁圖片樣式 81
5.1 圖片縮放 82
5.1.1 通過描述標記width和height
縮放圖片 82
5.1.2 使用CSS3中的max-width和
max-height縮放圖片 82
5.1.3 使用CSS3中的width和height
縮放圖片 83
5.2 設定圖片的對齊方式 84
5.2.1 設定圖片橫向對齊 84
5.2.2 設定圖片縱向對齊 85
5.3 圖文混排 87
5.3.1 設定文字環繞效果 87
5.3.2 設定圖片與文字的間距 88
5.4 綜合案例1——製作學校宣傳單 90
5.5 綜合案例2——製作簡單圖文混排
網頁 92
5.6 大神解惑 94
5.7 跟我練練手 94
第6章 使用CSS控制網頁背景
與框線樣式 95
6.1 使用CSS控制網頁背景 96
6.1.1 設定背景顏色 96
6.1.2 設定背景圖片 97
6.1.3 背景圖片重複 98
6.1.4 背景圖片顯示 100
6.1.5 背景圖片位置 101
6.2 CSS3中新增控制網頁背景屬性 102
6.2.1 背景圖片大小 102
6.2.2 背景顯示區域 104
6.2.3 背景圖片裁剪區域 105
6.2.4 背景複合屬性 107
6.3 使用CSS控制框線樣式 108
6.3.1 設定框線樣式 108
6.3.2 設定框線顏色 109
6.3.3 設定框線線寬 110
6.3.4 設定框線複合屬性 112
6.4 CSS3中新增框線圓角效果 113
6.4.1 設定圓角框線 113
6.4.2 指定兩個圓角半徑 114
6.4.3 繪製4個不同圓角框線 115
6.4.4 繪製不同種類的框線 117
6.5 CSS3中的漸變效果 119
6.5.1 線性漸變效果 119
6.5.2 徑向漸變效果 121
6.6 綜合案例1——製作簡單公司主頁 122
6.7 綜合案例2——製作簡單生活資訊
主頁 126
6.8 大神解惑 127
6.9 跟我練練手 128
第7章 使用CSS3美化網頁瀏覽
效果 129
7.1 使用CSS3美化超連結 130
7.1.1 改變超級連結基本樣式 130
7.1.2 設定帶有提示信息的超級
連結 131
7.1.3 設定超級連結的背景圖 132
7.1.4 設定超級連結的按鈕效果 133
7.2 使用CSS3美化滑鼠特效 134
7.2.1 使用CSS3控制滑鼠箭頭 134
7.2.2 設定滑鼠變幻式超連結 135
7.2.3 設定網頁頁面滾動條 136
7.3 綜合案例1——圖片版本超級連結 138
7.4 綜合案例2——滑鼠特效 140
7.5 綜合案例3——製作一個簡單的
導航欄 142
7.6 大神解惑 144
7.7 跟我練練手 144
第8章 使用CSS控制表格
和表單樣式 145
8.1 美化表格樣式 146
8.1.1 設定表格框線樣式 146
8.1.2 設定表格框線寬度 148
8.1.3 設定表格框線顏色 149
8.2 美化表單樣式 150
8.2.1 美化表單中的元素 150
8.2.2 美化提交按鈕 152
8.2.3 美化下拉選單 153
8.3 綜合案例1——製作用戶登錄頁面 155
8.4 綜合案例2——製作用戶註冊頁面 156
8.5 大神解惑 159
8.6 跟我練練手 159
第9章 控制列表和選單樣式 161
9.1 美化項目列表的樣式 162
9.1.1 美化無序列表 162
9.1.2 美化有序列表 163
9.1.3 美化自定義列表 165
9.1.4 製作圖片列表 166
9.1.5 縮進圖片列表 167
9.1.6 列表複合屬性 168
9.2 使用CSS製作網頁選單 169
9.2.1 製作無須表格的選單 169
9.2.2 製作水平和垂直選單 171
9.3 綜合案例1——模擬soso導航欄 173
9.4 綜合案例2——將段落轉變成列表 177
9.5 大神解惑 178
9.6 跟我練練手 178
第10章 使用濾鏡美化網頁元素 179
10.1 濾鏡概述 180
10.2 設定基本濾鏡效果 181
10.2.1 高斯模糊濾鏡 181
10.2.2 明暗度濾鏡 182
10.2.3 對比度濾鏡 183
10.2.4 陰影濾鏡 184
10.2.5 灰度濾鏡 185
10.2.6 反相濾鏡 186
10.2.7 透明度濾鏡 187
10.2.8 飽和度濾鏡 188
10.2.9 深褐色濾鏡 189
10.3 使用複合濾鏡效果 190
10.4 大神解惑 191
10.5 跟我練練手 192
第III篇 網 頁 布 局
第11章 CSS定位與DIV布局核心
技術 195
11.1 了解塊級元素和行內級元素 196
11.1.1 塊級元素和行內級元素的
套用 196
11.1.2 div元素和span元素的區別 198
11.2 盒子模型 198
11.2.1 盒子模型的概念 198
11.2.2 定義網頁border區域 199
11.2.3 定義網頁padding區域 200
11.2.4 定義網頁margin區域 201
11.3 彈性盒模型 204
11.3.1 定義盒子布局方向 205
11.3.2 定義盒子布局順序 206
11.3.3 定義盒子布局位置 208
11.3.4 定義盒子彈性空間 209
11.3.5 管理盒子空間 211
11.3.6 盒子空間的溢出管理 213
11.4 綜合案例1——圖文排版效果 214
11.5 綜合案例2——淘寶導購選單 217
11.6 大神解惑 219
11.7 跟我練練手 220
第12章 CSS+DIV盒子的浮動
與定位 221
12.1 定義DIV 222
12.1.1 什麼是DIV 222
12.1.2 創建DIV 222
12.2 盒子的定位 223
12.2.1 靜態定位 223
12.2.2 相對定位 224
12.2.3 絕對定位 225
12.2.4 固定定位 226
12.2.5 盒子的浮動 227
12.3 其他CSS布局定位方式 229
12.3.1 溢出定位 229
12.3.2 隱藏定位 231
12.3.3 z-index空間定位 233
12.4 新增CSS3多列布局 234
12.4.1 設定列寬度 234
12.4.2 設定列數 236
12.4.3 設定列間距 237
12.4.4 設定列框線樣式 238
12.5 綜合案例1——定位網頁布局樣式 240
12.6 綜合案例2——製作陰影文字效果 243
12.7 大神解惑 244
12.8 跟我練練手 244
第13章 固定寬度網頁布局剖析
與製作 245
13.1 CSS排版觀念 246
13.1.1 將頁面用div分塊 246
13.1.2 設定各塊位置 246
13.1.3 用CSS定位 247
13.2 固定寬度網頁剖析與布局 250
13.2.1 網頁單列布局模式 250
13.2.2 網頁1-2-1型布局模式 254
13.2.3 網頁1-3-1型布局模式 258
13.3 大神解惑 261
13.4 跟我練練手 262
第14章 自動縮放網頁布局剖析
與製作 263
14.1 自動縮放網頁1-2-1型布局模式 264
14.1.1 “1-2-1”等比例變寬布局 264
14.1.2 “1-2-1”單列變寬布局 265
14.2 自動縮放網頁1-3-1型布局模式 266
14.2.1 “1-3-1”三列寬度等比例
布局 266
14.2.2 “1-3-1”單側列寬度固定的
變寬布局 266
14.2.3 “1-3-1”中間列寬度固定的
變寬布局 270
14.2.4 “1-3-1”雙側列寬度固定的
變寬布局 273
14.2.5 “1-3-1”中列和左側列寬度
固定的變寬布局 277
14.3 分列布局背景色的使用 280
14.3.1 設定固定寬度布局的列
背景色 280
14.3.2 設定特殊寬度變化布局的列
背景色 282
14.4 綜合案例1——單列寬度變化布局 284
14.5 綜合案例2——多列等比例寬度變化
布局 285
14.6 大神解惑 288
14.7 跟我練練手 288
第IV篇 高 級 技 能
第15章 過渡和動畫效果 291
15.1 了解過渡效果 292
15.2 添加過渡效果 292
15.3 了解動畫效果 295
15.4 添加動畫效果 296
15.5 大神解惑 297
15.6 跟我練練手 298
第16章 2D和3D效果 299
16.1 了解2D轉換效果 300
16.2 添加2D轉換效果 300
16.2.1 添加2D移動效果 300
16.2.2 添加2D旋轉效果 301
16.2.3 添加2D縮放效果 302
16.2.4 添加2D傾斜效果 303
16.2.5 添加綜合變幻效果 304
16.3 添加3D轉換效果 305
16.4 大神解惑 308
16.5 跟我練練手 308
第17章 創建回響式頁面 309
17.1 了解彈性盒子 310
17.2 使用彈性盒子 310
17.3 設定彈性子元素的位置 313
17.4 設定彈性子元素的橫向對齊方式 314
17.5 設定彈性子元素的縱向對齊方式 319
17.6 設定彈性子元素的換行方式 321
17.7 綜合案例——使用彈性盒子創建
回響式頁面 323
17.8 大神解惑 325
17.9 跟我練練手 326
第V篇 綜 合 案 例
第18章 商業門戶類網站賞析 329
18.1 整體設計 330
18.1.1 顏色套用分析 330
18.1.2 架構布局分析 331
18.2 主要模組設計 331
18.2.1 網頁整體樣式插入 331
18.2.2 網頁局部樣式 333
18.2.3 頂部模組樣式代碼分析 340
18.2.4 中間主體代碼分析 341
18.2.5 底部模組分析 344
18.3 網站調整 345
18.3.1 部分內容調整 345
18.3.2 模組調整 345
18.3.3 調整後預覽測試 347
第19章 設計線上購物類網頁 349
19.1 整體布局 350
19.1.1 設計分析 350
19.1.2 排版架構 350
19.2 主要模組設計 351
19.2.1 Logo與導航區 351
19.2.2 Banner與資訊區 353
19.2.3 產品類別區域 354
19.2.4 頁腳區域 355
第20章 設計企業門戶類網頁 357
20.1 構思布局 358
20.1.1 設計分析 358
20.1.2 排版架構 358
20.2 主要模組設計 359
20.2.1 Logo與導航選單 359
20.2.2 Banner區 360
20.2.3 資訊區 361
20.2.4 版權資訊 363
第21章 設計娛樂休閒類網頁 365
21.1 整體設計 366
21.1.1 套用設計分析 366
21.1.2 架構布局分析 367
21.2 主要模組設計 368
21.2.1 網頁整體樣式插入 368
21.2.2 頂部模組代碼分析 369
21.2.3 視頻模組代碼分析 370
21.2.4 評論模組代碼分析 371
21.2.5 熱門推薦模組代碼分析 373
21.2.6 底部模組分析 375
21.3 網頁調整 376
21.3.1 部分內容調整 376
21.3.2 調整後預覽測試 377
第22章 設計圖像影音類網頁 379
22.1 整體設計 380
22.1.1 顏色套用分析 380
22.1.2 架構布局分析 381
22.2 主要模組設計 382
22.2.1 樣式代碼分析 382
22.2.2 頂部模組樣式代碼分析 386
22.2.3 網站主體模組代碼分析 387
22.2.4 底部模組分析 391
22.3 網站調整 392
22.3.1 部分內容調整 392
22.3.2 模組調整 392
22.3.3 調整後預覽測試 395
