Div+CSS 3.0網(wǎng)頁布局案例精粹（升級(jí)版）

第一章 網(wǎng)頁和網(wǎng)站制作流程
1．1 認(rèn)識(shí)網(wǎng)頁 2
1．1．1 網(wǎng)頁和網(wǎng)站 2
1．1．2 網(wǎng)頁的基本構(gòu)成元素 2
1．2 什么是網(wǎng)頁設(shè)計(jì) 3
1．2．1 網(wǎng)頁設(shè)計(jì)概述 3
1．2．2 網(wǎng)頁設(shè)計(jì)和網(wǎng)頁制作 4
1．2．3 網(wǎng)頁設(shè)計(jì)的特點(diǎn) 5
1．2．4 網(wǎng)頁制作相關(guān)術(shù)語 6
1．3 網(wǎng)頁設(shè)計(jì)中所涵蓋的內(nèi)容 11
1．3．1 視聽元素 11
1．3．2 版式設(shè)計(jì) 11
1．4 如何設(shè)計(jì)網(wǎng)頁 12
1．4．1 網(wǎng)頁設(shè)計(jì)的基本原則 12
1．4．2 網(wǎng)頁設(shè)計(jì)成功的要素 13
1．4．3 網(wǎng)頁設(shè)計(jì)風(fēng)格及色彩搭配 14
1．5 網(wǎng)頁設(shè)計(jì)的原則 14
1．5．1 為用戶考慮的原則 14
1．5．2 主題突出原則 15
1．5．3 整體原則 16
1．5．4 內(nèi)容與形式相統(tǒng)一 16
1．5．5 更新和維護(hù)的原則 17
1．6 網(wǎng)頁設(shè)計(jì)師應(yīng)具備的素質(zhì) 17
1．6．1 藝術(shù)素質(zhì) 17
16．2 技能素質(zhì) 18
1．6．3 綜合素質(zhì) 18
1．7 網(wǎng)站的制作流程 19
1．7．1 前期策劃 19
1．7．2 原型設(shè)計(jì) 20
1．7．3 頁面美化 21
1．7．4 頁面開發(fā) 22
1．7．5 后期維護(hù) 22
1．8 靜態(tài)頁面的制作流程 22
1．8．1 觀察設(shè)計(jì)稿 22
1．8．2 拆分設(shè)計(jì)稿 23
1．8．3 網(wǎng)頁設(shè)計(jì)實(shí)現(xiàn) 23
第二章 CSS樣式入門
2．1 CSS的基本概念 25
2．1．1 CSS的特點(diǎn) 25
2．1．2 CSS的基本語法 25
2．1．3 CSS的沖突 26
技能案例：使用就近原則 26
2．2 網(wǎng)頁設(shè)計(jì)中的CSS 28
2．2．1 如何使用CSS 28
2．2．2 CSS能做什么 29
2．2．3 CSS不能做什么 30
2．3 CSS的基本用法 30
2．3．1 內(nèi)聯(lián)樣式 30
2．3．2 嵌入樣式 30
技能案例：設(shè)置嵌入樣式 30
2．3．3 外部樣式 31
2．4 CSS的單位和值 31
2．4．1 定義顏色值 32
2．4．2 定義字體 33
2．5 CSS基礎(chǔ)選擇符 34
2．5．1 通配選擇符 34
2．5．2 標(biāo)簽選擇符 35
2．5．3 id選擇符 35
2．5．4 類選擇符 35
技能案例：使用類選擇符定義樣式 36
2．5．5 群組選擇符 36
2．5．6 基礎(chǔ)選擇符瀏覽器適配 36
2．6 CSS的層次選擇符 36
2．6．1 后代選擇符 37
技能案例：使用后代選擇符定義樣式 37
2．6．2 子選擇符 37
2．6．3 相鄰兄弟選擇符 37
技能案例：使用相鄰兄弟選擇符設(shè)置樣式 37
2．6．4 通用兄弟選擇符 38
技能案例：使用通用兄弟選擇符定義樣式 38
2．6．5 層次選擇符瀏覽器適配 39
2．7 偽類和偽元素 39
2．7．1動(dòng)態(tài)偽類選擇符 39
2．7．2 目標(biāo)偽類選擇符 40
2．7．3 語言偽類選擇器 40
2．7．4 UI元素狀態(tài)偽類選擇器 40
2．7．5 結(jié)構(gòu)偽類選擇器 41
2．7．6 偽類選擇符瀏覽器適配 42
2．7．7 偽元素選擇符 44
2．8 應(yīng)用案例――為頁面添加CSS樣式 45
2．8．1 設(shè)計(jì)分析 45
2．8．2 制作步驟 45
2．8．3 案例總結(jié) 51
2．9 舉一反三――產(chǎn)品介紹網(wǎng)站 51
2．9．1 案例分析 52
2．9．2 視頻操作 52
第三章 使用DIV+CSS布局頁面
3．1 定義Div 55
3．1．1 什么是Div 55
3．1．2 插入Div 55
3．1．3 Div的嵌套和固定格式 56
3．2 CSS布局定位 57
3．2．1 浮動(dòng)定位 57
3．2．2 position定位 60
3．3 可視化盒模型 62
3．3．1 盒子模型 62
3．3．2 視覺可視化模型 64
3．3．3 空白邊疊加 64
3．4 常見的網(wǎng)頁布局方式 65
3．4．1 居中布局設(shè)計(jì) 65
3．4．2 浮動(dòng)布局設(shè)計(jì) 66
3．4．3 高度自適應(yīng) 70
3．5 盒模型的控制屬性 70
3．5．1 overflow 70
技能案例：顯示滾動(dòng)條 71
3．5．2 overflow-x 71
技能案例：顯示橫向滾動(dòng)條 71
3．5．3 overflow-y 72
技能案例：顯示豎向滾動(dòng)條 72
3．6 應(yīng)用案例――使用DIV+CSS布局頁面 73
3．6．1 設(shè)計(jì)分析 73
3．6．2 制作步驟 73
3．6．3 案例總結(jié) 78
3．7 舉一反三――制作健康網(wǎng)站 78
3．7．1 案例分析 78
3．7．2 視頻操作 79
第四章 使用CSS控制網(wǎng)頁中的背景
4．1 背景顏色 81
4．1．1 設(shè)置頁面背景顏色 81
技能案例：添加背景顏色 81
4．1．2 設(shè)置塊背景顏色 82
技能案例：添加塊背景 82
4．1．3 漸變背景 83
技能案例：設(shè)置線性漸變背景 83
技能案例：設(shè)置徑向漸變背景 84
4．2 背景圖片 86
4．2．1 為頁面設(shè)置背景圖片 86
技能案例：設(shè)置背景圖片 86
4．2．2 背景圖片的重復(fù) 87
技能案例：設(shè)置背景圖片的重復(fù) 87
4．2．3 設(shè)置背景圖片的位置 88
技能案例：設(shè)置背景圖片的位置 88
4．2．4 設(shè)置背景滾動(dòng) 90
技能案例：設(shè)置頁面背景滾動(dòng) 90
4．2．5 背景樣式縮寫的方式 90
4．3 背景定位 91
4．3．1 背景定位屬性的語法 91
4．3．2 背景定位屬性的瀏覽器適配 91
4．4 背景裁切 92
4．4．1 背景裁切屬性的語法 92
4．4．2 背景裁切的瀏覽器適配 92
4．5 背景大小 93
4．5．1 背景大小屬性的語法 93
4．5．2 背景大小瀏覽器的適配 93
4．6 多重背景圖像 94
4．6．1 多重背景圖像屬性的語法 94
4．6．2 多重背景圖像的瀏覽器適配 95
4．6．3 CSS多背景屬性的優(yōu)勢(shì) 95
4．7 應(yīng)用案例――制作金融類網(wǎng)站頁面 96
4．7．1 設(shè)計(jì)分析 96
4．7．2 制作步驟 96
4．7．3 案例總結(jié) 102
4．8 舉一反三――制作電子商品網(wǎng)站 102
4．8．1 案例分析 103
4．8．2 視頻操作 103

