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

目 錄
第1章 HTML+CSS基礎項目 1
1.1 導航欄菜單的設計與實現(xiàn) 1
1.1.1 界面設計 1
1.1.2 鼠標事件 4
1.1.3 完整代碼展示 5
1.2 商務風格表格的設計與實現(xiàn) 6
1.2.1 創(chuàng)建表格 6
1.2.2 樣式設計 7
1.2.3 完整代碼展示 11
第2章 JavaScript基礎項目 13
2.1 電子時鐘的設計與實現(xiàn) 13
2.1.1 界面設計 13
2.1.2 時鐘動態(tài)效果的實現(xiàn) 16
2.1.3 完整代碼展示 18
2.2 電子日歷的設計與實現(xiàn) 19
2.2.1 界面設計 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 仿回收站效果的設計與實現(xiàn) 31
3.1.1 界面設計 31
3.1.2 文件拖曳與回收功能的實現(xiàn) 34
3.1.3 完整代碼展示 37
3.2 圖片相框展示的設計與實現(xiàn) 39
3.2.1 界面設計 39
3.2.2 相框自動生成功能的實現(xiàn) 41
3.2.3 完整代碼展示 46
第4章 HTML5表單API項目 49
4.1 用戶注冊頁面的設計與實現(xiàn) 49
4.1.1 界面設計 50
4.1.2 表單設計 51
4.1.3 提示與驗證功能的實現(xiàn) 54
4.1.4 完整代碼展示 58
4.2 問卷調(diào)查頁面的設計與實現(xiàn) 60
4.2.1 界面設計 61
4.2.2 表單設計 62
4.2.3 驗證功能的實現(xiàn) 69
4.2.4 完整代碼展示 73
第5章 HTML5畫布API項目 79
5.1 手繪時鐘的設計與實現(xiàn) 79
5.1.1 界面設計 79
5.1.2 實時更新效果 87
5.1.3 完整代碼展示 88
5.2 拼圖游戲的設計與實現(xiàn) 91
5.2.1 界面設計 91
5.2.2 實現(xiàn)游戲邏輯 95
5.2.3 游戲成功與重新開始 102
5.2.4 完整代碼展示 105
第6章 HTML5媒體API項目 111
6.1 音樂播放器的設計與實現(xiàn) 111
6.1.1 界面設計 111
6.1.2 媒體文件的載入 115
6.1.3 控件功能的實現(xiàn) 115
6.1.4 完整代碼展示 119
6.2 在線教學視頻的設計與實現(xiàn) 122
6.2.1 界面設計 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ù)記錄頁面的設計與實現(xiàn) 133
7.1.1 界面設計 134
7.1.2 實時監(jiān)控地理定位 135
7.1.3 開始與結(jié)束按鈕的切換 136
7.1.4 計算與顯示距離 138
7.1.5 完整代碼展示 140
7.2 運動軌跡繪制頁面的設計與實現(xiàn) 144
7.2.1 界面設計 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)頁主題設置 157
8.1.1 界面設計 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 界面設計 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基礎項目 175
9.1 使用CSS3文本陰影制作特殊字體效果 175
9.1.1 整體設計 175
9.1.2 火焰文字效果的實現(xiàn) 177
9.1.3 霓虹文字效果的實現(xiàn) 178
9.1.4 完整代碼展示 179
9.2 使用CSS3動畫制作響應式放大菜單 180
9.2.1 整體設計 180
9.2.2 動畫效果的實現(xiàn) 182
9.2.3 完整代碼展示 183
第10章 綜合應用設計實例 185
10.1 基于HTML5的貪吃蛇游戲的設計與實現(xiàn) 185
　10.1.1 貪吃蛇游戲簡介 185
　10.1.2 界面布局設計 185
　10.1.3 數(shù)據(jù)模型設計 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 整體布局設計 208
　10.2.3 頁眉和頁腳的實現(xiàn) 210
　10.2.4 主體內(nèi)容的實現(xiàn) 212
　10.2.5 完整代碼展示 225