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