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

「網站開發案例課堂」系列圖書是專門為網站開發和數據庫初學者量身定做的一套學習用書，由劉玉紅策划、千谷高新教育的高級講師編著，整套書涵蓋網站開發、數據庫設計等方面。整套書具有以下特點。