第五章 使用CSS控制頁面文字樣式
5．1 控制文本樣式 106
5．1．1 文本字體和大小 106
技能案例：設(shè)置網(wǎng)頁中的文字字體 107
5．1．2 文本顏色和粗細(xì) 110
技能案例：設(shè)置網(wǎng)頁中文字的顏色 110
5．1．3 文本的3種樣式 112
技能案例：設(shè)置網(wǎng)頁中文字的樣式 112
5．1．4 文本的美化方式 113
技能案例：為網(wǎng)頁中的文字設(shè)置下劃線效果 113
5．1．5 英文字母大小寫 113
5．2 控制段落樣式 114
5．2．1 段落水平對(duì)齊 114
技能案例：設(shè)置文字左對(duì)齊、水平居中與右對(duì)齊 114
5．2．2 段落垂直對(duì)齊 116
技能案例：設(shè)置文本段落垂直對(duì)齊 116
5．2．3 行間距和字間距 117
5．2．4 首字下沉 118
技能案例：設(shè)置網(wǎng)頁中段落首字母下沉 118
5．3 文字陰影及模糊 119
5．3．1 文字陰影及模糊屬性的語法 119
技能案例：設(shè)置網(wǎng)頁中文本的陰影 119
5．3．2 文字陰影屬性的瀏覽器適配 120
5．4 文字溢出 120
5．4．1 文字溢出屬性的語法 121
5．4．2 文字溢出屬性瀏覽器的適配 121
5．5 文字?jǐn)嚅_轉(zhuǎn)行 121
5．5．1 文字?jǐn)嚅_轉(zhuǎn)行屬性的語法 121
5．5．2 文字轉(zhuǎn)行屬性的瀏覽器適配 122
5．6 應(yīng)用實(shí)例――設(shè)計(jì)類網(wǎng)站 122
5．6．1 設(shè)計(jì)分析 123
5．6．2 制作步驟 123
5．6．3 案例總結(jié) 129
5．7 舉一反三――制作社區(qū)類網(wǎng)站 129
5．7．1 案例分析 130
5．7．2 視頻操作 130

