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

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