HTML5+CSS3+JavaScript從入門到精通（微視頻精編版）
內容描述
《HTML5+CSS3+JavaScript從入門到精通（微視頻精編版）》內容淺顯易懂，實例豐富，詳細介紹了HTML5+CSS3+JavaScript開發需要掌握的各類實戰知識。全書分為兩冊：核心技術分冊和強化訓練分冊。核心技術分冊共17章，包括HTML基礎、文本、圖像和超鏈接、CSS3概述、CSS3高級應用、表格與
目錄大綱
核心技術分冊目錄
第1篇 基礎篇
第1章 HTML基礎 2
視頻講解：58分鐘
1.1 HTML概述 3
1.1.1 什麽是HTML 3
1.1.2 HTML的發展歷程 3
1.2 HTML文件的基本結構 3
1.2.1 HTML的基本結構 4
1.2.2 HTML的基本標簽 5
1.3 編寫第一個HTML文件 9
1.3.1 HTML文件的編寫方法 9
1.3.2 手工編寫頁面 9
1.3.3 使用可視化軟件WebStorm製作頁面 10
1.4 小結 16
1.5 實戰 17
1.5.1 實戰一：設置背景顏色 17
1.5.2 實戰二：設置鏈接顏色 17
第2章 文本 18
視頻講解：1小時14分鐘
2.1 標題 19
2.1.1 標題標簽 19
2.1.2 標題的對齊方式 21
2.2 文字 23
2.2.1 文字的斜體、下畫線、刪除線 23
2.2.2 文字的上標與下標 24
2.2.3 特殊文字符號 25
2.3 段落 27
2.3.1 段落標簽 27
2.3.2 段落的換行標簽 28
2.3.3 段落的原格式標簽 29
2.4 水平線 31
2.4.1 水平線標簽 31
2.4.2 水平線標簽的寬度 32
2.5 小結 33
2.6 實戰 34
2.6.1 實戰一：實現一則天氣預報 34
2.6.2 實戰二：實現一則唐詩 34
2.6.3 實戰三：實現商品打折清單 34
2.6.4 實戰四：實現一個人物字符畫 34
第3章 圖像和超鏈接 35
視頻講解：39分鐘
3.1 添加圖像 36
3.1.1 圖像的基本格式 36
3.1.2 添加圖像 36
3.2 設置圖像屬性 38
3.2.1 圖像大小與邊框 38
3.2.2 圖像間距與對齊方式 39
3.2.3 替換文本與提示文字 41
3.3 鏈接標簽 42
3.3.1 文本鏈接 42
3.3.2 書簽鏈接 44
3.4 圖像的超鏈接 45
3.4.1 圖像的基本鏈接 45
3.4.2 圖像熱區鏈接 47
3.5 小結 49
3.6 實戰 50
3.6.1 實戰一：顯示圖書封面 50
3.6.2 實戰二：製作商品評價頁面 50
3.6.3 實戰三：製作抽獎頁面 50
第4章 CSS3概述 51
視頻講解：1小時6分鐘
4.1 CSS3概述 52
4.1.1 CSS的發展史 52
4.1.2 一個簡單的CSS示例 52
4.2 CSS3中的選擇器 55
4.2.1 屬性選擇器 56
4.2.2 類和ID選擇器 58
4.2.3 偽類和偽元素選擇器 60
4.2.4 其他選擇器 63
4.3 常用屬性 65
4.3.1 文本相關屬性 66
4.3.2 背景相關屬性 69
4.3.3 列表相關屬性 71
4.4 小結 73
4.5 實戰 73
4.5.1 實戰一：製作登錄註冊頁面 73
4.5.2 實戰二：製作網頁版生日賀卡 74
4.5.3 實戰三：實現個人主頁 74
第5章 CSS3高級應用 75
視頻講解：1小時3分鐘
5.1 框模型 76
5.1.1 外邊距margin 76
5.1.2 內邊距padding 79
5.1.3 邊框border 81
5.2 佈局常用屬性 85
5.2.1 浮動 85
5.2.2 定位相關屬性 87
5.3 動畫與特效 88
5.3.1 變換（transform） 88
5.3.2 過渡（transition） 90
5.3.3 動畫（animation） 92
5.4 小結 96
5.5 實戰 96
5.5.1 實戰一：設置手機篩選頁面 96
5.5.2 實戰二：製作橫向導航 97
5.5.3 實戰三：製作圖片輪播 97
第6章 表格與
標簽 98
視頻講解：1小時12分鐘
6.1 簡單表格 99
6.1.1 簡單表格的製作 99
6.1.2 表頭的設置 101
6.2 表格的高級應用 103
6.2.1 表格的樣式 103
6.2.2 表格的合並 105
6.2.3 表格的分組 107
6.3
視頻講解：1小時12分鐘
6.1 簡單表格 99
6.1.1 簡單表格的製作 99
6.1.2 表頭的設置 101
6.2 表格的高級應用 103
6.2.1 表格的樣式 103
6.2.2 表格的合並 105
6.2.3 表格的分組 107
6.3
標簽 109
6.3.1
6.3.1
標簽的介紹 109
6.3.2
6.3.2
標簽的應用 110
6.4 標簽 112
6.4.1 標簽的介紹 112
6.4.2 標簽的應用 113
6.5 小結 114
6.6 實戰 114
6.6.1 實戰一：製作每日工作計劃表 114
6.6.2 實戰二：實現網頁版工作總結 114
6.6.3 實戰三：製作一則公司公告 114
第7章 列表 115
視頻講解：11分鐘
7.1 列表的標簽 116
7.2 無序列表 116
7.2.1 無序列表標簽 116
7.2.2 無序列表屬性 117
7.3 有序列表 119
7.3.1 有序列表標簽 119
7.3.2 有序列表屬性 120
7.4 列表的嵌套 122
7.4.1 定義列表的嵌套 122
7.4.2 無序列表和有序列表的嵌套 124
7.5 小結 125
7.6 實戰 126
7.6.1 實戰一：製作網站購買提示內容 126
7.6.2 實戰二：製作QQ聯系人列表 126
7.6.3 實戰三：製作商品列表內容 126
第8章 表單 127
視頻講解：42分鐘
8.1 表單概述 128
8.1.1 概述 128
8.1.2 表單標簽 128
8.2 輸入標簽 131
8.2.1 文本框 131
8.2.2 單選框和多選框 133
8.2.3 按鈕 135
8.2.4 文件域和圖像域 137
8.3 文本域和列表 139
8.3.1 文本域 139
8.3.2 列表/菜單 140
8.4 小結 142
8.5 實戰 143
8.5.1 實戰一：製作QQ登錄頁面 143
8.5.2 實戰二：製作象棋游戲註冊頁面 143
8.5.3 實戰三：製作個人檔案 143
第9章 多媒體 144
視頻講解：1小時5分鐘
9.1 HTML5多媒體的簡述 145
9.1.1 HTML4中多媒體的應用 145
9.1.2 HTML5頁面中的多媒體 145
9.2 多媒體元素基本屬性 146
9.3 多媒體元素常用方法 150
9.3.1 多媒體播放時的方法 150
9.3.2 canPlayType(type)方法 153
9.4 多媒體元素重要事件 153
9.4.1 事件處理方式 153
9.4.2 事件介紹 154
9.4.3 事件實例 155
9.5 小結 157
9.6 實戰 157
9.6.1 實戰一：製作音樂小球 157
9.6.2 實戰二：加載一段視頻文件 157
9.6.3 實戰三：製作一段音頻文件 157
第10章 HTML5新特性 158
視頻講解：57分鐘
10.1 誰在開發HTML5 159
10.2 HTML5的新特性 159
10.3 HTML5和HTML4的區別 161
10.3.1 HTML5的語法變化 161
10.3.2 HTML5中的標記方法 161
10.3.3 HTML5語法中需要掌握的幾個要點 162
10.4 新增和廢除的元素 164
10.4.1 新增的結構元素 164
10.4.2 新增的塊級（block）的語義元素 167
10.4.3 新增的行內（inline）的語義元素 169
10.4.4 新增的嵌入多媒體元素與交互性元素 171
10.4.5 新增的input元素的類型 172
10.4.6 廢除的元素 172
10.5 新增的屬性和廢除的屬性 173
10.5.1 新增的屬性 173
10.5.2 廢除的屬性 175
10.6 小結 176
10.7 實戰 177
實戰一：製作一個圖像鏈接 177
第11章 JavaScript基礎 178
視頻講解：2小時13分鐘
11.1 JavaScript概述 179
11.1.1 JavaScript的發展史 179
11.1.2 JavaScript在HTML中的使用 180
11.2 JavaScript語言基礎 183
11.2.1 數據類型 183
11.2.2 運算符與表達式 186
11.2.3 流程控制 190
11.3 JavaScript對象編程 193
11.3.1 Window窗口對象 193
11.3.2 Document文檔對象 195
11.4 JavaScript事件處理 198
11.4.1 鼠標鍵盤事件 198
11.4.2 頁面事件 201
11.5 小結 203
11.6 實戰 203
11.6.1 實戰一：製作九九乘法表 203
11.6.2 實戰二：製作手機抽獎頁面 203
11.6.3 實戰三：製作購物車結算頁面 203
第2篇 提 高 篇
第12章 繪制圖形 206
視頻講解：1小時15分鐘
12.1 認識HTML5中的畫布Canvas 207
12.1.1 Canvas概述 207
12.1.2 使用Canvas繪制矩形 207
12.2 繪制基本圖形 209
12.2.1 繪制直線 209
12.2.2 繪制曲線 212
12.2.3 繪制圓形 214
12.3 繪制變形圖形 216
12.3.1 繪制平移效果的圖形 216
12.3.2 繪制縮放效果的圖形 217
12.3.3 繪制旋轉效果的圖形 219
12.4 繪制文字 220
12.4.1 繪制輪廓文字 220
12.4.2 繪制填充文字 221
12.4.3 文字相關屬性 222
12.5 小結 224
12.6 實戰 224
12.6.1 實戰一：Canvas繪制移動的正方形 224
12.6.2 實戰二：製作游戲彈幕效果 224
12.6.3 實戰三：實現計時器 224
第13章 文件與拖放 225
視頻講解：37分鐘
13.1 選擇文件 226
13.1.1 通過file對象選擇文件 226
13.1.2 使用Blob接口獲取文件的類型與大小 227
13.2 讀取文件 228
13.2.1 FileReader接口的方法以及事件 228
13.2.2 使用readAsDataURL方法預覽圖片 229
13.2.3 使用readAsText方法讀取文本文件 231
13.3 拖放文件 233
13.3.1 拖放頁面元素 233
13.3.2 DataTransfer對象的屬性與方法 234
13.3.3 使用effectAllowed和dropEffect屬性設置拖放效果 235
13.4 小結 236
13.5 實戰 237
13.5.1 實戰一：實現編輯照片牆中上傳圖片的功能 237
13.5.2 實戰二：查看網頁源碼 237
13.5.3 實戰三：預覽文件功能 237
第14章 JavaScript對象編程 238
視頻講解：1小時2分鐘
14.1 Window窗口對象 239
14.1.1 Window對象 239
14.1.2 對話框（Dialog） 241
14.1.3 窗口對象常用操作 244
14.2 Document文檔對象 247
14.2.1 文檔對象概述 247
14.2.2 文檔對象的常用屬性、方法與事件 248
14.2.3 Document對象的應用 250
14.3 JavaScript與表單操作 255
14.3.1 在JavaScript中訪問表單 255
14.3.2 在JavaScript中訪問表單域 256
14.3.3 表單的驗證 256
14.4 DOM對象 258
14.4.1 DOM概述 258
14.4.2 DOM對象節點屬性 260
14.4.3 節點的幾種操作 261
14.4.4 獲取文檔中的指定元素 262
14.4.5 與DHTML相對應的DOM 264
14.5 小結 265
14.6 實戰 266
實戰一：在頁面的指定位置顯示當前日期 266
第15章 響應式網頁設計 267
視頻講解：38分鐘
15.1 概述 268
15.1.1 響應式網頁設計的概念 268
15.1.2 響應式網頁設計的優缺點和技術原理 268
15.2 像素和屏幕分辨率 269
15.2.1 像素和屏幕分辨率 269
15.2.2 設備像素和CSS像素 270
15.3 視口 271
15.3.1 視口 271
15.3.2 視口常用屬性 272
15.3.3 媒體查詢 273
15.4 響應式網頁的佈局設計 274
15.4.1 常用佈局類型 274
15.4.2 佈局的實現方式 275
15.4.3 響應式佈局的設計與實現 276
15.5 小結 278
15.6 實戰 278
實戰一：實現主頁響應式實現 278
第16章 響應式組件 279
視頻講解：1小時14分鐘
16.1 響應式圖片 280
16.1.1 方法1：使用標簽 280
16.1.2 方法2：使用CSS圖片 281
16.2 響應式視頻 284
16.2.1 方法1：使用標簽 284
16.2.2 方法2：使用HTML5手機播放器 285
16.3 響應式導航菜單 288
16.3.1 方法1：CSS3響應式菜單 288
16.3.2 方法2：JavaScript響應式菜單 290
16.4 響應式表格 293
16.4.1 方法1：隱藏表格中的列 293
16.4.2 方法2：滾動表格中的列 295
16.4.3 方法3：轉換表格中的列 296
16.5 小結 298
16.6 實戰 298
實戰一：實現一個響應式菜單 298
第3篇 項目篇
第17章 課程設計：游戲公園 300
視頻講解：1小時5分鐘
17.1 課程設計目的 301
17.2 游戲公園網站概述 301
17.2.1 網站特點 302
17.2.2 功能結構 303
17.3 主頁的設計與實現 303
17.3.1 主頁的設計 303
17.3.2 頂部區和底部區功能的實現 304
17.3.3 推薦游戲功能的實現 306
17.3.4 最新游戲功能的實現 307
17.4 博客列表的設計與實現 309
17.4.1 博客列表的設計 309
17.4.2 博客列表的實現 310
17.5 博客詳情的設計與實現 311
17.5.1 博客詳情的設計 311
17.5.2 博客詳情的實現 312
17.6 關於我們的設計與實現 313
17.6.1 關於我們的設計 313
17.6.2 關於我們的實現 314
17.7 小結 316
強化訓練分冊目錄
第1章 HTML基礎 1
應用技能拓展學習 1
1．WebStorm常用快捷鍵 1
2．HTML註釋快捷鍵（WebStorm編輯器） 1
3．谷歌瀏覽器中的開發者工具 2
實戰技能強化訓練 4
訓練一：基本功強化訓練 4
1．輸出雷軍的名言 4
2．輸出中英文版的“時間不等人” 5
3．輸出俞敏洪老師的圖書信息 5
4．輸出繞口令 5
5．輸出跨年演講主題 5
訓練二：實戰能力強化訓練 6
6．輸出淘寶網底部菜單 6
7．輸出騰訊免費直播課公告 6
8．輸出明日學院簡介 7
9．輸出新浪官網底部版權信息 7
第2章 文本 9
應用技能拓展學習 9
1．標簽 9
2．標簽 9
3．特殊符號“ ” 11
實戰技能強化訓練 12
訓練一：基本功強化訓練 12
1．輸出每日勵志名言 12
2．輸出影片基本信息 12
3．輸出馬雲語錄 12
4．輸出明日學院官方網站地址 12
5．輸出2018年世界杯分組情況 13
6．輸出彩色數字 13
7．輸出微信支付憑證 14
8．輸出2018年天貓雙十一總成交額 14
9．輸出超市購物小票 14
10．輸出商品標價簽 15
訓練二：實戰能力強化訓練 15
11．居中排版節日板報 15
12．居中排版唐詩 16
13．天氣預報消息發布 16
14．打折商品清單 16
15．輸出方程2X+X2=16 16
16．輸出方程8Y1-X3=20 17
17．繪制情人節字符畫 17
18．給自己畫個字符畫像 17
19．完成一則通告內容 17
20．使用水平線標簽實現菜譜列表 18
第3章 圖像和超鏈接 19
應用技能拓展學習 19
1．SVG圖像 19
2．AlloyImage圖像處理庫 20
實戰技能強化訓練 21
訓練一：基本功強化訓練 21
1．製作購物網站的“促銷活動”頁面 21
2．使用圖像標簽在頁面中顯示圖書封面 22
3．製作手機商城的商品展示頁面 22
4．製作圖書導航頁面 23
5．展示玫瑰的生長過程 24
6．佈局電腦配件頁面 25
7．為圖書添加替換文本和提示文字 25
8．製作商品評價頁面，提示文字為商品信息 26
9．使用鏈接製作網站的導航菜單 26
10．“展開全文”頁面鏈接效果 27
訓練二：實戰能力強化訓練 27
11．仿淘寶放大鏡效果 27
12．SVG實現圖片模糊效果 28
13．SVG實現點贊特效 28
14．應用AlloyImage對圖像進行灰度處理 28
15．應用AlloyImage對圖像進行反色處理 29
第4章 CSS3概述 30
應用技能拓展學習 30
1．Velocity.js框架 30
2．活用position屬性 31
實戰技能強化訓練 31
訓練一：基本功強化訓練 31
1．製作一個簡單的註冊/登錄頁面 31
2．製作網頁版個人簡歷 31
3．製作網頁版生日賀卡 32
4．製作網頁版宣傳海報 32
5．製作購物商城的商品展示頁面 33
6．製作手機介紹頁面 34
7．製作個人空間主頁 34
8．實現頁面橫幅廣告效果 35
9．製作購物商城的“熱銷爆款”頁面 35
10．製作購物商城的“精品手機”頁面 36
11．製作網站登錄頁面 36
12．製作手機展示頁面 37
13．華為手機詳情頁面 37
14．手機產品參數頁面 38
訓練二：實戰能力強化訓練 39
15．圖片跑馬燈效果 39
16．相冊內圖片單擊輪換效果 40
17．圖形加載動畫 40
18．製作方塊填充的進度條 40
第5章 CSS3高級應用 41
應用技能拓展學習 41
1．偽類選擇器的應用 41
2．彈性佈局（flexbox）的使用 42
實戰技能強化訓練 44
訓練一：基本功強化訓練 44
1．製作手機商城的“精品配件”頁面 44
2．製作開心消消樂網站的“最新活動”頁面 45
3．製作小米Max 2手機宣傳頁面 45
4．實現手機分類篩選頁面 45
5．製作新增收貨地址頁面 46
6．製作商品詳情頁的產品規格部分 46
7．製作手機商城中“主題購”頁面 47
8．製作一個簡單的橫向導航欄 47
9．製作含二級菜單的橫向導航欄 48
10．製作含二級菜單的側邊導航欄 48
11．旋轉風車效果 49
12．自動拼圖動畫效果 49
13．鼠標光標滑過時的平移特效 50
14．鼠標懸停時展開和放大相冊 50
15．旅游網站圖片輪播效果 51
16．廣告頁面文字滾動顯示效果 51
訓練二：實戰能力強化訓練 52
17．實現凸顯圖片效果 52
18．實現文字水波紋效果 52
19．實現郵件訂閱中心頁面 53
20．製作紅包兌換頁面 53
21．製作360每日趣聞頁面 53
22．實現跳動文字效果 54
第6章 表格與
6.4 標簽 112
6.4.1 標簽的介紹 112
6.4.2 標簽的應用 113
6.5 小結 114
6.6 實戰 114
6.6.1 實戰一：製作每日工作計劃表 114
6.6.2 實戰二：實現網頁版工作總結 114
6.6.3 實戰三：製作一則公司公告 114
第7章 列表 115
視頻講解：11分鐘
7.1 列表的標簽 116
7.2 無序列表 116
7.2.1 無序列表標簽 116
7.2.2 無序列表屬性 117
7.3 有序列表 119
7.3.1 有序列表標簽 119
7.3.2 有序列表屬性 120
7.4 列表的嵌套 122
7.4.1 定義列表的嵌套 122
7.4.2 無序列表和有序列表的嵌套 124
7.5 小結 125
7.6 實戰 126
7.6.1 實戰一：製作網站購買提示內容 126
7.6.2 實戰二：製作QQ聯系人列表 126
7.6.3 實戰三：製作商品列表內容 126
第8章 表單 127
視頻講解：42分鐘
8.1 表單概述 128
8.1.1 概述 128
8.1.2 表單標簽 128
8.2 輸入標簽 131
8.2.1 文本框 131
8.2.2 單選框和多選框 133
8.2.3 按鈕 135
8.2.4 文件域和圖像域 137
8.3 文本域和列表 139
8.3.1 文本域 139
8.3.2 列表/菜單 140
8.4 小結 142
8.5 實戰 143
8.5.1 實戰一：製作QQ登錄頁面 143
8.5.2 實戰二：製作象棋游戲註冊頁面 143
8.5.3 實戰三：製作個人檔案 143
第9章 多媒體 144
視頻講解：1小時5分鐘
9.1 HTML5多媒體的簡述 145
9.1.1 HTML4中多媒體的應用 145
9.1.2 HTML5頁面中的多媒體 145
9.2 多媒體元素基本屬性 146
9.3 多媒體元素常用方法 150
9.3.1 多媒體播放時的方法 150
9.3.2 canPlayType(type)方法 153
9.4 多媒體元素重要事件 153
9.4.1 事件處理方式 153
9.4.2 事件介紹 154
9.4.3 事件實例 155
9.5 小結 157
9.6 實戰 157
9.6.1 實戰一：製作音樂小球 157
9.6.2 實戰二：加載一段視頻文件 157
9.6.3 實戰三：製作一段音頻文件 157
第10章 HTML5新特性 158
視頻講解：57分鐘
10.1 誰在開發HTML5 159
10.2 HTML5的新特性 159
10.3 HTML5和HTML4的區別 161
10.3.1 HTML5的語法變化 161
10.3.2 HTML5中的標記方法 161
10.3.3 HTML5語法中需要掌握的幾個要點 162
10.4 新增和廢除的元素 164
10.4.1 新增的結構元素 164
10.4.2 新增的塊級（block）的語義元素 167
10.4.3 新增的行內（inline）的語義元素 169
10.4.4 新增的嵌入多媒體元素與交互性元素 171
10.4.5 新增的input元素的類型 172
10.4.6 廢除的元素 172
10.5 新增的屬性和廢除的屬性 173
10.5.1 新增的屬性 173
10.5.2 廢除的屬性 175
10.6 小結 176
10.7 實戰 177
實戰一：製作一個圖像鏈接 177
第11章 JavaScript基礎 178
視頻講解：2小時13分鐘
11.1 JavaScript概述 179
11.1.1 JavaScript的發展史 179
11.1.2 JavaScript在HTML中的使用 180
11.2 JavaScript語言基礎 183
11.2.1 數據類型 183
11.2.2 運算符與表達式 186
11.2.3 流程控制 190
11.3 JavaScript對象編程 193
11.3.1 Window窗口對象 193
11.3.2 Document文檔對象 195
11.4 JavaScript事件處理 198
11.4.1 鼠標鍵盤事件 198
11.4.2 頁面事件 201
11.5 小結 203
11.6 實戰 203
11.6.1 實戰一：製作九九乘法表 203
11.6.2 實戰二：製作手機抽獎頁面 203
11.6.3 實戰三：製作購物車結算頁面 203
第2篇 提 高 篇
第12章 繪制圖形 206
視頻講解：1小時15分鐘
12.1 認識HTML5中的畫布Canvas 207
12.1.1 Canvas概述 207
12.1.2 使用Canvas繪制矩形 207
12.2 繪制基本圖形 209
12.2.1 繪制直線 209
12.2.2 繪制曲線 212
12.2.3 繪制圓形 214
12.3 繪制變形圖形 216
12.3.1 繪制平移效果的圖形 216
12.3.2 繪制縮放效果的圖形 217
12.3.3 繪制旋轉效果的圖形 219
12.4 繪制文字 220
12.4.1 繪制輪廓文字 220
12.4.2 繪制填充文字 221
12.4.3 文字相關屬性 222
12.5 小結 224
12.6 實戰 224
12.6.1 實戰一：Canvas繪制移動的正方形 224
12.6.2 實戰二：製作游戲彈幕效果 224
12.6.3 實戰三：實現計時器 224
第13章 文件與拖放 225
視頻講解：37分鐘
13.1 選擇文件 226
13.1.1 通過file對象選擇文件 226
13.1.2 使用Blob接口獲取文件的類型與大小 227
13.2 讀取文件 228
13.2.1 FileReader接口的方法以及事件 228
13.2.2 使用readAsDataURL方法預覽圖片 229
13.2.3 使用readAsText方法讀取文本文件 231
13.3 拖放文件 233
13.3.1 拖放頁面元素 233
13.3.2 DataTransfer對象的屬性與方法 234
13.3.3 使用effectAllowed和dropEffect屬性設置拖放效果 235
13.4 小結 236
13.5 實戰 237
13.5.1 實戰一：實現編輯照片牆中上傳圖片的功能 237
13.5.2 實戰二：查看網頁源碼 237
13.5.3 實戰三：預覽文件功能 237
第14章 JavaScript對象編程 238
視頻講解：1小時2分鐘
14.1 Window窗口對象 239
14.1.1 Window對象 239
14.1.2 對話框（Dialog） 241
14.1.3 窗口對象常用操作 244
14.2 Document文檔對象 247
14.2.1 文檔對象概述 247
14.2.2 文檔對象的常用屬性、方法與事件 248
14.2.3 Document對象的應用 250
14.3 JavaScript與表單操作 255
14.3.1 在JavaScript中訪問表單 255
14.3.2 在JavaScript中訪問表單域 256
14.3.3 表單的驗證 256
14.4 DOM對象 258
14.4.1 DOM概述 258
14.4.2 DOM對象節點屬性 260
14.4.3 節點的幾種操作 261
14.4.4 獲取文檔中的指定元素 262
14.4.5 與DHTML相對應的DOM 264
14.5 小結 265
14.6 實戰 266
實戰一：在頁面的指定位置顯示當前日期 266
第15章 響應式網頁設計 267
視頻講解：38分鐘
15.1 概述 268
15.1.1 響應式網頁設計的概念 268
15.1.2 響應式網頁設計的優缺點和技術原理 268
15.2 像素和屏幕分辨率 269
15.2.1 像素和屏幕分辨率 269
15.2.2 設備像素和CSS像素 270
15.3 視口 271
15.3.1 視口 271
15.3.2 視口常用屬性 272
15.3.3 媒體查詢 273
15.4 響應式網頁的佈局設計 274
15.4.1 常用佈局類型 274
15.4.2 佈局的實現方式 275
15.4.3 響應式佈局的設計與實現 276
15.5 小結 278
15.6 實戰 278
實戰一：實現主頁響應式實現 278
第16章 響應式組件 279
視頻講解：1小時14分鐘
16.1 響應式圖片 280
16.1.1 方法1：使用標簽 280
16.1.2 方法2：使用CSS圖片 281
16.2 響應式視頻 284
16.2.1 方法1：使用標簽 284
16.2.2 方法2：使用HTML5手機播放器 285
16.3 響應式導航菜單 288
16.3.1 方法1：CSS3響應式菜單 288
16.3.2 方法2：JavaScript響應式菜單 290
16.4 響應式表格 293
16.4.1 方法1：隱藏表格中的列 293
16.4.2 方法2：滾動表格中的列 295
16.4.3 方法3：轉換表格中的列 296
16.5 小結 298
16.6 實戰 298
實戰一：實現一個響應式菜單 298
第3篇 項目篇
第17章 課程設計：游戲公園 300
視頻講解：1小時5分鐘
17.1 課程設計目的 301
17.2 游戲公園網站概述 301
17.2.1 網站特點 302
17.2.2 功能結構 303
17.3 主頁的設計與實現 303
17.3.1 主頁的設計 303
17.3.2 頂部區和底部區功能的實現 304
17.3.3 推薦游戲功能的實現 306
17.3.4 最新游戲功能的實現 307
17.4 博客列表的設計與實現 309
17.4.1 博客列表的設計 309
17.4.2 博客列表的實現 310
17.5 博客詳情的設計與實現 311
17.5.1 博客詳情的設計 311
17.5.2 博客詳情的實現 312
17.6 關於我們的設計與實現 313
17.6.1 關於我們的設計 313
17.6.2 關於我們的實現 314
17.7 小結 316
強化訓練分冊目錄
第1章 HTML基礎 1
應用技能拓展學習 1
1．WebStorm常用快捷鍵 1
2．HTML註釋快捷鍵（WebStorm編輯器） 1
3．谷歌瀏覽器中的開發者工具 2
實戰技能強化訓練 4
訓練一：基本功強化訓練 4
1．輸出雷軍的名言 4
2．輸出中英文版的“時間不等人” 5
3．輸出俞敏洪老師的圖書信息 5
4．輸出繞口令 5
5．輸出跨年演講主題 5
訓練二：實戰能力強化訓練 6
6．輸出淘寶網底部菜單 6
7．輸出騰訊免費直播課公告 6
8．輸出明日學院簡介 7
9．輸出新浪官網底部版權信息 7
第2章 文本 9
應用技能拓展學習 9
1．標簽 9
2．標簽 9
3．特殊符號“ ” 11
實戰技能強化訓練 12
訓練一：基本功強化訓練 12
1．輸出每日勵志名言 12
2．輸出影片基本信息 12
3．輸出馬雲語錄 12
4．輸出明日學院官方網站地址 12
5．輸出2018年世界杯分組情況 13
6．輸出彩色數字 13
7．輸出微信支付憑證 14
8．輸出2018年天貓雙十一總成交額 14
9．輸出超市購物小票 14
10．輸出商品標價簽 15
訓練二：實戰能力強化訓練 15
11．居中排版節日板報 15
12．居中排版唐詩 16
13．天氣預報消息發布 16
14．打折商品清單 16
15．輸出方程2X+X2=16 16
16．輸出方程8Y1-X3=20 17
17．繪制情人節字符畫 17
18．給自己畫個字符畫像 17
19．完成一則通告內容 17
20．使用水平線標簽實現菜譜列表 18
第3章 圖像和超鏈接 19
應用技能拓展學習 19
1．SVG圖像 19
2．AlloyImage圖像處理庫 20
實戰技能強化訓練 21
訓練一：基本功強化訓練 21
1．製作購物網站的“促銷活動”頁面 21
2．使用圖像標簽在頁面中顯示圖書封面 22
3．製作手機商城的商品展示頁面 22
4．製作圖書導航頁面 23
5．展示玫瑰的生長過程 24
6．佈局電腦配件頁面 25
7．為圖書添加替換文本和提示文字 25
8．製作商品評價頁面，提示文字為商品信息 26
9．使用鏈接製作網站的導航菜單 26
10．“展開全文”頁面鏈接效果 27
訓練二：實戰能力強化訓練 27
11．仿淘寶放大鏡效果 27
12．SVG實現圖片模糊效果 28
13．SVG實現點贊特效 28
14．應用AlloyImage對圖像進行灰度處理 28
15．應用AlloyImage對圖像進行反色處理 29
第4章 CSS3概述 30
應用技能拓展學習 30
1．Velocity.js框架 30
2．活用position屬性 31
實戰技能強化訓練 31
訓練一：基本功強化訓練 31
1．製作一個簡單的註冊/登錄頁面 31
2．製作網頁版個人簡歷 31
3．製作網頁版生日賀卡 32
4．製作網頁版宣傳海報 32
5．製作購物商城的商品展示頁面 33
6．製作手機介紹頁面 34
7．製作個人空間主頁 34
8．實現頁面橫幅廣告效果 35
9．製作購物商城的“熱銷爆款”頁面 35
10．製作購物商城的“精品手機”頁面 36
11．製作網站登錄頁面 36
12．製作手機展示頁面 37
13．華為手機詳情頁面 37
14．手機產品參數頁面 38
訓練二：實戰能力強化訓練 39
15．圖片跑馬燈效果 39
16．相冊內圖片單擊輪換效果 40
17．圖形加載動畫 40
18．製作方塊填充的進度條 40
第5章 CSS3高級應用 41
應用技能拓展學習 41
1．偽類選擇器的應用 41
2．彈性佈局（flexbox）的使用 42
實戰技能強化訓練 44
訓練一：基本功強化訓練 44
1．製作手機商城的“精品配件”頁面 44
2．製作開心消消樂網站的“最新活動”頁面 45
3．製作小米Max 2手機宣傳頁面 45
4．實現手機分類篩選頁面 45
5．製作新增收貨地址頁面 46
6．製作商品詳情頁的產品規格部分 46
7．製作手機商城中“主題購”頁面 47
8．製作一個簡單的橫向導航欄 47
9．製作含二級菜單的橫向導航欄 48
10．製作含二級菜單的側邊導航欄 48
11．旋轉風車效果 49
12．自動拼圖動畫效果 49
13．鼠標光標滑過時的平移特效 50
14．鼠標懸停時展開和放大相冊 50
15．旅游網站圖片輪播效果 51
16．廣告頁面文字滾動顯示效果 51
訓練二：實戰能力強化訓練 52
17．實現凸顯圖片效果 52
18．實現文字水波紋效果 52
19．實現郵件訂閱中心頁面 53
20．製作紅包兌換頁面 53
21．製作360每日趣聞頁面 53
22．實現跳動文字效果 54
第6章 表格與
標簽 55
應用技能拓展學習 55
1．表格中的結構標簽 55
2．偽元素選擇器的巧用 57
實戰技能強化訓練 57
訓練一：基本功強化訓練 57
1．表格實現鍵盤快捷鍵介紹頁面 57
2．表格實現12306公告頁面 58
3．CSS實現唯美主題背景 58
4．表格實現KTV價格表 58
5．實現電子版違章罰單 59
6．實現ATM機銀行憑證 59
7．實現健身房課程表 59
8．製作電子邀請函 60
9．DIV實現崗位招聘頁面 60
10．表格實現手機版天氣預報 61
11．表格實現商品列表 61
12．表格實現51購商城首頁商品信息 62
13．製作移動端王者榮耀官網頁面 62
14．製作美團外賣頁面 63
15．表格實現科學計算器 64
16．表格實現日歷頁面 64
17．DIV實現優惠券領取頁面 64
18．微信朋友圈動態效果 65
訓練二：實戰能力強化訓練 65
19．圖文顯示課程列表頁面 65
20．使用表格佈局女裝頁面 65
21．美食製作熱門推薦列表 66
22．表格實現游戲博客頁面 67
第7章 列表 68
應用技能拓展學習 68
1．CSS3中的列表屬性 68
2．列表的嵌套 68
實戰技能強化訓練 70
訓練一：基本功強化訓練 70
1．手機詳情頁面信息 70
2．CSS製作精美書簽 71
3．餐廳菜單頁面 71
4．支付寶話費充值頁面 72
5．看圖猜成語頁面 72
6．修改列表項標志 72
7．QQ聯系人列表 73
8．商品熱銷排行榜 73
9．票據報銷網絡填單 73
10．仿手機聯系人頁面 73
訓練二：實戰能力強化訓練 74
11．分類導航頁面 74
12．列表實現汽車網站導航菜單 74
13．紅包領取記錄 75
14．駕考寶典答題頁面 75
15．教師節節日賀卡 76
16．限時搶購頁面 76
17．手機商城“熱賣推薦”頁面 76
18．開發類網站的二級導航菜單 77
19．輪播介紹手機的兒童模式 77
20．時間軸顯示各月份最適合的景點 78
第8章 表單 79
應用技能拓展學習 79
1．HTML5新增的input標簽的屬性 79
實戰技能強化訓練 81
訓練一：基本功強化訓練 81
1．QQ註冊頁面 81
2．電子發票開具頁面 81
3．中獎信息填寫頁面 81
4．簡約登錄頁面 82
5．“愛家”在線租房申請頁面 82
6．商品評價時限制輸入的長度 83
7．玩轉漂流瓶 83
8．在線留言頁面 83
9．包含第三方登錄接口的會員登錄頁面 84
10．文本框不為空驗證 84
訓練二：實戰能力強化訓練 85
11．手機端購票頁面 85
12．個人檔案頁面 85
13．百貨超市滿意度調查表 86
14．QQ空間留言板 86
15．大連一日游預定報名頁面 87
16．bug意見反饋頁面 88
第9章 多媒體 89
應用技能拓展學習 89
1．Audio標簽與Video標簽的使用 89
2．Audio對象和Video對象的屬性 89
3．Audio對象和Video對象方法 90
實戰技能強化訓練 92
訓練一：基本功強化訓練 92
1．網頁中添加視頻 92
2．實現直播頁面 92
3．設置視頻控制欄的顯示與隱藏 93
4．添加背景音樂 93
5．動態設置視頻大小與播放狀態 94
6．自定義視頻工具欄 94
7．音樂循環播放 95
8．HTML5手機視頻播放器 95
9．實現音樂、歌詞同步 96
10．為視頻添加彈幕 96
訓練二：實戰能力強化訓練 96
11．為視頻添加字幕 96
12．實現PC端音樂播放器 97
13．模擬游戲音效 97
14．仿酷狗音樂播放器 98
第10章 HTML5新特性 99
應用技能拓展學習 99
1．HTML5中新增的結構元素與語義化元素 99
2．HTML5中新增的input元素類型 101
實戰技能強化訓練 101
訓練一：基本功強化訓練 101
1．會說話的湯姆貓 101
2．文字邊緣鏤空動畫 101
3．恐龍爬坡動畫 102
4．懸掛的日歷 102
5．氣溫變化圖 103
6．網購商城商品跳轉頁面 103
訓練二：實戰能力強化訓練 104
7．商品訂購信息 104
8．實現個人博客主頁 104
9．將圖片裁切為不規則圖形 105
第11章 JavaScript基礎 106
應用技能拓展學習 106
1．函數的定義和調用 106
2．for語句 108
3．數組簡介 108
4．toFixed()方法 111
5．Math對象簡介 111
6．Number()函數 112
7．eval()函數 113
8．parseInt()函數 113
9．Date對象 114
10．setTimeout()方法 115
11．事件對象簡介 115
12．為元素綁定事件 117
13．DOM簡介 117
14．style對象簡介 121
15．圖像對象簡介 125
16．offsetLeft、offsetTop、offsetWidth、offsetHeight 屬性 127
17．scrollLeft、scrollTop屬性 127
18．直接創建自定義對象的方法 127
實戰技能強化訓練 128
訓練一：基本功強化訓練 128
1．輸出自動櫃員機客戶憑條 128
2．輸出《九陽神功》口訣 128
3．計算存款本息合計 128
4．計算身體質量指數 129
5．查看你是什麽星座 129
6．輸出由“*”組成的空心菱形 130
7．商品搶購倒計時 130
8．播放歌曲權限設置 130
9．計算從出生到現在度過的時間 131
10．輸出2018年內地電影票房排行榜 131
訓練二：實戰能力強化訓練 131
11．燈泡點亮與熄滅 131
12．抽屜風格的滑出菜單 132
13．切換表情圖片 132
14．為圖片添加和移除模糊效果 132
15．簡單計算器 133
16．隨意擺放的照片牆 133
17．模擬畫圖軟件調整圖片大小 133
18．圖片放大鏡效果 134
19．顯示選擇的酒店類型 134
20．切換商品類別選項卡 135
21．驗證用戶登錄信息是否為空 135
22．橫向導航菜單 136
第12章 繪制圖形 137
應用技能拓展學習 137
1．sin()方法和cos()方法 137
2．狀態的保存和恢復 138
3．onwheel事件 138
4．zoom屬性 139
5．createPattern()方法 139
6．繪制陰影 140
7．clearRect()方法 141
8．Date對象中的幾個方法 141
9．數組的push()方法 143
10．在canvas中應用layerX和layerY屬性 143
11．min()方法 144
12．random()方法 144
13．requestAnimationFrame()方法 144
實戰技能強化訓練 145
訓練一：基本功強化訓練 145
1．繪制火柴人 145
2．繪制紅心 145
3．繪制簡易房屋 145
4．在圖片上輸出文字 146
5．繪制嚮日葵 146
6．在畫布中顯示圖片 146
7．通過鼠標滾輪放大和縮小圖片 146
8．製作圖像平鋪效果 147
9．製作文字陰影效果 147
訓練二：實戰能力強化訓練 147
10．繪制別墅與樹木 147
11．製作桌面時鐘 147
12．小車的移動和停止 148
13．圖像放大鏡 148
14．製作簡易寫字板 149
15．圖片漸隱漸現效果 149
16．圖像局部放大效果 149
17．下雪動畫效果 150
18．地球繞太陽公轉效果 150
第13章 文件與拖放 151
應用技能拓展學習 151
1．Math對象的兩個方法 151
2．正則表達式簡介 152
3．naturalWidth和naturalHeight屬性 153
4．substr()方法 153
5．canvas元素的toBlob()方法 154
6．URL.createObjectURL()方法 154
7．URL.revokeObjectURL()方法 154
8．createElement()方法 155
9．appendChild()方法 155
實戰技能強化訓練 156
訓練一：基本功強化訓練 156
1．顯示上傳文件名 156
2．單圖縮略圖預覽 157
3．單圖預覽並輸出文件信息 157
4．編輯照片牆 158
5．文本的上傳預覽 159
6．應用事件屬性拖放圖片到指定區域 160
7．應用事件監聽器幫小鳥回家 161
8．將文件拖動到指定區域預覽 161
訓練二：實戰能力強化訓練 162
9．將商品拖至購物車 162
10．隨意拖動廣告圖 162
11．下載canvas圖像 163
12．預覽多個上傳文件信息 163
13．圖片在兩個容器內隨意拖動 164
14．將圖片拖放到回收站 164
第14章 JavaScript對象編程 165
應用技能拓展學習 165
1．setInterval()方法和clearInterval()方法 165
2．classList屬性 166
3．style對象的幾個屬性 168
4．按鈕的disabled屬性 171
5．下拉菜單的selectedIndex屬性 172
6．clientHeight屬性 172
7．setAttribute()和getAttribute()方法 172
8．數組的splice()方法 173
9．globalCompositeOperation屬性 174
實戰技能強化訓練 175
訓練一：基本功強化訓練 175
1．刪除訂單信息 175
2．奧運知識問答 175
3．單擊火箭圖片返回頂部 176
4．切換註冊按鈕的狀態 176
5．在列表中選擇頭像 177
6．使用進度條模擬安裝過程 177
7．實現秒錶計時功能 177
8．輸入取票碼取票 178
9．獲取驗證碼倒計時 178
10．更換頁面主題 179
訓練二：實戰能力強化訓練 179
11．實現圖片輪播功能 179
12．柱形圖顯示投票結果 179
13．紅心按鈕點贊動畫特效 180
14．開心小農場 180
15．幸運大抽獎 181
16．模擬刮刮卡刮獎特效 181
17．歌曲置頂和刪除 182
18．模擬老虎機滾動抽獎效果 182
19．幕簾動畫效果 182
20．模擬微信彈出菜單 183
21．模擬微信輸入支付密碼 184
22．實現電影海報輪播 184
第15章 響應式網頁設計 186
應用技能拓展學習 186
1．媒體查詢的使用 186
2．響應式插件之柵格系統 187
實戰技能強化訓練 188
訓練一：基本功強化訓練 188
1．開心消消樂“最新活動”頁面 188
2．瀏覽器縮小時，隱藏成績表中的列 188
3．翻轉並滾動顯示招聘表 189
4．CSS實現響應式導航欄 190
5．實現課程推薦列表頁面 190
訓練二：實戰能力強化訓練 191
6．360趣玩頁面 191
7．響應式游戲活動介紹頁面 191
8．響應式游戲列表頁面 192
9．女裝專場活動頁面 192
10．Bootstrap實現圖片輪播 193
答案提示 194
應用技能拓展學習 55
1．表格中的結構標簽 55
2．偽元素選擇器的巧用 57
實戰技能強化訓練 57
訓練一：基本功強化訓練 57
1．表格實現鍵盤快捷鍵介紹頁面 57
2．表格實現12306公告頁面 58
3．CSS實現唯美主題背景 58
4．表格實現KTV價格表 58
5．實現電子版違章罰單 59
6．實現ATM機銀行憑證 59
7．實現健身房課程表 59
8．製作電子邀請函 60
9．DIV實現崗位招聘頁面 60
10．表格實現手機版天氣預報 61
11．表格實現商品列表 61
12．表格實現51購商城首頁商品信息 62
13．製作移動端王者榮耀官網頁面 62
14．製作美團外賣頁面 63
15．表格實現科學計算器 64
16．表格實現日歷頁面 64
17．DIV實現優惠券領取頁面 64
18．微信朋友圈動態效果 65
訓練二：實戰能力強化訓練 65
19．圖文顯示課程列表頁面 65
20．使用表格佈局女裝頁面 65
21．美食製作熱門推薦列表 66
22．表格實現游戲博客頁面 67
第7章 列表 68
應用技能拓展學習 68
1．CSS3中的列表屬性 68
2．列表的嵌套 68
實戰技能強化訓練 70
訓練一：基本功強化訓練 70
1．手機詳情頁面信息 70
2．CSS製作精美書簽 71
3．餐廳菜單頁面 71
4．支付寶話費充值頁面 72
5．看圖猜成語頁面 72
6．修改列表項標志 72
7．QQ聯系人列表 73
8．商品熱銷排行榜 73
9．票據報銷網絡填單 73
10．仿手機聯系人頁面 73
訓練二：實戰能力強化訓練 74
11．分類導航頁面 74
12．列表實現汽車網站導航菜單 74
13．紅包領取記錄 75
14．駕考寶典答題頁面 75
15．教師節節日賀卡 76
16．限時搶購頁面 76
17．手機商城“熱賣推薦”頁面 76
18．開發類網站的二級導航菜單 77
19．輪播介紹手機的兒童模式 77
20．時間軸顯示各月份最適合的景點 78
第8章 表單 79
應用技能拓展學習 79
1．HTML5新增的input標簽的屬性 79
實戰技能強化訓練 81
訓練一：基本功強化訓練 81
1．QQ註冊頁面 81
2．電子發票開具頁面 81
3．中獎信息填寫頁面 81
4．簡約登錄頁面 82
5．“愛家”在線租房申請頁面 82
6．商品評價時限制輸入的長度 83
7．玩轉漂流瓶 83
8．在線留言頁面 83
9．包含第三方登錄接口的會員登錄頁面 84
10．文本框不為空驗證 84
訓練二：實戰能力強化訓練 85
11．手機端購票頁面 85
12．個人檔案頁面 85
13．百貨超市滿意度調查表 86
14．QQ空間留言板 86
15．大連一日游預定報名頁面 87
16．bug意見反饋頁面 88
第9章 多媒體 89
應用技能拓展學習 89
1．Audio標簽與Video標簽的使用 89
2．Audio對象和Video對象的屬性 89
3．Audio對象和Video對象方法 90
實戰技能強化訓練 92
訓練一：基本功強化訓練 92
1．網頁中添加視頻 92
2．實現直播頁面 92
3．設置視頻控制欄的顯示與隱藏 93
4．添加背景音樂 93
5．動態設置視頻大小與播放狀態 94
6．自定義視頻工具欄 94
7．音樂循環播放 95
8．HTML5手機視頻播放器 95
9．實現音樂、歌詞同步 96
10．為視頻添加彈幕 96
訓練二：實戰能力強化訓練 96
11．為視頻添加字幕 96
12．實現PC端音樂播放器 97
13．模擬游戲音效 97
14．仿酷狗音樂播放器 98
第10章 HTML5新特性 99
應用技能拓展學習 99
1．HTML5中新增的結構元素與語義化元素 99
2．HTML5中新增的input元素類型 101
實戰技能強化訓練 101
訓練一：基本功強化訓練 101
1．會說話的湯姆貓 101
2．文字邊緣鏤空動畫 101
3．恐龍爬坡動畫 102
4．懸掛的日歷 102
5．氣溫變化圖 103
6．網購商城商品跳轉頁面 103
訓練二：實戰能力強化訓練 104
7．商品訂購信息 104
8．實現個人博客主頁 104
9．將圖片裁切為不規則圖形 105
第11章 JavaScript基礎 106
應用技能拓展學習 106
1．函數的定義和調用 106
2．for語句 108
3．數組簡介 108
4．toFixed()方法 111
5．Math對象簡介 111
6．Number()函數 112
7．eval()函數 113
8．parseInt()函數 113
9．Date對象 114
10．setTimeout()方法 115
11．事件對象簡介 115
12．為元素綁定事件 117
13．DOM簡介 117
14．style對象簡介 121
15．圖像對象簡介 125
16．offsetLeft、offsetTop、offsetWidth、offsetHeight 屬性 127
17．scrollLeft、scrollTop屬性 127
18．直接創建自定義對象的方法 127
實戰技能強化訓練 128
訓練一：基本功強化訓練 128
1．輸出自動櫃員機客戶憑條 128
2．輸出《九陽神功》口訣 128
3．計算存款本息合計 128
4．計算身體質量指數 129
5．查看你是什麽星座 129
6．輸出由“*”組成的空心菱形 130
7．商品搶購倒計時 130
8．播放歌曲權限設置 130
9．計算從出生到現在度過的時間 131
10．輸出2018年內地電影票房排行榜 131
訓練二：實戰能力強化訓練 131
11．燈泡點亮與熄滅 131
12．抽屜風格的滑出菜單 132
13．切換表情圖片 132
14．為圖片添加和移除模糊效果 132
15．簡單計算器 133
16．隨意擺放的照片牆 133
17．模擬畫圖軟件調整圖片大小 133
18．圖片放大鏡效果 134
19．顯示選擇的酒店類型 134
20．切換商品類別選項卡 135
21．驗證用戶登錄信息是否為空 135
22．橫向導航菜單 136
第12章 繪制圖形 137
應用技能拓展學習 137
1．sin()方法和cos()方法 137
2．狀態的保存和恢復 138
3．onwheel事件 138
4．zoom屬性 139
5．createPattern()方法 139
6．繪制陰影 140
7．clearRect()方法 141
8．Date對象中的幾個方法 141
9．數組的push()方法 143
10．在canvas中應用layerX和layerY屬性 143
11．min()方法 144
12．random()方法 144
13．requestAnimationFrame()方法 144
實戰技能強化訓練 145
訓練一：基本功強化訓練 145
1．繪制火柴人 145
2．繪制紅心 145
3．繪制簡易房屋 145
4．在圖片上輸出文字 146
5．繪制嚮日葵 146
6．在畫布中顯示圖片 146
7．通過鼠標滾輪放大和縮小圖片 146
8．製作圖像平鋪效果 147
9．製作文字陰影效果 147
訓練二：實戰能力強化訓練 147
10．繪制別墅與樹木 147
11．製作桌面時鐘 147
12．小車的移動和停止 148
13．圖像放大鏡 148
14．製作簡易寫字板 149
15．圖片漸隱漸現效果 149
16．圖像局部放大效果 149
17．下雪動畫效果 150
18．地球繞太陽公轉效果 150
第13章 文件與拖放 151
應用技能拓展學習 151
1．Math對象的兩個方法 151
2．正則表達式簡介 152
3．naturalWidth和naturalHeight屬性 153
4．substr()方法 153
5．canvas元素的toBlob()方法 154
6．URL.createObjectURL()方法 154
7．URL.revokeObjectURL()方法 154
8．createElement()方法 155
9．appendChild()方法 155
實戰技能強化訓練 156
訓練一：基本功強化訓練 156
1．顯示上傳文件名 156
2．單圖縮略圖預覽 157
3．單圖預覽並輸出文件信息 157
4．編輯照片牆 158
5．文本的上傳預覽 159
6．應用事件屬性拖放圖片到指定區域 160
7．應用事件監聽器幫小鳥回家 161
8．將文件拖動到指定區域預覽 161
訓練二：實戰能力強化訓練 162
9．將商品拖至購物車 162
10．隨意拖動廣告圖 162
11．下載canvas圖像 163
12．預覽多個上傳文件信息 163
13．圖片在兩個容器內隨意拖動 164
14．將圖片拖放到回收站 164
第14章 JavaScript對象編程 165
應用技能拓展學習 165
1．setInterval()方法和clearInterval()方法 165
2．classList屬性 166
3．style對象的幾個屬性 168
4．按鈕的disabled屬性 171
5．下拉菜單的selectedIndex屬性 172
6．clientHeight屬性 172
7．setAttribute()和getAttribute()方法 172
8．數組的splice()方法 173
9．globalCompositeOperation屬性 174
實戰技能強化訓練 175
訓練一：基本功強化訓練 175
1．刪除訂單信息 175
2．奧運知識問答 175
3．單擊火箭圖片返回頂部 176
4．切換註冊按鈕的狀態 176
5．在列表中選擇頭像 177
6．使用進度條模擬安裝過程 177
7．實現秒錶計時功能 177
8．輸入取票碼取票 178
9．獲取驗證碼倒計時 178
10．更換頁面主題 179
訓練二：實戰能力強化訓練 179
11．實現圖片輪播功能 179
12．柱形圖顯示投票結果 179
13．紅心按鈕點贊動畫特效 180
14．開心小農場 180
15．幸運大抽獎 181
16．模擬刮刮卡刮獎特效 181
17．歌曲置頂和刪除 182
18．模擬老虎機滾動抽獎效果 182
19．幕簾動畫效果 182
20．模擬微信彈出菜單 183
21．模擬微信輸入支付密碼 184
22．實現電影海報輪播 184
第15章 響應式網頁設計 186
應用技能拓展學習 186
1．媒體查詢的使用 186
2．響應式插件之柵格系統 187
實戰技能強化訓練 188
訓練一：基本功強化訓練 188
1．開心消消樂“最新活動”頁面 188
2．瀏覽器縮小時，隱藏成績表中的列 188
3．翻轉並滾動顯示招聘表 189
4．CSS實現響應式導航欄 190
5．實現課程推薦列表頁面 190
訓練二：實戰能力強化訓練 191
6．360趣玩頁面 191
7．響應式游戲活動介紹頁面 191
8．響應式游戲列表頁面 192
9．女裝專場活動頁面 192
10．Bootstrap實現圖片輪播 193
答案提示 194