第六章 使用CSS控制圖片樣式
6．1圖片樣式 132
6．1．1 圖片邊框設(shè)置 132
技能案例：設(shè)置圖片邊框 132
6．1．2 圖片縮放設(shè)置 135
技能案例：設(shè)置網(wǎng)頁中圖片的縮放 135
6．2 圖片對(duì)齊 137
6．2．1 水平對(duì)齊設(shè)置 137
技能案例：設(shè)置圖片的水平對(duì)齊 137
6．2．2 垂直對(duì)齊設(shè)置 138
6．3 圖文混排 139
6．3．1 文本混排 140
技能案例：設(shè)置網(wǎng)頁中的圖文混排 140
6．3．2 設(shè)置混排間距 140
6．4 圖像邊框 141
6．4．1 圖像邊框?qū)傩缘恼Z法介紹 141
6．4．1 圖像邊框的瀏覽器適配 141
6．5 邊框圓角 142
6．5．1 邊框圓角屬性的語法 142
6．5．2 4個(gè)子屬性 143
6．5．3 邊框圓角屬性的瀏覽器適配 144
6．6 邊框陰影 144
6．6．1 邊框陰影屬性的語法 145
6．6．2邊框陰影瀏覽器的適配 145
6．7 邊框顏色 146
6．7．1 邊框顏色屬性的語法 146
6．7．2 邊框顏色的瀏覽器適配 147
6．8 應(yīng)用實(shí)例――制作婚慶網(wǎng)站頁面 147
6．8．1 設(shè)計(jì)分析 147
6．8．2 制作步驟 148
6．8．3 案例總結(jié) 153
6．9 舉一反三――產(chǎn)品介紹網(wǎng)站 153
6．9．1 案例分析 154
6．9．2 視頻操作 154
第七章 使用CSS控制列表樣式
7．1 列表控制概述 155
7．1．1 列表控制原則 155
7．1．2 列表的類型及使用 155
技能案例：使用uI制作無序列表 155
技能案例：使用ol制作無序列表 156
技能案例：使用dl制作列表 156
7．1．3 改變項(xiàng)目樣式 157
技能案例：制作突出的列表樣式 157
7．1．4 圖片符號(hào) 158
技能案例：制作圖片符號(hào)列表 158
7．2 使用列表制作實(shí)用菜單 159
7．2．1 無需表格的菜單 159
技能案例：制作豎排菜單 159
7．2．2 菜單的橫豎轉(zhuǎn)換 161
技能案例：制作橫排菜單 161
技能案例：制作下拉菜單 162
7．3 Opacity 164
7．3．1 Opacity 語法 164
技能案例：為圖片設(shè)置透明度 164
7．3．2 Opacity的瀏覽器適配 165
7．4 CSS 顏色模式 165
7．4．1 HSL colors語法 165
技能案例：使用HSL顏色模式 165
7．4．2 HSLA colors 語法 166
技能案例：使用HSLA顏色模式 166
7．4．3 RGBA colors語法 167
技能案例：使用RGBA顏色模式 167
7．4．4 HSL、HSLA和RGBA colors的瀏覽器適配 168
7．5 應(yīng)用實(shí)例――制作音樂網(wǎng)站 169
7．5．1 設(shè)計(jì)分析 170
7．5．2 制作步驟 170
7．5．3 案例總結(jié) 174
7．6 舉一反三――制作設(shè)計(jì)工作室網(wǎng)站 174
7．6．1 案例分析 174
7．6．2 視頻操作 175
第八章 使用CSS控制表單樣式
8．1 表單設(shè)計(jì)概述 177
8．1．1 表單的設(shè)計(jì)原則 177
8．1．2 表單應(yīng)用分類 178
8．2 表單的設(shè)計(jì) 179
8．2．1 表單和表單元素 179
8．2．2 標(biāo)簽、字段集和圖例 183
技能案例：制作表單 183
8．2．3 使用CSS控制文本字段 185
技能案例：使用CSS樣式更改表單外觀 185
8．2．4 使用CSS控制復(fù)選框與單選框 185
技能案例：使用CSS樣式更改表單外觀2 186
8．2．5 使用CSS控制列表與跳轉(zhuǎn)菜單 186
技能案例：使用CSS樣式更改表單外觀3 186
8．3 應(yīng)用實(shí)例――制作用戶注冊(cè)頁面 187
8．3．1 設(shè)計(jì)分析 187
8．3．2 制作步驟 187
8．3．3 案例總結(jié) 195
8．4 舉一反三――制作用戶登錄頁面 195
8．4．1 案例分析 196
8．4．2 視頻操作 196
第九章 使用CSS美化瀏覽器效果
9．1 使用CSS控制超鏈接 199
9．1．1 認(rèn)識(shí)超鏈接 199
9．1．2 關(guān)于鏈接路徑 200
9．1．3 超鏈接屬性控制 202
技能案例：設(shè)置超鏈接屬性 203
9．1．4 偽元素的內(nèi)容控制屬性 205
技能案例：使用content屬性 206
9．1．5 圖像映射 206
技能案例：設(shè)置熱點(diǎn)鏈接 206
9．1．6 鏈接的打開方式 208
9．2 超鏈接特效 208
9．2．1 按鈕式超鏈接 208
技能案例：制作按鈕式超鏈接 208
9．2．2 浮雕式超鏈接 209
技能案例：制作浮雕式超鏈接 209
9．3 鼠標(biāo)特效 210
9．3．1 CSS控制鼠標(biāo)箭頭 210
9．3．2 鼠標(biāo)變化的超鏈接 211
技能案例：設(shè)置超鏈接的鼠標(biāo)變化 211
9．4 box-sizing 212
9．4．1 box-sizing屬性語法 212
9．4．2 box-sizing的瀏覽器適配 212
技能案例：為邊框添加陰影 213
9．5 resize 213
9．5．1 resize屬性 213
9．5．2 resize的瀏覽器適配 214
9．6 outline 214
9．6．1 outline屬性語法 214
9．6．2 outline的瀏覽器適配 215
9．7 nav-index 216
9．7．1 nav-index屬性語法 216
9．7．2 nav-index的瀏覽器適配 216
9．8 應(yīng)用實(shí)例――制作產(chǎn)品宣傳網(wǎng)站頁面 216
9．8．1 設(shè)計(jì)分析 217
9．8．2 制作步驟 217
9．8．3 案例總結(jié) 225
9．9 舉一反三――制作運(yùn)輸公司網(wǎng)站頁面 225
9．9．1 案例分析 225
9．9．2 視頻操作 226
第十章 使用CSS控制變形動(dòng)畫效果
10．1 CSS變形屬性簡(jiǎn)介 228
10．1．1 變形屬性與函數(shù) 228
10．1．2 變形屬性的瀏覽器適配 228
10．2 網(wǎng)頁元素的2D變形效果 230
10．2．1 旋轉(zhuǎn)變形 230
技能案例：實(shí)現(xiàn)元素的旋轉(zhuǎn)效果 230
10．2．2 縮放和翻轉(zhuǎn)變形 231
技能案例：實(shí)現(xiàn)元素的縮放效果 231
10．2．3 移動(dòng)變形 232
技能案例：實(shí)現(xiàn)元素的縮放效果 232
10．2．4 傾斜變形 233
技能案例：實(shí)現(xiàn)網(wǎng)頁元素的傾斜效果 234
10．2．5 矩陣變形 235
10．2．6 定義變形的中心點(diǎn) 235
10．2．7 同時(shí)使用多個(gè)變形函數(shù) 236
10．3 網(wǎng)頁元素3D變形效果 236
10．3．1 3D位移變形 236
技能案例：實(shí)現(xiàn)網(wǎng)頁元素的3D位移效果 237
10．3．2 3D旋轉(zhuǎn)變形 238
技能案例：實(shí)現(xiàn)網(wǎng)頁元素的3D旋轉(zhuǎn)效果 238
10．3．3 3D縮放變形 240
技能案例：實(shí)現(xiàn)網(wǎng)頁元素的3D縮放效果 240
10．3．4 3D矩陣變形 241
10．4 CSS過渡效果 242
10．4．1 過渡屬性簡(jiǎn)介 242
10．4．2 如何創(chuàng)建過度動(dòng)畫 242
10．4．3 實(shí)現(xiàn)過渡效果 243
10．4．4 設(shè)置過渡時(shí)間 243
10．5 應(yīng)用實(shí)例――網(wǎng)頁元素變形過渡效果 244
10．5．1 設(shè)計(jì)分析 244
10．5．2 制作步驟 244
10．5．3 案例總結(jié) 247
10．6 舉一反三――制作關(guān)鍵幀動(dòng)畫效果 247
10．6．1 案例分析 247
10．6．2 視頻操作 248

