HTML5+CSS3+JavaScript從入門(mén)到精通

第1篇 HTML5基礎(chǔ)
第1章 HTML5入門(mén) 2
視頻講解：60分鐘
1.1 HTML5概述 2
1.1.1 什么是HTML 2
1.1.2 HTML的發(fā)展歷史 3
1.1.3 HTML5的新特性 3
1.1.4 HTML5的目標(biāo) 5
1.2 HTML5的基本結(jié)構(gòu)和語(yǔ)法 6
1.2.1 HTML5的基本結(jié)構(gòu) 6
1.2.2 HTML5的語(yǔ)法 7
1.3 各瀏覽器對(duì)HTML5的支持 9
1.4 WebStorm簡(jiǎn)介 9
1.4.1 WebStorm的下載 10
1.4.2 WebStorm的安裝 10
1.5 編寫(xiě)第一個(gè)HTML文件 12
1.5.1 HTML文件的編寫(xiě)方法 12
1.5.2 手工編寫(xiě)頁(yè)面 12
1.5.3 使用WebStorm編寫(xiě)頁(yè)面 13
1.6 實(shí)踐與練習(xí) 15
第2章 HTML5文檔結(jié)構(gòu) 17
視頻講解：37分鐘
2.1 文檔基本結(jié)構(gòu) 17
2.1.1 類型聲明 17
2.1.2 文件開(kāi)始標(biāo)簽 18
2.1.3 文件頭部 18
2.1.4 文件主體 19
2.1.5 注釋 21
2.2 主體結(jié)構(gòu)元素 22
2.2.1 article元素 22
2.2.2 section元素 24
2.2.3 nav元素 25
2.2.4 aside元素 27
2.2.5 time元素 27
2.2.6 pubdate屬性 28
2.3 非主體結(jié)構(gòu)元素 28
2.3.1 header元素 28
2.3.2 hgroup元素 29
2.3.3 footer元素 29
2.3.4 address元素 30
2.4 全局屬性 31
2.4.1 id、class、style屬性 31
2.4.2 title屬性 31
2.4.3 dir屬性 31
2.4.4 contentEditable屬性 32
2.4.5 designMode屬性 33
2.4.6 hidden屬性 34
2.4.7 spellcheck屬性 35
2.5 實(shí)踐與練習(xí) 36
第3章 HTML5文本 37
視頻講解：68分鐘
3.1 標(biāo)題文本 37
3.2 普通文本 39
3.2.1 文字的斜體、下畫(huà)線、刪除線 39
3.2.2 文字的上標(biāo)與下標(biāo) 40
3.2.3 設(shè)置等寬文字 41
3.3 段落文本 42
3.3.1 段落標(biāo)簽 42
3.3.2 段落的換行標(biāo)簽 43
3.3.3 保留原始排版方式 44
3.3.4 段落縮進(jìn) 45
3.4 功能性文本 45
3.4.1 標(biāo)記文本 46
3.4.2 展開(kāi)/收縮信息 47
3.4.3 進(jìn)度信息 49
3.4.4 刻度信息 50
3.4.5 地址信息 51
3.4.6 文字標(biāo)注 52
3.4.7 作品標(biāo)題信息 53
3.5 實(shí)踐與練習(xí) 54
第4章 HTML5表格、列表和超鏈接 55
視頻講解：85分鐘
4.1 表格應(yīng)用 55
4.1.1 表格的基本構(gòu)成 55
4.1.2 設(shè)置表格的標(biāo)題 57
4.1.3 設(shè)置表頭 58
4.1.4 合并單元格 59
4.2 列表應(yīng)用 61
4.2.1 列表的標(biāo)簽 61
4.2.2 無(wú)序列表 61
4.2.3 有序列表 63
4.2.4 定義列表 65
4.2.5 嵌套列表 66
4.3 超鏈接 70
4.3.1 絕對(duì)路徑和相對(duì)路徑 70
4.3.2 文本鏈接 70
4.3.3 設(shè)置超鏈接的目標(biāo)窗口 71
4.4 實(shí)踐與練習(xí) 73
第5章 HTML5表單 74
視頻講解：111分鐘
5.1 定義表單 74
5.1.1 處理動(dòng)作 75
5.1.2 表單名稱 75
5.1.3 傳送方法 76
5.1.4 編碼方式 76
5.1.5 目標(biāo)顯示方式 77
5.2 常用表單控件 77
5.2.1 文本框 78
5.2.2 密碼框 79
5.2.3 單選按鈕 81
5.2.4 復(fù)選框 82
5.2.5 普通按鈕 83
5.2.6 提交按鈕 84
5.2.7 重置按鈕 85
5.2.8 圖像域 87
5.2.9 隱藏域 88
5.2.10 文件域 89
5.2.11 標(biāo)簽 90
5.2.12 使用button定義按鈕 91
5.2.13 菜單和列表 92
5.2.14 文本域 93
5.3 input元素的新類型和屬性 94
5.3.1 input元素的新類型 95
5.3.2 input元素的新屬性 101
5.3.3 output元素 103
5.4 表單驗(yàn)證 104
5.4.1 自動(dòng)驗(yàn)證 104
5.4.2 checkValidity顯式驗(yàn)證法 105
5.4.3 避免驗(yàn)證 106
5.4.4 自定義錯(cuò)誤信息 108
5.5 實(shí)踐與練習(xí) 109
第6章 HTML5圖像與多媒體 110
視頻講解：150分鐘
6.1 使用圖像 110
6.1.1 圖像的基本格式 111
6.1.2 添加圖像 111
6.1.3 設(shè)置圖像屬性 112
6.1.4 圖像的超鏈接 114
6.1.5 圖像熱區(qū)鏈接 115
6.2 多媒體簡(jiǎn)述 117
6.3 HTML5中的多媒體 117
6.3.1 video元素與audio元素 117
6.3.2 多媒體元素的屬性 118
6.4 控制多媒體播放 122
6.4.1 媒體播放時(shí)的方法 122
6.4.2 canPlayType(type)方法 124
6.5 事件監(jiān)聽(tīng) 124
6.5.1 事件處理方式 124
6.5.2 事件介紹 125
6.5.3 事件應(yīng)用 125
6.6 實(shí)踐與練習(xí) 127
第7章 HTML5繪圖 128
視頻講解：119分鐘
7.1 Canvas概述 128
7.2 繪制基本圖形 129
7.2.1 繪制直線 129
7.2.2 繪制曲線 131
7.2.3 繪制矩形 133
7.2.4 繪制圓形 135
7.3 繪制變形圖形 136
7.3.1 繪制平移效果的圖形 136
7.3.2 繪制縮放效果的圖形 137
7.3.3 繪制旋轉(zhuǎn)效果的圖形 138
7.4 繪制文字 139
7.4.1 文字的輪廓 139
7.4.2 文字的填充 140
7.4.3 文字相關(guān)屬性 141
7.5 SVG基礎(chǔ) 142
7.5.1 使用SVG的原因 142
7.5.2 使用SVG的方法 143
7.6 SVG繪制基本形狀 143
7.6.1 繪制矩形 143
7.6.2 繪制圓形 145
7.6.3 繪制橢圓 145
7.6.4 繪制直線 146
7.6.5 繪制折線 147
7.6.6 繪制文本 148
7.6.7 繪制路徑 149
7.7 SVG中的漸變 151
7.7.1 線性漸變 151
7.7.2 徑向漸變 152
7.8 實(shí)踐與練習(xí) 153
第2篇 CSS3基礎(chǔ)
第8章 CSS3概述 156
視頻講解：21分鐘
8.1 CSS的概念及發(fā)展 156
8.2 CSS規(guī)則 157
8.3 在頁(yè)面中使用CSS 158
8.3.1 行內(nèi)樣式 158
8.3.2 內(nèi)嵌式樣式表 158
8.3.3 鏈接式樣式表 159
8.3.4 樣式表調(diào)用的優(yōu)先順序 160
8.4 CSS的繼承 160
8.4.1 HTML的繼承關(guān)系 160
8.4.2 CSS繼承的應(yīng)用 162
8.5 實(shí)踐與練習(xí) 162
第9章 CSS3選擇器 163
視頻講解：52分鐘
9.1 選擇器概述 163
9.2 基本選擇器 164
9.2.1 元素選擇器 164
9.2.2 類選擇器 166
9.2.3 ID選擇器 167
9.2.4 屬性選擇器 170
9.3 復(fù)合選擇器 173
9.3.1 后代選擇器 173
9.3.2 子元素選擇器 174
9.3.3 相鄰兄弟元素選擇器 175
9.3.4 通用兄弟元素選擇器 175
9.4 偽類選擇器和偽元素選擇器 177
9.4.1 偽類選擇器 177
9.4.2 偽元素選擇器 177
9.5 實(shí)踐與練習(xí) 180
第10章 字體和文本相關(guān)屬性 181
視頻講解：28分鐘
10.1 字體屬性 181
10.1.1 設(shè)置字體類型 181
10.1.2 設(shè)置字體大小 182
10.1.3 設(shè)置文字顏色 183
10.1.4 設(shè)置文字粗細(xì) 183
10.2 文本屬性 184
10.2.1 設(shè)置水平對(duì)齊 184
10.2.2 設(shè)置文本間距 185
10.2.3 設(shè)置行高 185
10.2.4 設(shè)置首行縮進(jìn) 186
10.2.5 設(shè)置文本換行 187
10.3 實(shí)踐與練習(xí) 188
第11章 背景和列表相關(guān)屬性 189
視頻講解：27分鐘
11.1 背景屬性 189
11.1.1 設(shè)置背景顏色 189
11.1.2 設(shè)置背景圖像 190
11.1.3 設(shè)置背景圖像平鋪方式 190
11.1.4 設(shè)置背景圖像是否固定 191
11.1.5 設(shè)置背景圖像位置 192
11.1.6 設(shè)置背景圖像大小 192
11.1.7 設(shè)置背景圖像的起點(diǎn) 193
11.2 列表屬性 194
11.2.1 設(shè)置列表項(xiàng)標(biāo)記的類型 195
11.2.2 使用圖像替換列表項(xiàng)標(biāo)記 195
11.3 實(shí)踐與練習(xí) 196
第12章 CSS3盒模型 198
視頻講解：30分鐘
12.1 框模型概述 198
12.2 設(shè)置元素大小 199
12.3 設(shè)置外邊距 199
12.3.1 設(shè)置一個(gè)值 200
12.3.2 設(shè)置兩個(gè)值 200
12.3.3 設(shè)置三個(gè)值 201
12.3.4 設(shè)置四個(gè)值 201
12.4 設(shè)置邊框 203
12.4.1 設(shè)置邊框顏色 203
12.4.2 設(shè)置邊框樣式 203
12.4.3 設(shè)置邊框?qū)挾?204
12.5 設(shè)置內(nèi)邊距 205
12.6 實(shí)踐與練習(xí) 207
第13章 網(wǎng)頁(yè)布局 209
視頻講解：17分鐘
13.1 浮動(dòng)布局 209
13.1.1 定義浮動(dòng) 209
13.1.2 清除浮動(dòng) 211
13.2 定位屬性 212
13.2.1 設(shè)置定位方式 212
13.2.2 設(shè)置元素位置 212
13.2.3 設(shè)置堆疊順序 215
13.3 實(shí)踐與練習(xí) 216
第14章 CSS3變形與動(dòng)畫(huà) 217
視頻講解：23分鐘
14.1 變換效果 217
14.1.1 定義2D平移 218
14.1.2 定義2D縮放 219
14.1.3 定義2D旋轉(zhuǎn) 219
14.1.4 定義2D傾斜 220
14.2 過(guò)渡效果 221
14.2.1 指定過(guò)渡屬性 222
14.2.2 指定過(guò)渡時(shí)間 222
14.2.3 指定過(guò)渡的延遲時(shí)間 223
14.2.4 指定過(guò)渡的動(dòng)畫(huà)類型 223
14.3 動(dòng)畫(huà)效果 225
14.3.1 關(guān)鍵幀 225
14.3.2 動(dòng)畫(huà)屬性 226
14.4 實(shí)踐與練習(xí) 228
第15章 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 229
視頻講解：44分鐘
15.1 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)概述 229
15.1.1 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念 229
15.1.2 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)缺點(diǎn)和技術(shù)原理 230
15.2 常用術(shù)語(yǔ) 231
15.2.1 像素 231
15.2.2 屏幕分辨率 231
15.2.3 設(shè)備像素 232
15.2.4 CSS像素 232
15.3 視口 233
15.3.1 視口的概念 233
15.3.2 viewport屬性 234
15.3.3 媒體查詢 234
15.4 布局設(shè)計(jì) 235
15.4.1 布局的類型 236
15.4.2 布局的實(shí)現(xiàn)方式 236
15.4.3 布局的設(shè)計(jì)與實(shí)現(xiàn) 237
15.5 實(shí)踐與練習(xí) 238
第3篇 JavaScript基礎(chǔ)
第16章 JavaScript語(yǔ)言基礎(chǔ) 240
視頻講解：163分鐘
16.1 JavaScript簡(jiǎn)述 240
16.1.1 JavaScript的發(fā)展史 241
16.1.2 JavaScript的特點(diǎn) 241
16.1.3 JavaScript的使用方法 242
16.1.4 基本語(yǔ)法 244
16.2 基本數(shù)據(jù)類型 246
16.2.1 數(shù)值型 246
16.2.2 字符串型 248
16.2.3 布爾型 250
16.2.4 特殊數(shù)據(jù)類型 250
16.3 變量 250
16.3.1 變量的命名 250
16.3.2 變量的聲明和賦值 251
16.3.3 變量的類型 252
16.4 運(yùn)算符 253
16.4.1 算術(shù)運(yùn)算符 253
16.4.2 字符串運(yùn)算符 254
16.4.3 比較運(yùn)算符 255
16.4.4 賦值運(yùn)算符 256
16.4.5 邏輯運(yùn)算符 257
16.4.6 條件運(yùn)算符 257
16.4.7 運(yùn)算符優(yōu)先級(jí) 258
16.5 數(shù)據(jù)類型的轉(zhuǎn)換規(guī)則 259
16.6 實(shí)踐與練習(xí) 261
第17章 流程控制 262
視頻講解：108分鐘
17.1 條件判斷語(yǔ)句 262
17.1.1 if語(yǔ)句 262
17.1.2 switch語(yǔ)句 267
17.2 循環(huán)語(yǔ)句 269
17.2.1 while循環(huán)語(yǔ)句 269
17.2.2 do…while循環(huán)語(yǔ)句 270
17.2.3 for循環(huán)語(yǔ)句 272
17.2.4 for…in循環(huán)語(yǔ)句 273
17.2.5 循環(huán)嵌套 274
17.3 跳轉(zhuǎn)語(yǔ)句 275
17.3.1 continue語(yǔ)句 275
17.3.2 break語(yǔ)句 276
17.4 實(shí)踐與練習(xí) 277
第18章 函數(shù) 278
視頻講解：66分鐘
18.1 定義函數(shù) 278
18.2 調(diào)用函數(shù) 279
18.2.1 函數(shù)的簡(jiǎn)單調(diào)用 279
18.2.2 在事件響應(yīng)中調(diào)用函數(shù) 280
18.2.3 通過(guò)鏈接調(diào)用函數(shù) 281
18.3 函數(shù)的參數(shù)和返回值 281
18.3.1 函數(shù)的參數(shù) 281
18.3.2 函數(shù)的返回值 282
18.4 函數(shù)的嵌套調(diào)用 284
18.5 全局變量和局部變量 285
18.6 匿名函數(shù) 285
18.7 內(nèi)置函數(shù) 287
18.7.1 數(shù)值處理函數(shù) 287
18.7.2 字符串處理函數(shù) 289
18.8 實(shí)踐與練習(xí) 290
第19章 JavaScript對(duì)象 291
視頻講解：225分鐘
19.1 對(duì)象簡(jiǎn)介 291
19.1.1 對(duì)象的概念 292
19.1.2 對(duì)象的屬性和方法 292
19.1.3 JavaScript對(duì)象的種類 293
19.2 創(chuàng)建自定義對(duì)象 293
19.2.1 直接創(chuàng)建自定義對(duì)象 293
19.2.2 通過(guò)構(gòu)造函數(shù)創(chuàng)建對(duì)象 294
19.2.3 通過(guò)Object創(chuàng)建對(duì)象 296
19.3 Array對(duì)象 297
19.3.1 數(shù)組簡(jiǎn)介 297
19.3.2 定義數(shù)組 298
19.3.3 訪問(wèn)數(shù)組元素 299
19.3.4 獲取數(shù)組的長(zhǎng)度 301
19.3.5 操作數(shù)組 303
19.4 String對(duì)象 308
19.4.1 創(chuàng)建String對(duì)象 308
19.4.2 獲取字符串的長(zhǎng)度 309
19.4.3 操作字符串 309
19.5 Math對(duì)象 315
19.5.1 Math對(duì)象的屬性 315
19.5.2 Math對(duì)象的方法 316
19.6 Date對(duì)象 317
19.6.1 創(chuàng)建Date對(duì)象 317
19.6.2 Date對(duì)象的方法 319
19.7 實(shí)踐與練習(xí) 321
第20章 事件處理機(jī)制 323
視頻講解：41分鐘
20.1 事件概述 323
20.1.1 事件簡(jiǎn)介 324
20.1.2 事件的調(diào)用 324
20.1.3 事件對(duì)象Event 325
20.2 表單事件 326
20.2.1 onblur事件與onfocus事件 326
20.2.2 onchange事件 326
20.2.3 onsubmit事件與onreset事件 327
20.3 鼠標(biāo)事件和鍵盤(pán)事件 328
20.3.1 鼠標(biāo)事件 329
20.3.2 鍵盤(pán)事件 331
20.4 頁(yè)面事件 333
20.4.1 onload事件 333
20.4.2 onresize事件 334
20.5 實(shí)踐與練習(xí) 334
第21章 BOM編程 336
視頻講解：80分鐘
21.1 Window對(duì)象概述 336
21.1.1 Window對(duì)象的屬性 337
21.1.2 Window對(duì)象的方法 337
21.1.3 Window對(duì)象的使用 338
21.2 對(duì)話框 338
21.2.1 警告對(duì)話框 338
21.2.2 確認(rèn)對(duì)話框 339
21.2.3 提示對(duì)話框 340
21.3 打開(kāi)窗口與關(guān)閉窗口 341
21.3.1 打開(kāi)窗口 341
21.3.2 關(guān)閉窗口 342
21.4 控制窗口 344
21.4.1 移動(dòng)窗口 344
21.4.2 窗口滾動(dòng) 346
21.4.3 訪問(wèn)窗口歷史 347
21.4.4 設(shè)置超時(shí) 347
21.5 Document對(duì)象概述 348
21.6 Document對(duì)象的應(yīng)用 349
21.6.1 設(shè)置文檔前景色和背景色 350
21.6.2 設(shè)置動(dòng)態(tài)標(biāo)題欄 350
21.6.3 獲取URL 351
21.6.4 在文檔中輸出數(shù)據(jù) 351
21.6.5 動(dòng)態(tài)添加一個(gè)HTML標(biāo)記 352
21.6.6 獲取文本框并修改其內(nèi)容 353
21.7 實(shí)踐與練習(xí) 354
第22章 DOM編程 355
視頻講解：60分鐘
22.1 DOM概述 355
22.2 獲取HTML元素 357
22.2.1 使用id屬性獲取元素 357
22.2.2 使用標(biāo)簽名獲取元素 358
22.2.3 使用類名獲取元素 358
22.3 DOM節(jié)點(diǎn)屬性 358
22.4 操作節(jié)點(diǎn) 359
22.4.1 創(chuàng)建節(jié)點(diǎn) 359
22.4.2 插入節(jié)點(diǎn) 360
22.4.3 刪除節(jié)點(diǎn) 361
22.4.4 替換節(jié)點(diǎn) 362
22.5 獲取或設(shè)置元素的HTML內(nèi)容 362
22.6 JavaScript操作元素樣式 364
22.6.1 Style對(duì)象簡(jiǎn)介 364
22.6.2 樣式標(biāo)簽屬性和樣式屬性 364
22.6.3 顏色和背景屬性 367
22.6.4 邊框?qū)傩?369
22.6.5 定位屬性 372
22.6.6 字體屬性 373
22.6.7 表格布局屬性 377
22.7 實(shí)踐與練習(xí) 378
第4篇 高級(jí)開(kāi)發(fā)
第23章 文件與拖放 380
視頻講解：36分鐘
23.1 file對(duì)象 380
23.1.1 選擇文件 380
23.1.2 獲取文件的類型與大小 381
23.2 讀取文件 383
23.2.1 FileReader接口 383
23.2.2 預(yù)覽圖片 384
23.2.3 讀取文本文件 385
23.3 拖放文件 386
23.3.1 拖放頁(yè)面元素 386
23.3.2 DataTransfer對(duì)象的屬性與方法 388
23.3.3 設(shè)置拖放效果 389
23.4 實(shí)踐與練習(xí) 390
第24章 本地存儲(chǔ) 391
視頻講解：18分鐘
24.1 Web Storage 391
24.1.1 Web Storage概述 391
24.1.2 數(shù)據(jù)的存儲(chǔ)與獲取 392
24.1.3 數(shù)據(jù)的刪除與清空 393
24.2 本地?cái)?shù)據(jù)庫(kù) 395
24.2.1 Web SQL數(shù)據(jù)庫(kù)概述 395
24.2.2 打開(kāi)和創(chuàng)建數(shù)據(jù)庫(kù) 395
24.2.3 創(chuàng)建數(shù)據(jù)表 395
24.2.4 插入和查詢數(shù)據(jù) 396
24.3 實(shí)踐與練習(xí) 399
第25章 離線應(yīng)用 400
視頻講解：21分鐘
25.1 離線Web應(yīng)用 400
25.1.1 離線Web應(yīng)用簡(jiǎn)介 400
25.1.2 本地緩存與瀏覽器網(wǎng)頁(yè)緩存的區(qū)別 401
25.2 創(chuàng)建離線應(yīng)用 401
25.2.1 緩存清單 402
25.2.2 applicationCache對(duì)象 404
25.2.3 離線應(yīng)用的事件 404
25.3 實(shí)踐與練習(xí) 406
第26章 線程的使用 407
視頻講解：24分鐘
26.1 Web Workers概述 407
26.1.1 創(chuàng)建線程 407
26.1.2 處理線程的應(yīng)用 409
26.1.3 與線程進(jìn)行數(shù)據(jù)的交互 411
26.2 線程中可用的對(duì)象和方法 413
26.3 加載多個(gè)JavaScript文件 413
26.4 線程嵌套 414
26.4.1 線程的單層嵌套 414
26.4.2 子線程之間的數(shù)據(jù)交互 415
26.5 實(shí)踐與練習(xí) 418
第27章 通信API 419
視頻講解：9分鐘
27.1 跨文檔消息通信 419
27.1.1 使用postMessageAPI 419
27.1.2 跨文檔消息傳輸 420
27.1.3 跨域通信 421
27.2 實(shí)踐與練習(xí) 423
第28章 Vue.js編程 424
視頻講解：39分鐘
28.1 Vue.js概述 425
28.2 Vue.js的安裝 425
28.2.1 使用CDN 425
28.2.2 使用NPM 426
28.2.3 使用Vue CLI 426
28.3 應(yīng)用程序?qū)嵗斑x項(xiàng) 426
28.3.1 數(shù)據(jù) 427
28.3.2 方法 427
28.3.3 生命周期鉤子函數(shù) 428
28.4 數(shù)據(jù)綁定 429
28.4.1 文本插值 429
28.4.2 插入HTML 430
28.4.3 使用表達(dá)式 430
28.5 指令 431
28.5.1 v-bind指令 431
28.5.2 v-on指令 432
28.5.3 v-if指令 433
28.5.4 v-else指令 434
28.5.5 v-else-if指令 435
28.5.6 v-for指令 436
28.5.7 v-model指令 437
28.6 實(shí)踐與練習(xí) 438
第29章 Bootstrap應(yīng)用 439
視頻講解：95分鐘
29.1 Bootstrap概述 439
29.1.1 Bootstrap的概念 439
29.1.2 Bootstrap的優(yōu)點(diǎn) 440
29.1.3 Bootstrap包含的內(nèi)容 440
29.2 Bootstrap的下載和使用 440
29.2.1 Bootstrap的下載 440
29.2.2 Bootstrap的文件結(jié)構(gòu) 442
29.2.3 Bootstrap的使用 443
29.3 通用樣式 444
29.3.1 文本樣式 444
29.3.2 顏色樣式 446
29.3.3 設(shè)置內(nèi)外邊距 449
29.3.4 邊框與浮動(dòng) 450
29.4 網(wǎng)格布局 453
29.4.1 網(wǎng)格系統(tǒng)概述 453
29.4.2 自動(dòng)布局列 455
29.4.3 項(xiàng)目的對(duì)齊處理 458
29.5 實(shí)踐與練習(xí) 460
第5篇 項(xiàng)目實(shí)戰(zhàn)
第30章 51購(gòu)商城 462
視頻講解：10分鐘
30.1 項(xiàng)目的設(shè)計(jì)思路 462
30.1.1 項(xiàng)目概述 462
30.1.2 界面預(yù)覽 463
30.1.3 系統(tǒng)功能結(jié)構(gòu) 465
30.1.4 系統(tǒng)業(yè)務(wù)流程 465
30.1.5 文件夾組織結(jié)構(gòu) 466
30.2 主頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 466
30.2.1 主頁(yè)的設(shè)計(jì) 466
30.2.2 頂部區(qū)和底部區(qū)功能的實(shí)現(xiàn) 468
30.2.3 商品分類導(dǎo)航功能的實(shí)現(xiàn) 469
30.2.4 輪播圖功能的實(shí)現(xiàn) 471
30.2.5 商品推薦功能的實(shí)現(xiàn) 473
30.2.6 適配移動(dòng)端的實(shí)現(xiàn) 474
30.3 商品列表頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn) 475
30.3.1 商品列表頁(yè)面的設(shè)計(jì) 475
30.3.2 分類選項(xiàng)功能的實(shí)現(xiàn) 476
30.3.3 商品列表區(qū)的實(shí)現(xiàn) 476
30.4 商品詳情頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn) 478
30.4.1 商品詳情頁(yè)面的設(shè)計(jì) 478
30.4.2 圖片放大鏡效果的實(shí)現(xiàn) 479
30.4.3 商品概要功能的實(shí)現(xiàn) 481
30.4.4 商品評(píng)價(jià)功能的實(shí)現(xiàn) 482
30.4.5 猜你喜歡功能的實(shí)現(xiàn) 484
30.5 購(gòu)物車頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn) 485
30.5.1 購(gòu)物車頁(yè)面的設(shè)計(jì) 485
30.5.2 購(gòu)物車頁(yè)面的實(shí)現(xiàn) 486
30.6 付款頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn) 487
30.6.1 付款頁(yè)面的設(shè)計(jì) 487
30.6.2 付款頁(yè)面的實(shí)現(xiàn) 487
30.7 登錄頁(yè)面和注冊(cè)頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn) 489
30.7.1 登錄頁(yè)面和注冊(cè)頁(yè)面的設(shè)計(jì) 489
30.7.2 登錄頁(yè)面的實(shí)現(xiàn) 490
30.7.3 注冊(cè)頁(yè)面的實(shí)現(xiàn) 491
30.8 小結(jié) 493