《CSS3+DIV網頁樣式與布局案例課堂（第2版）》是2019年出版的圖書，作者是劉春茂。
基本介紹
- 書名：CSS3+DIV網頁樣式與布局案例課堂（第2版）
- 作者：劉春茂
- ISBN：9787302515432
- 出版時間：2019年1月1日
出版信息,內容簡介,目錄,
出版信息
CSS3+DIV網頁樣式與布局案例課堂（第2版）
作者：劉春茂
定價：89元
印次：2-1
ISBN：9787302515432
出版日期：2019年1月1日
印刷日期：2018年12月28日
定價：89元
印次：2-1
ISBN：9787302515432
出版日期：2019年1月1日
印刷日期：2018年12月28日
內容簡介
《CSS3+DIV網頁樣式與布局案例課堂(第2版)》以零基礎講解為宗旨，用實例引導讀者深入學習，採取“基礎知識→核心技術→高級套用→網頁布局→項目案例實戰”的講解模式，深入淺出地講解CSS3+DIV的各項技術及實戰技能。《CSS3+DIV網頁樣式與布局案例課堂(第2版)》第Ⅰ篇主要講解網頁設計的必備技能、CSS樣式入門和CSS3樣式的基本語法等；第Ⅱ篇主要講解設計網頁字型與段落樣式、設計網頁圖片樣式、設計網頁背景與框線樣式、設計網頁超級連結和滑鼠樣式、設計表格和表單樣式、設計列表和選單樣式、使用濾鏡美化網頁元素等；第Ⅲ篇主要講解CSS3的高級特性、過渡和動畫效果、2D和3D變幻效果、CSS3和JavaScript的搭配套用、CSS3與XML的綜合運用等；
目錄
第Ⅰ篇基礎知識
第1章網頁設計的必備技能 3
1.1認識網頁和網站 4
1.1.1什麼是網頁 4
1.1.2什麼是網站 4
1.2網頁中需要包含的要素 5
1.2.1需要HTML檔案 5
1.2.2需要DIV層 5
1.2.3需要CSS定義網頁樣式 6
1.2.4需要JavaScript設定網頁動畫 6
1.2.5需要域名與伺服器空間 7
1.3一個簡單網頁的基本構成 7
1.3.1Head部分 8
1.3.2Body部分 8
1.3.3注釋部分 8
1.4設計網頁的總體流程 9
1.4.1網頁規劃 9
1.4.2蒐集資料 9
1.4.3設計網頁的總體效果 10
1.4.4製作網頁素材檔案 11
1.4.5搭建網頁DIV層 12
1.4.6使用CSS與JavaScript 12
1.4.7測試網頁 13
1.5網站的種類與網頁布局方式 14
1.5.1網站的種類 14
1.5.2網頁布局方式 15
1.6在Photoshop中構建網頁結構 16
1.7大神解惑 18
1.8跟我練練手 18
第2章CSS樣式入門 19
2.1認識CSS 20
2.1.1CSS功能 20
2.1.2瀏覽器與CSS 20
2.1.3CSS發展歷史 21
2.2CSS常用單位 21
2.2.1顏色單位 21
2.2.2長度單位 25
2.3編輯和瀏覽CSS 26
2.3.1案例1——手工編寫CSS 26
2.3.2案例2——使用Dreamweaver編寫CSS 27
2.4在HTML中調用CSS的方法 28
2.4.1案例3——行內樣式 28
2.4.2案例4——內嵌樣式 29
2.4.3案例5——連結樣式 31
2.4.4案例6——導入樣式 32
2.5調用CSS方法的優先權問題 33
2.5.1案例7——行內樣式和內嵌樣式比較 33
2.5.2案例8——內嵌樣式和連結樣式比較 34
2.5.3案例9——連結樣式和導入樣式比較 34
2.6綜合案例——製作產品銷售統計表 35
2.7大神解惑 37
2.8跟我練練手 37
第3章CSS3樣式的基本語法 39
3.1CSS基本語法 40
3.1.1CSS構造規則 40
3.1.2CSS的注釋 40
3.2CSS的常用選擇器 40
3.2.1案例1——標籤選擇器 41
3.2.2案例2——類選擇器 41
3.2.3案例3——ID選擇器 42
3.2.4案例4——選擇器的聲明 43
3.3綜合案例——製作炫彩網站Logo 44
3.4大神解惑 46
3.5跟我練練手 47
第II篇核心技術
第4章設計網頁字型與段落樣式 51
4.1美化字型樣式 52
4.1.1案例1——控制字型類型 52
4.1.2案例2——定義字型大小 53
4.1.3案例3——定義字型風格 54
4.1.4案例4——控制文字的粗細 55
4.1.5案例5——將小寫字母轉為大寫字母 56
4.1.6案例6——設定字型的複合屬性 57
4.1.7案例7——定義文字的顏色 58
4.2CSS3中新增的文本高級樣式 59
4.2.1案例8——添加文本的陰影效果 59
4.2.2案例9——設定文本溢出效果 60
4.2.3案例10——控制文本的換行 62
4.2.4案例11——設定字型尺寸 63
4.3通過CSS控制文本間距與對齊方式 64
4.3.1案例12——設定單詞之間的間隔 64
4.3.2案例13——設定字元之間的間隔 65
4.3.3案例14——為文本添加下畫線、上畫線、刪除線 66
4.3.4案例15——設定垂直對齊方式 66
4.3.5案例16——轉換文本的大小寫 68
4.3.6案例17——設定文本的水平對齊方式 69
4.3.7案例18——設定文本的縮進效果 71
4.3.8案例19——設定文本的行高 71
4.3.9案例20——文本的空白處理 72
4.3.10案例21——文本的反排 73
4.4綜合案例1——設定網頁標題 75
4.5綜合案例2——製作新聞頁面 76
4.6大神解惑 77
4.7跟我練練手 78
第5章設計網頁圖片樣式 79
5.1圖片縮放 80
5.1.1案例1——通過描述標記width和height縮放圖片 80
5.1.2案例2——使用CSS3中的max-width和max-height縮放圖片 80
5.1.3案例3——使用CSS3中的width和height縮放圖片 81
5.2設定圖片的對齊方式 82
5.2.1案例4——設定圖片橫向對齊 82
5.2.2案例5——設定圖片縱向對齊 83
5.3圖文混排 84
5.3.1案例6——設定文字環繞效果 84
5.3.2案例7——設定圖片與文字的間距 85
5.4綜合案例1——製作學校宣傳單 87
5.5綜合案例2——製作簡單圖文混排網頁 89
5.6大神解惑 90
5.7跟我練練手 90
第6章設計網頁背景與框線樣式 91
6.1設計網頁背景樣式 92
6.1.1案例1——設定背景顏色 92
6.1.2案例2——設定背景圖片 93
6.1.3案例3——背景圖片重複 94
6.1.4案例4——背景圖片顯示 95
6.1.5案例5——設定背景圖片位置 97
6.2CSS3中新增的控制網頁背景屬性 99
6.2.1案例6——設定背景圖片大小 99
6.2.2案例7——設定背景顯示區域 100
6.2.3案例8——設定背景圖像裁剪區域 102
6.2.4案例9——設定背景的複合屬性 103
6.3設計框線樣式 104
6.3.1案例10——設定框線樣式 104
6.3.2案例11——設定框線顏色 106
6.3.3案例12——設定框線線寬 107
6.3.4案例13——設定框線的複合屬性 109
6.4CSS3中新增的框線圓角效果 110
6.4.1案例14——設定圓角框線 110
6.4.2案例15——指定兩個圓角半徑 111
6.4.3案例16——繪製四個不同圓角框線 112
6.4.4案例17——繪製不同種類的框線 114
6.5CSS3中的漸變效果 115
6.5.1案例18——線性漸變效果 116
6.5.2案例19——徑向漸變效果 118
6.6綜合案例1——製作簡單公司主頁 119
6.7綜合案例2——製作簡單生活資訊主頁 122
6.8大神解惑 124
6.9跟我練練手 124
第7章設計網頁超級連結和滑鼠樣式 125
7.1使用CSS3美化超連結 126
7.1.1案例1——改變超級連結基本樣式 126
7.1.2案例2——設定帶有提示信息的超級連結 127
7.1.3案例3——設定超級連結的背景圖 128
7.1.4案例4——設定超級連結的按鈕效果 129
7.2使用CSS3美化滑鼠 130
7.2.1案例5——使用CSS3控制滑鼠箭頭 130
7.2.2案例6——設定滑鼠變幻式超連結 132
7.2.3案例7——設定網頁頁面滾動條 133
7.3綜合案例1——圖片版本超級連結 135
7.4綜合案例2——關於滑鼠特效案例 136
7.5綜合案例3——製作一個簡單的導航欄 139
7.6大神解惑 140
7.7跟我練練手 141
第8章設計表格和表單樣式 143
8.1美化表格樣式 144
8.1.1案例1——設定表格框線樣式 144
8.1.2案例2——設定表格框線寬度 146
8.1.3案例3——設定表格框線顏色 147
8.2美化表單樣式 148
8.2.1案例4——美化表單中的元素 148
8.2.2案例5——美化提交按鈕 150
8.2.3案例6——美化下拉選單 151
8.3綜合案例1——製作用戶登錄頁面 153
8.4綜合案例2——製作用戶註冊頁面 155
8.5大神解惑 157
8.6跟我練練手 158
第9章設計列表和選單樣式 159
9.1美化項目列表的樣式 160
9.1.1案例1——美化無序列表 160
9.1.2案例2——美化有序列表 161
9.1.3案例3——美化自定義列表 163
9.1.4案例4——製作圖片列表 164
9.1.5案例5——縮進圖片列表 165
9.1.6案例6——列表複合屬性 166
9.2使用CSS製作網頁選單 168
9.2.1案例7——製作動態導航選單 168
9.2.2案例8——製作水平和垂直選單 170
9.3綜合案例1——模擬SOSO導航欄 172
9.4綜合案例2——將段落轉變成列表 175
9.5大神解惑 177
9.6跟我練練手 177
第10章使用濾鏡美化網頁元素 179
10.1濾鏡概述 180
10.2設定基本濾鏡效果 181
10.2.1案例1——高斯模糊(blur)濾鏡 181
10.2.2案例2——明暗度(brightness)濾鏡 182
10.2.3案例3——對比度(contrast)濾鏡 183
10.2.4案例4——陰影(drop-shadow)濾鏡 184
10.2.5案例5——灰度(grayscale)濾鏡 185
10.2.6案例6——反相(invert)濾鏡 186
10.2.7案例7——透明度(opacity)濾鏡 187
10.2.8案例8——飽和度(saturate)濾鏡 188
10.2.9案例9——深褐色(sepia)濾鏡 189
10.3使用複合濾鏡效果 190
10.4大神解惑 191
10.5跟我練練手 191
第III篇高級套用
第11章CSS3的高級特性 195
11.1複合選擇器 196
11.1.1案例1——全局選擇器 196
11.1.2案例2——交集選擇器 197
11.1.3案例3——並集選擇器 197
11.1.4案例4——繼承(後代)選擇器 198
11.2CSS3新增的選擇器 199
11.2.1案例5——屬性選擇器 199
11.2.2案例6——結構偽類選擇器 201
11.2.3案例7——UI元素狀態偽類選擇器 202
11.2.4案例8——偽類選擇器 204
11.3CSS3的繼承特性 205
11.3.1案例9——繼承關係 205
11.3.2案例10——CSS繼承的運用 206
11.4CSS3的層疊特性 207
11.4.1案例11——同一選擇器被多次定義的處理 207
11.4.2案例12——同一標籤運用不同類型選擇器的處理 208
11.5綜合案例——製作新聞選單 209
11.6大神解惑 212
11.7跟我練練手 212
第12章過渡和動畫效果 213
12.1認識過渡效果 214
12.2案例1——添加過渡效果 214
12.3了解動畫效果 217
12.4案例2——添加動畫效果 218
12.5大神解惑 219
12.6跟我練練手 220
第13章2D和3D變幻效果 221
13.1認識2D轉換效果 222
13.2添加2D轉換效果 222
13.2.1案例1——添加移動效果 222
13.2.2案例2——添加旋轉效果 223
13.2.3案例3——添加縮放效果 224
13.2.4案例4——添加傾斜效果 225
13.2.5案例5——添加綜合變幻效果 227
13.3添加3D轉換效果 228
13.4大神解惑 230
13.5跟我練練手 230
第14章CSS3和JavaScript的搭配套用 231
14.1JavaScript語法基礎 232
14.1.1什麼是JavaScript 232
14.1.2數據類型 232
14.1.3變數 234
14.1.4案例1——運算符的簡單套用 234
14.1.5案例2——流程控制語句的簡單套用 237
14.1.6案例3——函式的簡單套用 240
14.2常見的JavaScript編寫工具 243
14.2.1記事本編寫工具 243
14.2.2Dreamweaver編寫工具 244
14.3JavaScript在HTML中的使用 244
14.3.1案例4——在HTML網頁頭中嵌入JavaScript代碼 245
14.3.2案例5——在HTML網頁中嵌入JavaScript代碼 246
14.3.3案例6——在HTML網頁的元素事件中嵌入JavaScript代碼 247
14.3.4案例7——在HTML中調用已經存在的JavaScript檔案 248
14.3.5案例8——通過JavaScript偽URL引入JavaScript腳本代碼 249
14.4JavaScript與CSS3的結合使用 250
14.4.1案例9——設定動態內容 250
14.4.2案例10——改變動態樣式 251
14.4.3案例11——動態定位網頁元素 252
14.4.4案例12——設定網頁元素的顯示與隱藏 254
14.5HTML5、CSS3和JavaScript的搭配套用 255
14.5.1案例13——設定左右移動的圖片 256
14.5.2案例14——製作顏色選擇器 258
14.5.3案例15——製作跑馬燈效果 260
14.6綜合案例——製作樹形導航選單 262
14.7大神解惑 267
14.8跟我練練手 268
第15章CSS與XML的綜合運用 269
15.1XML語法基礎 270
15.1.1實例1——XML的基本套用 270
15.1.2實例2——XML文檔的組成和聲明 271
15.1.3實例3——XML元素介紹 272
15.2使用CSS修飾XML檔案 274
15.2.1實例4——XML使用CSS 274
15.2.2實例5——設定字型屬性 275
15.2.3實例6——設定色彩屬性 276
15.2.4實例7——設定框線屬性 277
15.2.5實例8——設定文本屬性 278
15.3綜合實例1——招聘廣告 279
15.4綜合實例2——圖文混排頁面 281
15.5綜合實例3——古詩欣賞 283
15.6大神解惑 286
15.7跟我練練手 286
第IV篇網頁布局
第16章CSS定位與DIV布局核心技術 289
16.1認識塊級元素和行內級元素 290
16.1.1案例1——塊級元素和行內級元素的套用 290
16.1.2案例2——div元素和span元素的區別 292
16.2盒子模型 292
16.2.1盒子模型的概念 293
16.2.2案例3——定義網頁border區域 293
16.2.3案例4——定義網頁padding區域 295
16.2.4案例5——定義網頁margin區域 296
16.3彈性盒模型 299
16.3.1案例6——定義盒子布局方向(box-orient) 300
16.3.2案例7——定義盒子布局順序(box-direction) 301
16.3.3案例8——定義盒子布局位置(box-ordinal-group) 303
16.3.4案例9——定義盒子彈性空間(box-flex) 304
16.3.5案例10——管理盒子空間(box-pack和box-align) 306
16.3.6案例11——盒子空間的溢出管理(box-lines) 307
16.4綜合案例1——圖文排版效果 308
16.5綜合案例2——淘寶導購選單 310
16.6大神解惑 313
16.7跟我練練手 314
第17章CSS+DIV盒子的浮動與定位 315
17.1定義DIV 316
17.1.1什麼是DIV 316
17.1.2案例1——創建DIV 316
17.2盒子的定位 317
17.2.1案例2——靜態定位 317
17.2.2案例3——相對定位 318
17.2.3案例4——絕對定位 319
17.2.4案例5——固定定位 320
17.2.5案例6——盒子的浮動 321
17.3其他CSS布局定位方式 323
17.3.1案例7——溢出(overflow)定位 323
17.3.2案例8——隱藏(visibility)定位 325
17.3.3案例9——z-index空間定位 327
17.4新增CSS3多列布局 328
17.4.1案例10——設定列寬度 328
17.4.2案例11——設定列數 330
17.4.3案例12——設定列間距 331
17.4.4案例13——設定列框線樣式 332
17.5綜合案例1——定位網頁布局樣式 334
17.6綜合案例2——製作陰影文字效果 337
17.7大神解惑 338
17.8跟我練練手 338
第18章固定寬度網頁布局剖析與製作 339
18.1CSS排版的觀念 340
18.1.1將頁面用div分塊 340
18.1.2設定各塊位置 340
18.1.3案例1——用CSS定位 341
18.2固定寬度網頁剖析與布局 344
18.2.1案例2——網頁單列布局模式 344
18.2.2案例3——網頁“1-2-1”型布局模式 348
18.2.3案例4——網頁“1-3-1”型布局模式 350
18.3大神解惑 354
18.4跟我練練手 354
第19章自動縮放網頁布局剖析與製作 355
19.1自動縮放網頁“1-2-1”型布局模式 356
19.1.1案例1——“1-2-1”等比例變寬布局 356
19.1.2案例2——“1-2-1”單列變寬布局 357
19.2自動縮放網頁“1-3-1”型布局模式 358
19.2.1“1-3-1”三列寬度等比例布局 358
19.2.2案例3——“1-3-1”單側列寬度固定的變寬布局 358
19.2.3案例4——“1-3-1”中間列寬度固定的變寬布局 361
19.2.4案例5——“1-3-1”雙側列寬度固定的變寬布局 365
19.2.5案例6——“1-3-1”中列和左側列寬度固定的變寬布局 368
19.3分列布局背景色的使用 371
19.3.1案例7——設定固定寬度布局的列背景色 372
19.3.2案例8——設定特殊寬度變化布局的列背景色 373
19.4綜合案例1——單列寬度變化布局 374
19.5綜合案例2——多列等比例寬度變化布局 376
19.6大神解惑 378
19.7跟我練練手 378
第20章創建回響式頁面 379
20.1了解彈性盒子 380
20.2案例1——使用彈性盒子 380
20.3案例2——設定彈性子元素的位置 383
20.4案例3——設定彈性子元素的橫向對齊方式 384
20.5案例4——設定彈性子元素的縱向對齊方式 389
20.6案例5——設定彈性子元素的換行方式 390
20.7綜合案例——使用彈性盒子創建回響式頁面 393
20.8大神解惑 395
20.9跟我練練手 396
第V篇項目案例實戰
第21章設計商業門戶類網頁 399
21.1整體設計 400
21.1.1顏色套用分析 400
21.1.2架構布局分析 400
21.2主要模組設計 401
21.2.1網頁整體樣式插入 401
21.2.2網頁局部樣式 403
21.2.3頂部模組樣式代碼分析 410
21.2.4中間主體代碼分析 411
21.2.5底部模組分析 414
21.3網站調整 415
21.3.1部分內容調整 415
21.3.2模組調整 415
21.3.3調整後預覽測試 417
第22章設計圖像影音類網頁 419
22.1整體設計 420
22.1.1顏色套用分析 420
22.1.2架構布局分析 421
22.2主要模組設計 422
22.2.1樣式代碼分析 422
22.2.2頂部模組樣式代碼分析 425
22.2.3網站主體模組代碼分析 427
22.2.4底部模組分析 430
22.3網站調整 431
22.3.1部分內容調整 431
22.3.2模組調整 432
22.3.3調整後預覽測試 435
第23章設計娛樂休閒類網頁 437
23.1整體設計 438
23.1.1套用設計分析 438
23.1.2架構布局分析 439
23.2主要模組設計 440
23.2.1網頁整體樣式插入 440
23.2.2頂部模組代碼分析 441
23.2.3視頻模組代碼分析 442
23.2.4評論模組代碼分析 443
23.2.5熱門推薦模組代碼分析 444
23.2.6底部模組分析 446
23.3網頁調整 446
23.3.1部分內容調整 446
23.3.2調整後預覽測試 448
第24章設計企業門戶類網頁 449
24.1構思布局 450
24.1.1設計分析 450
24.1.2排版架構 450
24.2主要模組設計 451
24.2.1Logo與導航選單 451
24.2.2Banner區 452
24.2.3資訊區 453
24.2.4版權資訊 455
第25章設計線上購物類網頁 457
25.1整體布局 458
25.1.1設計分析 458
25.1.2排版架構 458
25.2主要模組設計 459
25.2.1Logo與導航區 459
25.2.2Banner與資訊區 460
25.2.3產品類別區域 462
25.2.4頁腳區域 463
