HTML5網(wǎng)頁前端設(shè)計實戰(zhàn)

目 錄
第1章 HTML+CSS基礎(chǔ)項目 1
1.1 導(dǎo)航欄菜單的設(shè)計與實現(xiàn) 1
1.1.1 界面設(shè)計 1
1.1.2 鼠標事件 4
1.1.3 完整代碼展示 5
1.2 商務(wù)風(fēng)格表格的設(shè)計與實現(xiàn) 6
1.2.1 創(chuàng)建表格 6
1.2.2 樣式設(shè)計 7
1.2.3 完整代碼展示 11
第2章 JavaScript基礎(chǔ)項目 13
2.1 電子時鐘的設(shè)計與實現(xiàn) 13
2.1.1 界面設(shè)計 13
2.1.2 時鐘動態(tài)效果的實現(xiàn) 16
2.1.3 完整代碼展示 18
2.2 電子日歷的設(shè)計與實現(xiàn) 19
2.2.1 界面設(shè)計 19
2.2.2 顯示狀態(tài)欄中的年份和月份 22
2.2.3 顯示當前月份的所有日期 23
2.2.4 按鈕控件功能的實現(xiàn) 26
2.2.5 完整代碼展示 27
第3章 HTML5拖放API項目 31
3.1 仿回收站效果的設(shè)計與實現(xiàn) 31
3.1.1 界面設(shè)計 31
3.1.2 文件拖曳與回收功能的實現(xiàn) 34
3.1.3 完整代碼展示 37
3.2 圖片相框展示的設(shè)計與實現(xiàn) 39
3.2.1 界面設(shè)計 39
3.2.2 相框自動生成功能的實現(xiàn) 41
3.2.3 完整代碼展示 46
第4章 HTML5表單API項目 49
4.1 用戶注冊頁面的設(shè)計與實現(xiàn) 49
4.1.1 界面設(shè)計 50
4.1.2 表單設(shè)計 51
4.1.3 提示與驗證功能的實現(xiàn) 54
4.1.4 完整代碼展示 58
4.2 問卷調(diào)查頁面的設(shè)計與實現(xiàn) 60
4.2.1 界面設(shè)計 61
4.2.2 表單設(shè)計 62
4.2.3 驗證功能的實現(xiàn) 69
4.2.4 完整代碼展示 73
第5章 HTML5畫布API項目 79
5.1 手繪時鐘的設(shè)計與實現(xiàn) 79
5.1.1 界面設(shè)計 79
5.1.2 實時更新效果 87
5.1.3 完整代碼展示 88
5.2 拼圖游戲的設(shè)計與實現(xiàn) 91
5.2.1 界面設(shè)計 91
5.2.2 實現(xiàn)游戲邏輯 95
5.2.3 游戲成功與重新開始 102
5.2.4 完整代碼展示 105
第6章 HTML5媒體API項目 111
6.1 音樂播放器的設(shè)計與實現(xiàn) 111
6.1.1 界面設(shè)計 111
6.1.2 媒體文件的載入 115
6.1.3 控件功能的實現(xiàn) 115
6.1.4 完整代碼展示 119
6.2 在線教學(xué)視頻的設(shè)計與實現(xiàn) 122
6.2.1 界面設(shè)計 122
6.2.2 視頻文件的載入與播放 127
6.2.3 視頻時間跳轉(zhuǎn)的實現(xiàn) 128
6.2.4 完整代碼展示 130
第7章 HTML5地理定位API項目 133
7.1 運動數(shù)據(jù)記錄頁面的設(shè)計與實現(xiàn) 133
7.1.1 界面設(shè)計 134
7.1.2 實時監(jiān)控地理定位 135
7.1.3 開始與結(jié)束按鈕的切換 136
7.1.4 計算與顯示距離 138
7.1.5 完整代碼展示 140
7.2 運動軌跡繪制頁面的設(shè)計與實現(xiàn) 144
7.2.1 界面設(shè)計 144
7.2.2 開始與結(jié)束按鈕的切換 146
7.2.3 繪制地圖與運動軌跡 146
7.2.4 計時功能的實現(xiàn) 151
7.2.5 完整代碼展示 153
第8章 HTML5 Web存儲API項目 157
8.1 基于Web存儲技術(shù)的網(wǎng)頁主題設(shè)置 157
8.1.1 界面設(shè)計 157
8.1.2 重置網(wǎng)頁主題顏色的實現(xiàn) 160
8.1.3 加載網(wǎng)頁主題顏色的實現(xiàn) 162
8.1.4 完整代碼展示 163
8.2 基于Web存儲技術(shù)的網(wǎng)頁日志本 165
8.2.1 界面設(shè)計 165
8.2.2 讀取日志功能的實現(xiàn) 168
8.2.3 保存日志功能的實現(xiàn) 169
8.2.4 刪除日志功能的實現(xiàn) 170
8.2.5 完整代碼展示 171
第9章 CSS3基礎(chǔ)項目 175
9.1 使用CSS3文本陰影制作特殊字體效果 175
9.1.1 整體設(shè)計 175
9.1.2 火焰文字效果的實現(xiàn) 177
9.1.3 霓虹文字效果的實現(xiàn) 178
9.1.4 完整代碼展示 179
9.2 使用CSS3動畫制作響應(yīng)式放大菜單 180
9.2.1 整體設(shè)計 180
9.2.2 動畫效果的實現(xiàn) 182
9.2.3 完整代碼展示 183
第10章 綜合應(yīng)用設(shè)計實例 185
10.1 基于HTML5的貪吃蛇游戲的設(shè)計與實現(xiàn) 185
　10.1.1 貪吃蛇游戲簡介 185
　10.1.2 界面布局設(shè)計 185
　10.1.3 數(shù)據(jù)模型設(shè)計 190
　10.1.4 游戲的邏輯實現(xiàn) 192
　10.1.5 完整代碼展示 203
10.2 實戰(zhàn)項目——企業(yè)文化用品展示網(wǎng)頁的開發(fā) 207
　10.2.1 項目簡介 207
　10.2.2 整體布局設(shè)計 208
　10.2.3 頁眉和頁腳的實現(xiàn) 210
　10.2.4 主體內(nèi)容的實現(xiàn) 212
　10.2.5 完整代碼展示 225