Html5+JavaScript+Css3開(kāi)發(fā)手冊(cè)：基礎(chǔ)·案例·應(yīng)用

基礎(chǔ)篇
第1章　HTML基礎(chǔ)
1.1　HTML基礎(chǔ)   2
1.1.1　什么是HTML   2
1.1.2　HTML的發(fā)展歷程   3
1.2　HTML5相關(guān)概念與基本結(jié)構(gòu)   3
1.2.1　HTML5的相關(guān)概念   3
1.2.2　HTML5的基本結(jié)構(gòu)   4
【實(shí)例1.1】運(yùn)用屬性，渲染頁(yè)面效果   6
1.3　編寫(xiě)個(gè)HTML5文件   9
1.3.1　HTML5文件的編寫(xiě)方法   9
1.3.2　手工編寫(xiě)頁(yè)面   9
1.3.3　使用可視化軟件制作頁(yè)面   10
第2章　標(biāo)題和段落
2.1　添加標(biāo)題   15
2.1.1　添加各級(jí)標(biāo)題   16
【實(shí)例2.1】巧用標(biāo)題標(biāo)簽，編寫(xiě)程序員笑話   16
2.1.2　設(shè)置標(biāo)題的對(duì)齊方式   17
【實(shí)例2.2】活用文字居中，推薦商品信息   18
2.2　添加段落   18
2.2.1　段落標(biāo)簽的使用   18
【實(shí)例2.3】巧用段落標(biāo)簽，介紹創(chuàng)意文字   19
2.2.2　段落中的換行標(biāo)簽   19
【實(shí)例2.4】巧用換行，書(shū)寫(xiě)故事   19
2.3　添加文字裝飾效果   20
2.3.1　設(shè)置上標(biāo)與下標(biāo)   20
【實(shí)例2.5】使用上下標(biāo)，展示數(shù)學(xué)方程式   21
2.3.2　文字的斜體、下劃線與刪除線   21
【實(shí)例2.6】活用文字裝飾，推薦商品信息   21
2.4　添加水平線   22
【實(shí)例2.7】巧用水平線繪制行表格   22
2.5　綜合案例——二十四節(jié)氣歌   23
2.5.1　分析數(shù)據(jù)   23
2.5.2　實(shí)現(xiàn)過(guò)程   24
2.6　實(shí)戰(zhàn)練習(xí)   24
第3章　圖像和超鏈接
3.1　添加圖像   25
3.1.1　圖像的基本格式   25
3.1.2　添加圖像   26
【實(shí)例3.1】使用標(biāo)簽實(shí)現(xiàn)五子棋的游戲簡(jiǎn)介   26
3.2　設(shè)置圖像屬性   27
3.2.1　圖像大小與邊框   27
【實(shí)例3.2】改變手機(jī)商品詳情中的圖片大小和邊框   27
3.2.2　替換文本與提示文字   28
【實(shí)例3.3】設(shè)置圖片的提示文字與替換文本   28
3.2.3　圖像間距與對(duì)齊方式   29
【實(shí)例3.4】使用align屬性改變頭像的位置   30
3.3　添加超鏈接   30
3.3.1　添加文本鏈接   30
【實(shí)例3.5】巧用文本鏈接實(shí)現(xiàn)商城導(dǎo)航   31
3.3.2　添加書(shū)簽鏈接   31
【實(shí)例3.6】巧用書(shū)簽鏈接實(shí)現(xiàn)商城網(wǎng)頁(yè)內(nèi)部跳轉(zhuǎn)   32
3.4　圖像的超鏈接與熱區(qū)鏈接   33
3.4.1　圖像的超鏈接   33
【實(shí)例3.7】添加圖片鏈接實(shí)現(xiàn)手機(jī)風(fēng)暴模塊   33
3.4.2　圖像熱區(qū)鏈接   35
【實(shí)例3.8】使用熱區(qū)鏈接添加多個(gè)鏈接地址   35
3.5　綜合案例——實(shí)現(xiàn)明日學(xué)院明星講師頁(yè)面的跳轉(zhuǎn)   36
3.5.1　案例分析   37
3.5.2　實(shí)現(xiàn)過(guò)程   37
3.6　實(shí)戰(zhàn)練習(xí)   38
第4章　表格與標(biāo)簽、標(biāo)簽
4.1　簡(jiǎn)單表格   39
4.1.1　簡(jiǎn)單表格的制作   39
【實(shí)例4.1】使用表格標(biāo)簽編寫(xiě)考試成績(jī)單   40
4.1.2　表頭的設(shè)置   41
【實(shí)例4.2】使用表頭標(biāo)簽制作簡(jiǎn)單課程表   41
4.2　表格的高級(jí)應(yīng)用   42
4.2.1　表格的樣式   42
【實(shí)例4.3】制作商品推薦表格   43
4.2.2　表格的合并   44
【實(shí)例4.4】使用表格制作復(fù)雜課程表   44
4.2.3　表格的分組   45
【實(shí)例4.5】使用表格分組制作學(xué)生聯(lián)系表   45
4.3　標(biāo)簽   46
4.3.1　標(biāo)簽的介紹   46
【實(shí)例4.6】使用標(biāo)簽制作古詩(shī)一首   47
4.3.2　標(biāo)簽的應(yīng)用   47
【實(shí)例4.7】使用標(biāo)簽制作個(gè)人簡(jiǎn)歷   48
4.4　標(biāo)簽   48
4.4.1　標(biāo)簽的介紹   48
【實(shí)例4.8】使用不同的語(yǔ)言表述“我愛(ài)你”   49
4.4.2　標(biāo)簽的應(yīng)用   49
【實(shí)例4.9】使用標(biāo)簽制作公司介紹短文   49
4.5　綜合案例——制作網(wǎng)頁(yè)中的女裝模塊   50
4.5.1　案例分析   50
4.5.2　實(shí)現(xiàn)過(guò)程   51
4.6　實(shí)戰(zhàn)練習(xí)   52
第5章　列表
5.1　列表的標(biāo)簽   53
5.2　無(wú)序列表   54
5.2.1　無(wú)序列表標(biāo)簽   54
【實(shí)例5.1】運(yùn)用無(wú)序列表顯示NBA東部聯(lián)盟球隊(duì)前四強(qiáng)   54
5.2.2　無(wú)序列表屬性    54
【實(shí)例5.2】運(yùn)用無(wú)序列表顯示全球品牌價(jià)值100強(qiáng)的前三名   55
5.3　有序列表   57
5.3.1　有序列表標(biāo)簽   57
【實(shí)例5.3】運(yùn)用有序列表顯示2018年俄羅斯世界杯排名前四強(qiáng)   57
5.3.2　有序列表屬性   58
【實(shí)例5.4】運(yùn)用有序列表制作商城頁(yè)面   58
5.4　定義列表   59
【實(shí)例5.5】運(yùn)用定義列表顯示古詩(shī)二首   60
5.5　無(wú)序列表和有序列表的嵌套   60
【實(shí)例5.6】運(yùn)用無(wú)序列表和有序列表制作導(dǎo)航欄   60
5.6　綜合案例——使用列表制作二級(jí)導(dǎo)航菜單   62
5.6.1　案例分析   62
5.6.2　案例實(shí)現(xiàn)   62
5.7　實(shí)戰(zhàn)練習(xí)   64
第6章　表單
6.1　表單概述   65
6.1.1　什么是表單   65
6.1.2　表單標(biāo)簽   65
6.2　輸入標(biāo)簽   67
6.2.1　文本框和密碼框   67
【實(shí)例6.1】制作商城中賬號(hào)登錄頁(yè)面   68
6.2.2　單選按鈕和復(fù)選框   69
【實(shí)例6.2】實(shí)現(xiàn)購(gòu)物車(chē)頁(yè)面選擇商品功能   69
6.2.3　按鈕   70
【實(shí)例6.3】制作收貨地址信息填寫(xiě)頁(yè)面   71
6.2.4　圖像域和文件域   72
【實(shí)例6.4】實(shí)現(xiàn)注冊(cè)頁(yè)面中的上傳圖像功能   73
6.3　文本域和列表   74
6.3.1　文本域   74
【實(shí)例6.5】制作商品評(píng)價(jià)頁(yè)面中的評(píng)價(jià)輸入框   74
6.3.2　列表/菜單   74
【實(shí)例6.6】實(shí)現(xiàn)個(gè)人檔案填寫(xiě)   75
6.4　綜合案例——制作在線租房信息填寫(xiě)頁(yè)面   77
6.4.1　案例分析   77
6.4.2　案例實(shí)現(xiàn)   78
6.5　實(shí)戰(zhàn)練習(xí)   81
第7章　CSS3選擇器
7.1　CSS3選擇器概述   82
7.1.1　CSS3的發(fā)展史   82
7.1.2　一個(gè)簡(jiǎn)單的CSS3示例   83
7.1.3　選擇器概述   85
7.2　基礎(chǔ)選擇器   86
7.2.1　元素選擇器   86
【實(shí)例7.1】使用元素選擇器實(shí)現(xiàn)生日賀卡的樣式   86
7.2.2　類(lèi)選擇器   87
7.2.3　ID選擇器   88
【實(shí)例7.2】制作網(wǎng)購(gòu)商城中的爆款特賣(mài)頁(yè)面   89
7.2.4　屬性選擇器   91
【實(shí)例7.3】制作51購(gòu)商城首頁(yè)的手機(jī)風(fēng)暴版塊   91
7.3　其他選擇器   93
7.3.1　后代選擇器   93
7.3.2　子代選擇器   94
7.3.3　相鄰兄弟元素選擇器   95
7.3.4　通用兄弟元素選擇器   96
7.4　偽類(lèi)和偽元素選擇器   97
7.4.1　偽類(lèi)選擇器   97
7.4.2　偽元素選擇器   98
【實(shí)例7.4】制作vivo X9s手機(jī)的宣傳頁(yè)面   98
7.5　綜合案例——仿制個(gè)人空間主頁(yè)   100
7.5.1　案例分析   100
7.5.2　案例實(shí)現(xiàn)   101
7.6　實(shí)戰(zhàn)練習(xí)   103
第8章　CSS3常用屬性
8.1　文本相關(guān)屬性   104
8.1.1　文字相關(guān)屬性   104
【實(shí)例8.1】制作網(wǎng)購(gòu)商城的商品搶購(gòu)頁(yè)面   106
8.1.2　文本相關(guān)屬性   107
【實(shí)例8.2】演示word-break屬性的功能   108
8.2　背景相關(guān)屬性   109
8.2.1　背景常規(guī)屬性   109
【實(shí)例8.3】實(shí)現(xiàn)為登錄頁(yè)面插入背景圖像   111
8.2.2　CSS3新增背景屬性   112
8.3　列表相關(guān)屬性   116
【實(shí)例8.4】更改鼠標(biāo)懸停在二級(jí)導(dǎo)航菜單上時(shí)的列表項(xiàng)符號(hào)   116
8.4　框模型   118
8.4.1　框模型概述   118
8.4.2　設(shè)置元素的大小   118
8.4.3　設(shè)置外邊距   118
【實(shí)例8.5】實(shí)現(xiàn)對(duì)vivo系列手機(jī)兒童模式的介紹   120
8.4.4　設(shè)置內(nèi)邊距   121
【實(shí)例8.6】制作手機(jī)商城中的新品專(zhuān)區(qū)頁(yè)面   121
8.4.5　設(shè)置邊框   122
【實(shí)例8.7】制作購(gòu)物商城中的商品列表頁(yè)面   124
8.5　定位相關(guān)屬性   125
8.5.1　設(shè)置元素的位置   125
【實(shí)例8.8】實(shí)現(xiàn)鼠標(biāo)滑過(guò)垂直菜單時(shí)，展開(kāi)對(duì)應(yīng)的內(nèi)容   126
8.5.2　設(shè)置元素的浮動(dòng)   127
【實(shí)例8.9】在商品詳情頁(yè)面，標(biāo)簽設(shè)置向左浮動(dòng)   128
8.6　綜合案例——制作換季換新機(jī)促銷(xiāo)頁(yè)面   129
8.6.1　案例分析   129
8.6.2　案例實(shí)現(xiàn)   129
8.7　實(shí)戰(zhàn)練習(xí)   131
第9章　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
9.1　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)概述   132
9.1.1　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念   132
9.1.2　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)缺點(diǎn)   132
9.1.3　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)原理   133
9.2　像素和屏幕分辨率   134
9.2.1　像素和屏幕分辨率   134
9.2.2　設(shè)備像素和CSS像素   134
9.3　視口   135
9.3.1　視口簡(jiǎn)介   135
9.3.2　視口常用屬性   136
9.3.3　媒體查詢   136
9.4　響應(yīng)式網(wǎng)頁(yè)的布局設(shè)計(jì)   137
9.4.1　常用布局類(lèi)型   137
9.4.2　布局的實(shí)現(xiàn)方式   138
9.4.3　響應(yīng)式布局的設(shè)計(jì)與實(shí)現(xiàn)   139
【實(shí)例9.1】實(shí)現(xiàn)51購(gòu)商城登錄頁(yè)面的響應(yīng)式布局   140
9.5　綜合案例——制作響應(yīng)式表格   142
9.5.1　案例分析   142
9.5.2　案例實(shí)現(xiàn)   142
9.6　實(shí)戰(zhàn)練習(xí)   144
第10章　Bootstrap基礎(chǔ)
10.1　Bootstrap概述   145
10.1.1　Bootstrap是什么   145
10.1.2　Bootstrap的優(yōu)點(diǎn)   145
10.1.3　Bootstrap包含的內(nèi)容   146
10.2　Bootstrap的下載與安裝   146
10.2.1　Bootstrap的下載   146
10.2.2　Bootstrap的文件結(jié)構(gòu)   147
10.3　Bootstrap通用樣式   148
10.3.1　文字相關(guān)樣式   148
【實(shí)例10.1】實(shí)現(xiàn)《東北吃貨進(jìn)行曲》的歌詞   149
【實(shí)例10.2】實(shí)現(xiàn)華為P30 Pro手機(jī)簡(jiǎn)介   150
10.3.2　顏色相關(guān)樣式   150
【實(shí)例10.3】制作拼多多中多多果然獲取水滴頁(yè)面   152
10.3.3　設(shè)置內(nèi)外邊距   153
【實(shí)例10.4】制作人見(jiàn)人愛(ài)獎(jiǎng)狀頁(yè)面   154
10.3.4　設(shè)置邊框與浮動(dòng)   154
【實(shí)例10.5】仿制簡(jiǎn)易密碼輸入器頁(yè)面   155
【實(shí)例10.6】仿制電商網(wǎng)站首頁(yè)中“用券爆款”頁(yè)面   156
10.4　Bootstrap中的網(wǎng)格布局   157
10.4.1　網(wǎng)格系統(tǒng)的基本使用   157
【實(shí)例10.7】使用網(wǎng)格系統(tǒng)來(lái)布局一則360每日趣玩消息   159
10.4.2　自動(dòng)布局列   159
【實(shí)例10.8】設(shè)計(jì)游戲列表頁(yè)面的響應(yīng)式布局   161
10.4.3　項(xiàng)目的對(duì)齊處理   161
【實(shí)例10.9】設(shè)計(jì)游戲列表的響應(yīng)式水平對(duì)齊方式   162
【實(shí)例10.10】設(shè)計(jì)游戲列表的響應(yīng)式垂直對(duì)齊方式   164
10.4.4　列的偏移、嵌套和重排序   164
【實(shí)例10.11】使用列偏移等間距對(duì)齊游戲列表   165
【實(shí)例10.12】實(shí)現(xiàn)為商品列表按價(jià)格進(jìn)行排序   166
10.5　綜合案例——制作音樂(lè)網(wǎng)站的熱門(mén)推薦列表   167
10.5.1　案例分析   168
10.5.2　案例實(shí)現(xiàn)   168
10.6　實(shí)戰(zhàn)練習(xí)   169
第11章　JavaScript基礎(chǔ)
11.1　JavaScript概述   170
11.1.1　JavaScript的發(fā)展   170
11.1.2　JavaScript的主要特點(diǎn)   171
11.1.3　JavaScript的應(yīng)用   171
11.1.4　JavaScript在HTML中的使用   172
【實(shí)例11.1】編寫(xiě)個(gè)JavaScript程序   173
【實(shí)例11.2】調(diào)用外部JavaScript文件   173
11.1.5　基本語(yǔ)法   174
11.2　數(shù)據(jù)類(lèi)型   176
11.2.1　數(shù)值型   176
11.2.2　字符串型   178
11.2.3　布爾型   179
11.2.4　特殊數(shù)據(jù)類(lèi)型   179
11.3　變量   180
11.3.1　變量的命名   180
11.3.2　變量的聲明   180
11.3.3　變量的賦值   181
11.3.4　變量的類(lèi)型   182
【實(shí)例11.3】輸出球員信息   182
11.4　運(yùn)算符和表達(dá)式   182
11.4.1　算術(shù)運(yùn)算符   182
【實(shí)例11.4】將華氏度轉(zhuǎn)換為攝氏度   183
11.4.2　字符串運(yùn)算符   183
【實(shí)例11.5】字符串運(yùn)算符的使用   184
11.4.3　比較運(yùn)算符   184
【實(shí)例11.6】比較運(yùn)算符的使用   185
11.4.4　賦值運(yùn)算符   185
【實(shí)例11.7】賦值運(yùn)算符的使用   185
11.4.5　邏輯運(yùn)算符   186
【實(shí)例11.8】邏輯運(yùn)算符的使用   186
11.4.6　條件運(yùn)算符   186
【實(shí)例11.9】條件運(yùn)算符的使用   187
11.4.7　其他運(yùn)算符   187
11.4.8　運(yùn)算符優(yōu)先級(jí)   188
【實(shí)例11.10】運(yùn)算符優(yōu)先級(jí)的使用   189
11.4.9　表達(dá)式   190
11.5　數(shù)據(jù)類(lèi)型的轉(zhuǎn)換規(guī)則   190
11.6　綜合案例——判斷員工收入   191
11.6.1　案例分析   191
11.6.2　實(shí)現(xiàn)過(guò)程   191
11.7　實(shí)戰(zhàn)練習(xí)   192
第12章　流程控制
12.1　條件判斷語(yǔ)句   193
12.1.1　if語(yǔ)句   193
【實(shí)例12.1】獲取3個(gè)數(shù)中的值   194
【實(shí)例12.2】判斷3是奇數(shù)還是偶數(shù)   196
【實(shí)例12.3】輸出考試成績(jī)對(duì)應(yīng)的等級(jí)   197
【實(shí)例12.4】判斷女職工是否已經(jīng)退休   198
12.1.2　switch語(yǔ)句   198
【實(shí)例12.5】輸出獎(jiǎng)項(xiàng)級(jí)別及獎(jiǎng)品   200
12.2　循環(huán)語(yǔ)句   200
12.2.1　while語(yǔ)句   201
【實(shí)例12.6】計(jì)算3000米障礙比賽的完整圈數(shù)   202
12.2.2　do...while語(yǔ)句   202
【實(shí)例12.7】計(jì)算1 2 … 100的和   203
12.2.3　for語(yǔ)句   203
【實(shí)例12.8】計(jì)算50以內(nèi)所有奇數(shù)的和   204
12.2.4　循環(huán)語(yǔ)句的嵌套   205
【實(shí)例12.9】輸出乘法口訣表   205
12.3　跳轉(zhuǎn)語(yǔ)句   205
12.3.1　continue語(yǔ)句   206
【實(shí)例12.10】輸出影廳座位圖   206
12.3.2　break語(yǔ)句   207
12.4　綜合案例——輸出表格   208
12.4.1　案例分析   208
12.4.2　實(shí)現(xiàn)過(guò)程   208
12.5　實(shí)戰(zhàn)練習(xí)   209
第13章　函數(shù)
13.1　函數(shù)的定義和調(diào)用   210
13.1.1　函數(shù)的定義   210
13.1.2　函數(shù)的調(diào)用   211
13.2　函數(shù)的參數(shù)和返回值   213
13.2.1　函數(shù)的參數(shù)   213
【實(shí)例13.1】輸出圖書(shū)名稱和圖書(shū)作者   213
13.2.2　函數(shù)的返回值   214
【實(shí)例13.2】計(jì)算購(gòu)物車(chē)中商品的總價(jià)   214
13.3　嵌套函數(shù)   215
13.3.1　函數(shù)的嵌套定義   215
13.3.2　函數(shù)的嵌套調(diào)用   215
【實(shí)例13.3】獲得選手的平均分   216
13.4　變量的作用域   216
13.4.1　全局變量和局部變量   216
13.4.2　變量的優(yōu)先級(jí)   217
13.5　內(nèi)置函數(shù)   217
13.5.1　數(shù)值處理函數(shù)   217
13.5.2　字符串處理函數(shù)   219
13.6　在表達(dá)式中定義函數(shù)   220
【實(shí)例13.4】輸出星號(hào)金字塔形圖案   221
13.7　綜合案例——輸出自定義的表格   221
13.7.1　案例分析   222
13.7.2　實(shí)現(xiàn)過(guò)程   222
13.8　實(shí)戰(zhàn)練習(xí)   223
第14章　對(duì)象
14.1　對(duì)象簡(jiǎn)介   224
14.1.1　什么是對(duì)象   224
14.1.2　對(duì)象的屬性和方法   224
14.1.3　JavaScript對(duì)象的種類(lèi)   225
14.2　自定義對(duì)象的創(chuàng)建   225
14.2.1　直接創(chuàng)建自定義對(duì)象   226
14.2.2　通過(guò)自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象   226
【實(shí)例14.1】輸出演員個(gè)人簡(jiǎn)介   227
14.2.3　通過(guò)Object對(duì)象創(chuàng)建自定義對(duì)象   228
14.3　Array對(duì)象   229
14.3.1　數(shù)組介紹   230
14.3.2　定義數(shù)組   230
14.3.3　操作數(shù)組元素   231
【實(shí)例14.2】輸出3個(gè)學(xué)霸姓名   232
14.3.4　獲取數(shù)組的長(zhǎng)度   234
【實(shí)例14.3】輸出省份、省會(huì)以及旅游景點(diǎn)   234
14.3.5　數(shù)組的方法   235
14.4　String對(duì)象   240
14.4.1　String對(duì)象的創(chuàng)建   240
14.4.2　獲取字符串的長(zhǎng)度   241
14.4.3　String對(duì)象的方法   241
【實(shí)例14.4】獲取字符“兵”在繞口令中出現(xiàn)的次數(shù)   242
【實(shí)例14.5】截取網(wǎng)站公告標(biāo)題   244
14.5　Math對(duì)象   247
14.5.1　Math對(duì)象的屬性   247
14.5.2　Math對(duì)象的方法   248
【實(shí)例14.6】生成指定位數(shù)的隨機(jī)數(shù)   248
14.6　Date對(duì)象   249
14.6.1　創(chuàng)建Date對(duì)象   249
14.6.2　Date對(duì)象的方法   250
【實(shí)例14.7】輸出當(dāng)前的日期和時(shí)間   252
【實(shí)例14.8】獲取當(dāng)前日期距離明年元旦的天數(shù)   252
14.7　綜合案例——2020年內(nèi)地電影票房排行   253
14.7.1　案例分析   253
14.7.2　實(shí)現(xiàn)過(guò)程   254
14.8　實(shí)戰(zhàn)練習(xí)   255
第15章　事件處理
15.1　事件與事件處理概述   256
15.1.1　什么是事件   256
15.1.2　事件的調(diào)用   257
15.1.3　Event對(duì)象   258
15.2　表單相關(guān)事件   258
15.2.1　獲得焦點(diǎn)與失去焦點(diǎn)事件   258
【實(shí)例15.1】改變文本框的背景顏色   258
15.2.2　失去焦點(diǎn)內(nèi)容改變事件   259
【實(shí)例15.2】改變文本框的字體顏色   259
15.2.3　表單提交與重置事件   260
【實(shí)例15.3】驗(yàn)證提交表單中是否有空值   260
15.3　鼠標(biāo)鍵盤(pán)事件   261
15.3.1　鼠標(biāo)單擊事件   261
【實(shí)例15.4】動(dòng)態(tài)改變頁(yè)面的背景顏色   261
15.3.2　鼠標(biāo)按下和松開(kāi)事件   262
【實(shí)例15.5】用事件模擬超鏈接標(biāo)簽的功能   262
15.3.3　鼠標(biāo)移入移出事件   263
【實(shí)例15.6】動(dòng)態(tài)改變圖片的透明度   263
15.3.4　鼠標(biāo)移動(dòng)事件   263
15.3.5　鍵盤(pán)事件   264
15.4　頁(yè)面事件   265
15.4.1　頁(yè)面加載事件   265
【實(shí)例15.7】動(dòng)態(tài)改變圖片大小   265
15.4.2　頁(yè)面大小事件   266
15.5　綜合案例——二級(jí)聯(lián)動(dòng)菜單   266
15.5.1　案例分析   266
15.5.2　實(shí)現(xiàn)過(guò)程   267
15.6　實(shí)戰(zhàn)練習(xí)   268
第16章　DOM編程
16.1　DOM概述   269
16.2　獲取HTML元素   270
16.2.1　通過(guò)元素的id屬性獲取元素   271
【實(shí)例16.1】在頁(yè)面的指定位置顯示當(dāng)前日期   271
16.2.2　通過(guò)元素的標(biāo)簽名獲取元素   271
16.2.3　通過(guò)元素的類(lèi)名獲取元素   272
16.3　DOM對(duì)象節(jié)點(diǎn)屬性   272
16.4　節(jié)點(diǎn)的操作   273
16.4.1　創(chuàng)建節(jié)點(diǎn)   273
【實(shí)例16.2】補(bǔ)全古詩(shī)   273
16.4.2　插入節(jié)點(diǎn)   274
【實(shí)例16.3】向頁(yè)面中插入文本   274
16.4.3　復(fù)制節(jié)點(diǎn)   275
【實(shí)例16.4】復(fù)制下拉菜單   275
16.4.4　刪除節(jié)點(diǎn)   275
【實(shí)例16.5】動(dòng)態(tài)刪除選中的文本   276
16.4.5　替換節(jié)點(diǎn)   276
【實(shí)例16.6】選擇頭像   276
16.5　獲取或設(shè)置元素內(nèi)容   277
【實(shí)例16.7】顯示時(shí)間和問(wèn)候語(yǔ)   277
16.6　綜合案例——歌曲置頂和刪除   278
16.6.1　案例分析   278
16.6.2　實(shí)現(xiàn)過(guò)程   278
16.7　實(shí)戰(zhàn)練習(xí)   280
第17章　jQuery技術(shù)
17.1　jQuery下載與配置   281
17.1.1　下載jQuery   281
17.1.2　配置jQuery   282
17.2　jQuery選擇器   282
17.2.1　jQuery的工廠函數(shù)   282
17.2.2　基本選擇器   283
【實(shí)例17.1】篩選元素并添加新的樣式   283
17.2.3　層級(jí)選擇器   284
【實(shí)例17.2】為指定元素添加樣式   285
17.2.4　過(guò)濾選擇器   285
【實(shí)例17.3】實(shí)現(xiàn)帶表頭的雙色表格   286
17.2.5　屬性選擇器   288
17.2.6　表單選擇器   288
17.3　jQuery控制頁(yè)面   289
17.3.1　對(duì)元素內(nèi)容和值進(jìn)行操作   289
【實(shí)例17.4】為多行列表框設(shè)置并獲取值   291
17.3.2　對(duì)DOM節(jié)點(diǎn)進(jìn)行操作   291
【實(shí)例17.5】開(kāi)心小農(nóng)場(chǎng)   293
17.3.3　對(duì)元素屬性進(jìn)行操作   294
【實(shí)例17.6】改變圖片大小   295
17.3.4　對(duì)元素的CSS樣式進(jìn)行操作   295
【實(shí)例17.7】為圖片添加和去除邊框   296
17.4　jQuery的事件處理   297
17.4.1　頁(yè)面加載響應(yīng)事件   297
17.4.2　jQuery中的事件   298
17.4.3　事件綁定   299
17.4.4　模擬用戶操作   300
【實(shí)例17.8】切換表情圖片   300
17.5　jQuery的動(dòng)畫(huà)效果   301
17.5.1　基本的動(dòng)畫(huà)效果   301
【實(shí)例17.9】實(shí)現(xiàn)自動(dòng)隱藏式菜單   302
17.5.2　滑動(dòng)效果   303
17.5.3　自定義的動(dòng)畫(huà)效果   304
【實(shí)例17.10】實(shí)現(xiàn)幕簾的效果   304
17.6　綜合案例——驗(yàn)證用戶注冊(cè)信息   306
17.6.1　案例分析   306
17.6.2　實(shí)現(xiàn)過(guò)程   306
17.7　實(shí)戰(zhàn)練習(xí)   308
第18章　Vue.js框架
18.1　什么是Vue.js   309
18.2　Vue.js的安裝   310
18.3　Vue實(shí)例及選項(xiàng)   311
18.3.1　掛載元素   311
18.3.2　數(shù)據(jù)   311
18.3.3　方法   312
18.4　數(shù)據(jù)綁定   313
18.4.1　插值   313
【實(shí)例18.1】插入文本   313
【實(shí)例18.2】插入HTML內(nèi)容   313
18.4.2　過(guò)濾器   314
【實(shí)例18.3】截取新聞標(biāo)題   314
18.5　指令   315
18.5.1　v-bind指令   315
【實(shí)例18.4】設(shè)置文字樣式   315
18.5.2　v-on指令   316
【實(shí)例18.5】動(dòng)態(tài)改變圖片透明度   316
18.5.3　v-if指令   317
18.5.4　v-else指令   318
18.5.5　v-for指令   318
18.5.6　v-model指令   319
18.6　綜合案例——選擇職位   319
18.6.1　案例分析   319
18.6.2　實(shí)現(xiàn)過(guò)程   320
18.7　實(shí)戰(zhàn)練習(xí)   321
案例篇
第19章　游戲公園（HTML CSS JavaScript Bootstrap）
19.1　系統(tǒng)預(yù)覽   323
19.2　案例準(zhǔn)備   323
19.3　功能結(jié)構(gòu)   323
19.4　實(shí)現(xiàn)過(guò)程   324
19.4.1　“主頁(yè)”的設(shè)計(jì)與實(shí)現(xiàn)   324
19.4.2　“博客列表”的設(shè)計(jì)與實(shí)現(xiàn)   327
19.4.3　“博客詳情”的設(shè)計(jì)與實(shí)現(xiàn)   328
19.4.4　“關(guān)于我們”的設(shè)計(jì)與實(shí)現(xiàn)   329
第20章　咸魚(yú)簡(jiǎn)歷（HTML CSS jQuery Bootstrap）
20.1　系統(tǒng)預(yù)覽   333
20.2　案例準(zhǔn)備   335
20.3　功能結(jié)構(gòu)   335
20.4　實(shí)現(xiàn)流程   336
20.4.1　導(dǎo)航菜單   336
20.4.2　自我介紹   337
20.4.3　工作經(jīng)驗(yàn)   339
20.4.4　參與項(xiàng)目   340
20.4.5　聯(lián)系方式   340
第21章　抖音秀（HTML CSS JavaScript H5FullScreenPage插件)
21.1　系統(tǒng)預(yù)覽   342
21.2　案例準(zhǔn)備   342
21.3　功能結(jié)構(gòu)   343
21.4　實(shí)現(xiàn)過(guò)程   343
21.4.1　頁(yè)頭頁(yè)尾區(qū)   343
21.4.2　視頻功能區(qū)   345
21.4.3　掛件功能區(qū)   347
第22章　旅游信息網(wǎng)（HTML CSS jQuery jquery.faded插件）
22.1　案例效果預(yù)覽   349
22.2　案例準(zhǔn)備   351
22.3　功能結(jié)構(gòu)   351
22.4　實(shí)現(xiàn)過(guò)程   351
22.4.1　實(shí)現(xiàn)網(wǎng)站公共header和footer   351
22.4.2　網(wǎng)站主頁(yè)設(shè)計(jì)   354
22.4.3　“留下足跡”頁(yè)面設(shè)計(jì)   356
第23章　用戶注冊(cè)與登錄驗(yàn)證（HTML CSS JavaScript jQuery）
23.1　案例效果預(yù)覽   358
23.2　案例準(zhǔn)備   358
23.3　業(yè)務(wù)流程   359
23.4　實(shí)現(xiàn)過(guò)程   359
23.4.1　注冊(cè)頁(yè)面設(shè)計(jì)   359
23.4.2　用戶注冊(cè)驗(yàn)證   360
23.4.3　登錄頁(yè)面設(shè)計(jì)   361
23.4.4　驗(yàn)證滑塊設(shè)計(jì)   362
23.4.5　用戶登錄驗(yàn)證   363
第24章　計(jì)算器（HTML CSS JavaScript）
24.1　案例效果預(yù)覽   365
24.2　案例準(zhǔn)備   365
24.3　業(yè)務(wù)流程   366
24.4　實(shí)現(xiàn)過(guò)程   366
24.4.1　計(jì)算器頁(yè)面設(shè)計(jì)   366
24.4.2　基本計(jì)算功能的實(shí)現(xiàn)   368
24.4.3　特殊功能的實(shí)現(xiàn)   370
第25章　幸運(yùn)大抽獎(jiǎng)（HTML CSS JavaScript）
25.1　案例效果預(yù)覽   371
25.2　案例準(zhǔn)備   371
25.3　業(yè)務(wù)流程   372
25.4　實(shí)現(xiàn)過(guò)程   372
25.4.1　抽獎(jiǎng)頁(yè)面設(shè)計(jì)   372
25.4.2　抽獎(jiǎng)功能的實(shí)現(xiàn)   373
第26章　貪吃蛇小游戲（HTML CSS JavaScript）
26.1　案例效果預(yù)覽   377
26.2　案例準(zhǔn)備   378
26.3　業(yè)務(wù)流程   378
26.4　實(shí)現(xiàn)過(guò)程   378
26.4.1　游戲初始頁(yè)面設(shè)計(jì)   378
26.4.2　游戲操作   380
第27章　別踩白塊兒小游戲（HTML CSS JavaScript）
27.1　案例效果預(yù)覽   382
27.2　案例準(zhǔn)備   382
27.3　業(yè)務(wù)流程   383
27.4　實(shí)現(xiàn)過(guò)程   383
27.4.1　游戲初始頁(yè)面設(shè)計(jì)   383
27.4.2　游戲頁(yè)面設(shè)計(jì)   385
27.4.3　游戲結(jié)束與重新開(kāi)始游戲   386
第28章　手機(jī)端看圖猜詞小游戲（HTML CSS JavaScript jQuery）
28.1　案例效果預(yù)覽   388
28.2　案例準(zhǔn)備   388
28.3　業(yè)務(wù)流程   388
28.4　實(shí)現(xiàn)過(guò)程   389
28.4.1　構(gòu)建看圖猜詞頁(yè)面   389
28.4.2　看圖猜詞功能的實(shí)現(xiàn)   390
應(yīng)用篇
第29章　51購(gòu)商城
29.1　項(xiàng)目的設(shè)計(jì)思路   395
29.1.1　項(xiàng)目概述   395
29.1.2　頁(yè)面預(yù)覽   396
29.1.3　系統(tǒng)功能結(jié)構(gòu)   397
29.1.4　系統(tǒng)業(yè)務(wù)流程   397
29.1.5　文件夾組織結(jié)構(gòu)   398
29.2　主頁(yè)的設(shè)計(jì)與實(shí)現(xiàn)   398
29.2.1　主頁(yè)的設(shè)計(jì)   398
29.2.2　頂部區(qū)和底部區(qū)功能的實(shí)現(xiàn)   399
29.2.3　商品分類(lèi)導(dǎo)航功能的實(shí)現(xiàn)   401
29.2.4　輪播圖功能的實(shí)現(xiàn)   402
29.2.5　商品推薦功能的實(shí)現(xiàn)   404
29.2.6　適配移動(dòng)端的實(shí)現(xiàn)   405
29.3　商品列表頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)   406
29.3.1　商品列表頁(yè)面的設(shè)計(jì)   406
29.3.2　分類(lèi)選項(xiàng)功能的實(shí)現(xiàn)   406
29.3.3　商品列表區(qū)的實(shí)現(xiàn)   408
29.4　商品詳情頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)   409
29.4.1　商品詳情頁(yè)面的設(shè)計(jì)   410
29.4.2　圖片放大鏡效果的實(shí)現(xiàn)   411
29.4.3　商品概要功能的實(shí)現(xiàn)   412
29.4.4　商品評(píng)價(jià)功能的實(shí)現(xiàn)   414
29.4.5　猜你喜歡功能的實(shí)現(xiàn)   415
29.5　購(gòu)物車(chē)頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)   416
29.5.1　購(gòu)物車(chē)頁(yè)面的設(shè)計(jì)   417
29.5.2　購(gòu)物車(chē)頁(yè)面的實(shí)現(xiàn)   417
29.6　付款頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)   418
29.6.1　付款頁(yè)面的設(shè)計(jì)   418
29.6.2　付款頁(yè)面的實(shí)現(xiàn)   418
29.7　登錄注冊(cè)頁(yè)面的設(shè)計(jì)與實(shí)現(xiàn)   421
29.7.1　登錄注冊(cè)頁(yè)面的設(shè)計(jì)   421
29.7.2　登錄頁(yè)面的實(shí)現(xiàn)   421
29.7.3　注冊(cè)頁(yè)面的實(shí)現(xiàn)   422
第30章　365影視網(wǎng)站設(shè)計(jì)
30.1　系統(tǒng)分析   425
30.2　系統(tǒng)設(shè)計(jì)   425
30.2.1　系統(tǒng)目標(biāo)   425
30.2.2　系統(tǒng)功能結(jié)構(gòu)   426
30.2.3　系統(tǒng)業(yè)務(wù)流程   426
30.2.4　網(wǎng)頁(yè)預(yù)覽   426
30.3　系統(tǒng)開(kāi)發(fā)   427
30.3.1　開(kāi)發(fā)環(huán)境   427
30.3.2　文件夾組織結(jié)構(gòu)   429
30.4　關(guān)鍵技術(shù)   430
30.4.1　JavaScript腳本技術(shù)   430
30.4.2　jQuery技術(shù)   431
30.4.3　jQuery中的Ajax請(qǐng)求   432
30.5　首頁(yè)技術(shù)實(shí)現(xiàn)   432
30.5.1　JavaScript實(shí)現(xiàn)導(dǎo)航菜單   432
30.5.2　JavaScript實(shí)現(xiàn)圖片的輪換效果   434
30.5.3　Ajax實(shí)現(xiàn)熱門(mén)專(zhuān)題頁(yè)面   435
30.5.4　JavaScript實(shí)現(xiàn)電影圖片不間斷滾動(dòng)   436
30.5.5　JavaScript實(shí)現(xiàn)浮動(dòng)窗口   438
30.5.6　jQuery實(shí)現(xiàn)滑動(dòng)門(mén)效果   438
30.5.7　jQuery實(shí)現(xiàn)向上間斷滾動(dòng)效果   441
30.6　查看影片詳情頁(yè)面   442