第十一章 CSS與JavaScript的綜合應(yīng)用
11．1 什么是JavaScript 250
11．1．1 了解JavaScript 250
技能案例：在頁面中嵌入JavaScript代碼 251
11．1．2 JavaScript的特點(diǎn) 252
11．1．3 JavaScript的應(yīng)用范圍 253
11．1．4 CSS樣式與JavaScript 255
11．2 JavaScript的語法基礎(chǔ) 255
11．2．1 JavaScript的基本架構(gòu) 255
技能案例：使用JavaScript實(shí)現(xiàn)彈出提示框 256
11．2．2 JavaScript的基本語法 256
11．2．3 數(shù)據(jù)類型和變量 259
11．2．4 表達(dá)式和運(yùn)算符 260
11．2．5 基本語句 260
技能案例：使用if語句 261
技能案例：使用for語句 261
11．3 JQuery 262
11．3．1 JQuery Mobile 262
11．3．2 JQuery UI 263
技能案例：創(chuàng)建jQuery UI組件 264
11．4 其他JavaScript框架 264
11．4．1 Raect 264
11．4．2 Vue 265
11．4．3 Angular 265
11．5 應(yīng)用實(shí)例――在網(wǎng)頁中應(yīng)用交互效果 266
11．5．1 設(shè)計(jì)分析 267
11．5．2 制作步驟 267
11．5．3 案例總結(jié) 276
11．6 舉一反三――制作婚紗攝影網(wǎng)站 276
11．6．1 案例分析 277
11．6．2 視頻操作 278
第十二章 CSS與XML的綜合應(yīng)用
12．1 XML基礎(chǔ) 280
12．1．1 XML的特點(diǎn) 280
技能案例：創(chuàng)建XML頁面 280
12．1．2 XML與HTML 281
技能案例：調(diào)用XML文件 282
12．1．3 XML基本語法 283
12．1．4 格式正確的XML文檔 286
12．2 XML與CSS的鏈接 287
12．2．1 使用xml：stylesheet處理指令 287
技能案例：使用CSS來格式化XML文檔 287
12．2．2 使用@import指令 289
12．3 XML與CSS的應(yīng)用 289
12．3．1 顯示學(xué)生信息XML文檔 289
技能案例：創(chuàng)建顯示學(xué)生信息得XML文件 289
12．3．2 XML文檔實(shí)現(xiàn)隔行變色的表格 291
技能案例：實(shí)現(xiàn)XML文件隔行變色信息表 291
12．4 應(yīng)用實(shí)例――在頁面中調(diào)用XML數(shù)據(jù) 294
12．4．1 設(shè)計(jì)分析 295
12．4．2 制作步驟 295
12．4．3 案例總結(jié) 300
12．5 舉一反三――制作企業(yè)網(wǎng)站 300
12．5．1 案例分析 300
12．5．2 視頻操作 301
第十三章 CSS與Ajax的綜合應(yīng)用
13．1 了解Ajax 303
13．1．1 Ajax簡(jiǎn)介 303
13．1．2 Ajax的關(guān)鍵元素 304
13．1．3 Ajax的優(yōu)勢(shì) 305
13．1．4 實(shí)現(xiàn)Ajax的步驟 305
13．1．5 使用CSS的必要性 306
13．2 Ajax基礎(chǔ) 307
13．2．1 創(chuàng)建XMLHttpRequest對(duì)象 307
技能案例：創(chuàng)建Ajax對(duì)象 307
13．2．2 發(fā)出Ajax請(qǐng)求 308
技能案例：添加表單并獲取數(shù)據(jù) 308
13．2．3 處理服務(wù)器響應(yīng) 309
技能案例：添加處理服務(wù)器響應(yīng)的代碼 309
13．2．4 使用CSS樣式 309
技能案例：為案例添加CSS樣式 309
13．3 HTML 簡(jiǎn)介 310
13．3．1 HTML 標(biāo)簽 310
13．3．2 HTML 事件屬性 311
13．3．3 HTML 標(biāo)準(zhǔn)屬性 313
13．4 應(yīng)用實(shí)例――使用Ajax實(shí)現(xiàn)頁面特效 313
13．4．1 設(shè)計(jì)分析 314
13．4．2 制作步驟 314
13．4．3 案例總結(jié) 322
13．5 舉一反三――通過Ajax實(shí)現(xiàn)可拖動(dòng)Div塊 322
13．5．1 案例分析 322
13．5．2 視頻操作 323
第十四章 綜合商業(yè)案例
14．1綜合實(shí)例――制作游戲類網(wǎng)站 325
14．1．1 設(shè)計(jì)分析 325
14．1．2 制作步驟 325
制作網(wǎng)頁頂部導(dǎo)航欄 325
制作網(wǎng)頁的上半部分主體內(nèi)容 327
制作網(wǎng)頁的下半部分主體內(nèi)容 330
制作網(wǎng)頁底部信息 336
14．1．3 案例總結(jié) 337
14．2 綜合實(shí)例――制作醫(yī)療保健類網(wǎng)站 337
14．2．1 設(shè)計(jì)分析 337
14．2．2 制作步驟 337
制作網(wǎng)頁頂部導(dǎo)航信息 337
制作網(wǎng)頁左半部分主體 342
制作網(wǎng)頁中間部分主體 342
制作網(wǎng)頁右半部分主體 345
制作網(wǎng)頁版底信息欄目 347
14．2．3 案例總結(jié) 348