HTML5 CSS3 jQuery Mobile APP與移動網(wǎng)站設(shè)計從入門到精通

目錄
第 1章　從HTML到HTML5　15
1．1　HTML基礎(chǔ)　15
1．1．1　HTML概述　15
1．1．2　HTML特性　16
1．1．3　HTML文檔結(jié)構(gòu)　16
1．1．4　HTML的基本語法　17
1．1．5　HTML編寫注意事項　17
1．2　HTML5基礎(chǔ)　18
1．2．1　HTML5概述　18
1．2．2　 HTML5文檔結(jié)構(gòu)　18
1．2．3　 HTML5的優(yōu)勢　19
1．2．4　HTML5精簡的頭部　20
1．3　HTML文件的編寫方式　20
1．3．1　使用記事本編寫　20
實戰(zhàn)　使用記事本制作HTML頁面　20
1．3．2　使用Dreamweaver編寫　22
實戰(zhàn)　使用Dreamweaver制作HTML頁面　23
1．4　HTML5中的標簽　25
1．5　關(guān)于移動Web應(yīng)用　28
1．5．1　移動Web應(yīng)用的發(fā)展　28
1．5．2　基于Web的應(yīng)用開發(fā)　28
1．5．3　基于HTML5的移動應(yīng)用　29
1．5．4　移動應(yīng)用開發(fā)框架　29
1．6　本章小結(jié)　30
第 2章　HTML5文字與段落標簽　31
2．1　設(shè)置文字效果　31
2．1．1　文字樣式標簽　31
實戰(zhàn)　使用標簽設(shè)置網(wǎng)頁文字效果　33
2．1．2　文字加粗和標簽　34
2．1．3　文字傾斜和標簽　34
2．1．4　文字下劃線#標簽　34
實戰(zhàn)　為文字添加加粗、傾斜和下劃線修飾　35
2．1．5　其他文字修飾標簽　36
實戰(zhàn)　為文字添加上標和刪除線　36
2．2　設(shè)置段落效果　37
2．2．1　文本分段標簽　37
2．2．2　文本分行
標簽　37
實戰(zhàn)　為網(wǎng)頁中的文本進行分段和分行處理　38
2．2．3　標簽至標簽　39
實戰(zhàn)　設(shè)置網(wǎng)頁文本標題　39
2．2．4　水平線標簽　40
實戰(zhàn)　在網(wǎng)頁中插入水平線　40
2．2．5　文本對齊設(shè)置　41
實戰(zhàn)　設(shè)置網(wǎng)頁文本的對齊　41
2．3　創(chuàng)建列表　42
2．3．1　使用標簽創(chuàng)建項目列表　42
實戰(zhàn)　制作新聞列表　43
2．3．2　使用標簽創(chuàng)建編號列表　43
實戰(zhàn)　制作編號有序列表　44
2．3．3　使用標簽創(chuàng)建定義列表　44
實戰(zhàn)　制作復(fù)雜的新聞列表　45
2．4　本章小結(jié)　46
第3章　HTML5文檔結(jié)構(gòu)標簽　47
3．1　認識HTML5文檔結(jié)構(gòu)　47
3．2　HTML5頁面主體內(nèi)容標簽　49
3．2．1　標識文章標簽　49
3．2．2　標識章節(jié)標簽　51
3．2．3　標識導(dǎo)航標簽　53
3．2．4　標識輔助內(nèi)容標簽　54
3．2．5　標識文章發(fā)布日期標簽　55
3．3　頁面語義模塊標簽　55
3．3．1　頁眉標簽　55
3．3．2　標題分組標簽　56
3．3．3　頁腳標簽　57
3．3．4　聯(lián)系信息標簽　58
3．4　制作文章頁面　58
實戰(zhàn)　制作設(shè)計網(wǎng)站首頁面　59
3．5　本章小結(jié)　64
第4章　HTML5圖像與超鏈接標簽　65
4．1　了解網(wǎng)頁中的圖像格式　65
4．1．1　網(wǎng)頁常用圖像格式　65
4．1．2　選擇合適的圖像格式　66
4．2　插入圖像并設(shè)置圖像屬性　67
4．2．1　圖像標簽　67
實戰(zhàn)　在網(wǎng)頁中插入圖像　67
4．2．2　圖像屬性設(shè)置　68
實戰(zhàn)　制作圖文混排頁面　69
4．3　創(chuàng)建超鏈接　70
4．3．1　使用標簽創(chuàng)建超鏈接　70
4．3．2　超鏈接打開方式target屬性　70
4．3．3　相對鏈接和絕對鏈接　70
實戰(zhàn)　為文字和圖像設(shè)置超鏈接　71
4．4　創(chuàng)建特殊鏈接　72
4．4．1　空鏈接　72
4．4．2　文件下載鏈接　72
4．4．3　錨點鏈接　72
4．4．4　腳本鏈接　73
4．4．5　E-mail鏈接　73
實戰(zhàn)　在網(wǎng)頁中創(chuàng)建特殊超鏈接　73
4．5　本章小結(jié)　75
第5章　使用HTML5中的表單元素　76
5．1　關(guān)于表單　76
5．1．1　表單域標簽　76
5．1．2　標簽屬性設(shè)置　77
5．2　傳統(tǒng)表單元素　78
5．2．1　文本域　78
5．2．2　密碼域　79
5．2．3　文本區(qū)域　79
5．2．4　隱藏域　79
5．2．5　復(fù)選框　79
5．2．6　單選按鈕　80
5．2．7　選擇域　80
5．2．8　文件域　80
5．2．9　按鈕　80
5．2．10　圖像域　81
實戰(zhàn)　制作網(wǎng)站登錄表單　81
5．3　關(guān)于HTML5新增表單元素　84
5．3．1　HTML5表單的優(yōu)勢　85
5．3．2　瀏覽器對HTML5表單的支持情況　85
5．3．3　新增表單輸入類型　85
實戰(zhàn)　制作留言表單頁面　88
5．3．4　新增其他表單元素　90
5．4　HTML5新增表單屬性　91
5．4．1　form屬性　91
5．4．2　formaction屬性　91
5．4．3　formmethod、formenctype、formnovalidate、formtarget屬性　91
5．4．4　placeholder屬性　91
實戰(zhàn)　為表單元素設(shè)置默認提示內(nèi)容　92
5．4．5　autofocus屬性　93
5．4．6　autocomplete屬性　93
5．5　HTML5提供的表單驗證屬性　93
5．5．1　required屬性　93
5．5．2　pattern屬性　93
5．5．3　min、max和step屬性　94
5．5．4　novalidate屬性　94
實戰(zhàn)　驗證網(wǎng)頁中的表單元素　94
5．6　本章小結(jié)　95
第6章　使用HTML5畫布元素　96
6．1　HTML5新增canvas元素　96
6．1．1　了解canvas元素　96
6．1．2　在網(wǎng)頁中插入canvas元素　97
6．1．3　如何使用canvas元素實現(xiàn)繪圖　97
6．2　繪制基本圖形　98
6．2．1　繪制直線　98
實戰(zhàn)　在網(wǎng)頁中繪制直線　99
6．2．2　繪制矩形　100
實戰(zhàn)　在網(wǎng)頁中繪制矩形　101
6．2．3　繪制圓形　102
實戰(zhàn)　在網(wǎng)頁中繪制圓形　103
6．2．4　繪制三角形　104
實戰(zhàn)　在網(wǎng)頁中繪制三角形　104
6．2．5　繪制曲線　105
實戰(zhàn)　在網(wǎng)頁中繪制曲線　107
6．2．6　清除圖形　108
實戰(zhàn)　清除使用canvas元素所繪制的部分圖形　108
6．3　繪制文本　109
6．3．1　使用文本　109
6．3．2　獲取文字寬度　110
實戰(zhàn)　在網(wǎng)頁中繪制文字并獲取文字寬度　110
6．4　圖形的組合與裁切　112
6．4．1　圖形組合　112
6．4．2　使用圖像　113
實戰(zhàn)　使用canvas元素在網(wǎng)頁中繪制圖像　114
6．4．3　使用圖像模式　115
實戰(zhàn)　設(shè)置圖像平鋪效果　115
6．4．4　裁切路徑　116
實戰(zhàn)　在網(wǎng)頁中實現(xiàn)圓形裁切圖像效果　117
6．5　圖形顏色與樣式設(shè)置　118
6．5．1　繪制線性漸變　118
實戰(zhàn)　在網(wǎng)頁中繪制矩形并填充線性漸變　119
6．5．2　繪制徑向漸變　120
實戰(zhàn)　在網(wǎng)頁中繪制圓形并填充徑向漸變　120
6．5．3　創(chuàng)建對象陰影　121
實戰(zhàn)　為圖形和文字添加陰影效果　122
6．6　本章小結(jié)　123
第7章　HTML5音頻與視頻標簽　124
7．1　HTML5多媒體基礎(chǔ)　124
7．1．1　在線多媒體的發(fā)展　124
7．1．2　HTML5音頻和視頻優(yōu)勢　125
7．1．3　HTML5音頻和視頻的不足　125
7．1．4　檢查瀏覽器是否支持HTML5音頻和視頻　126
7．2　使用HTML5音頻　126
7．2．1　標簽所支持的音頻格式　126
7．2．2　使用標簽　126
實戰(zhàn)　在網(wǎng)頁中嵌入音頻播放　127
7．3　使用HTML5視頻　127
7．3．1　標簽所支持的視頻格式　128
7．3．2　使用標簽　128
實戰(zhàn)　在網(wǎng)頁中嵌入視頻播放　128
7．3．3　使用標簽　129
7．4　與標簽的屬性　130
7．4．1　標簽屬性　130
7．4．2　元素的接口屬性　131
實戰(zhàn)　實現(xiàn)網(wǎng)頁中視頻的快進　133
7．5　與標簽的方法和事件　134
7．5．1　接口方法　134
實戰(zhàn)　控制視頻的播放與暫?！?34
7．5．2　接口事件　135
7．5．3　接口事件的使用方法　137
7．5．4　自定義視頻播放控制組件　137
實戰(zhàn)　自定義視頻播放控制組件　137
7．6　本章小結(jié)　141
第8章　CSS樣式的發(fā)展與選擇器　142
8．1　CSS樣式的發(fā)展　142
8．1．1　使用CSS樣式的優(yōu)勢　142
8．1．2　CSS1與CSS2概述　143
8．1．3　全新的CSS3　143
8．1．4　瀏覽器對CSS3的支持情況　143
8．2　CSS樣式語法　144
8．2．1　CSS樣式基本語法　144
8．2．2　CSS樣式規(guī)則構(gòu)成　145
8．2．3　應(yīng)用CSS樣式的4種方式　145
實戰(zhàn)　創(chuàng)建并鏈接外部CSS樣式表文件　147
8．3　CSS選擇器　149
8．3．1　通配選擇器　149
8．3．2　標簽選擇器　150
實戰(zhàn)　創(chuàng)建通配選擇器和標簽選擇器　150
8．3．3　ID選擇器　151
8．3．4　類選擇器　152
實戰(zhàn)　創(chuàng)建ID選擇器和類選擇器　152
8．3．5　偽類和偽對象選擇器　154
實戰(zhàn)　創(chuàng)建超鏈接偽類選擇器　155
8．3．6　群組選擇器　156
8．3．7　派生選擇器　156
實戰(zhàn)　創(chuàng)建派生選擇器　157
8．4　CSS3新增選擇器　158
8．4．1　屬性選擇器　158
實戰(zhàn)　在網(wǎng)頁中使用屬性選擇器　159
8．4．2　結(jié)構(gòu)偽類選擇器　160
8．4．3　UI元素狀態(tài)偽類選擇器　160
8．4．4　偽元素選擇器　161
實戰(zhàn)　在網(wǎng)頁中使用偽元素選擇器　161
8．5　本章小結(jié)　162
第9章　設(shè)置文字與段落樣式　163
9．1　文字樣式　163
9．1．1　字體—font-family屬性　163
9．1．2　字體大小—font-size屬性　164
9．1．3　字體顏色—color屬性　164
實戰(zhàn)　設(shè)置網(wǎng)頁文字基本效果　164
9．1．4　字體粗細—font-weight屬性　166
9．1．5　字體樣式—font-style屬性　166
實戰(zhàn)　設(shè)置網(wǎng)頁文字的加粗和傾斜效果　166
9．1．6　英文字體大小寫—text-transform屬性　167
實戰(zhàn)　設(shè)置網(wǎng)頁中英文字體大小寫　168
9．1．7　文字修飾效果—text-decoration屬性　169
實戰(zhàn)　為網(wǎng)頁文字添加修飾　169
9．1．8　字符間距—letter-spacing屬性　170
實戰(zhàn)　設(shè)置中文字符間距　170
9．2　CSS3新增文本樣式屬性　171
9．2．1　文本溢出處理—text-overflow屬性　171
實戰(zhàn)　控制文本溢出效果　171
9．2．2　文本換行—word-wrap和word-break屬性　172
實戰(zhàn)　控制英文內(nèi)容強制換行　173
9．2．3　文字陰影—text-shadow屬性　174
實戰(zhàn)　為網(wǎng)頁文字添加陰影效果　174
9．2．4　服務(wù)器端字體—@font-face規(guī)則　175
實戰(zhàn)　在網(wǎng)頁中實現(xiàn)特殊字體效果　175
9．3　段落樣式　177
9．3．1　行間距—line-height屬性　177
9．3．2　段落首行縮進—text-indent屬性　177
實戰(zhàn)　美化網(wǎng)頁中的段落文字　177
9．3．3　水平對齊方式—text-align屬性　178
實戰(zhàn)　設(shè)置文本水平對齊　179
9．3．4　垂直對齊方式—vertical-align屬性　179
實戰(zhàn)　設(shè)置文本垂直對齊　180
9．4　列表樣式　181
9．4．1　列表符號—list-style-type屬性　181
實戰(zhàn)　設(shè)置新聞列表效果　182
9．4．2　自定義列表符號—list-style-image屬性　183
實戰(zhàn)　自定義新聞列表符號　183
9．4．3　定義列表樣式　184
實戰(zhàn)　設(shè)置復(fù)雜新聞列表效果　184
9．5　本章小結(jié)　185
第 10章　設(shè)置背景樣式　186
10．1　背景顏色—background-color屬性　186
實戰(zhàn)　為網(wǎng)頁元素設(shè)置背景顏色　187
10．2　CSS3新增顏色設(shè)置　187
10．2．1　RGBA顏色值　187
實戰(zhàn)　使用RGBA方式設(shè)置背景顏色　188
10．2．2　HSL顏色值　188
10．2．3　HSLA顏色值　189
實戰(zhàn)　使用HSLA方式設(shè)置背景顏色　189
10．2．4　元素不透明度—opacity
屬性　190
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素的半透明效果　190
10．2．5　transparent顏色值　191
10．3　CSS3新增漸變背景　191
10．3．1　線性漸變背景　191
實戰(zhàn)　為網(wǎng)頁設(shè)置線性漸變背景顏色　192
10．3．2　徑向漸變背景　194
實戰(zhàn)　為網(wǎng)頁設(shè)置徑向漸變背景顏色　195
10．4　背景圖像樣式　195
10．4．1　背景圖像—background-image屬性　196
10．4．2　背景圖像平鋪方式—background-repeat屬性　196
實戰(zhàn)　為網(wǎng)頁設(shè)置背景圖像　196
10．4．3　背景圖像位置—background-
position屬性　198
實戰(zhàn)　定位網(wǎng)頁中的背景圖像　199
10．4．4　背景圖像固定—background-attachment屬性　200
實戰(zhàn)　固定網(wǎng)頁中的背景圖像　200
10．5　CSS3新增背景屬性　201
10．5．1　多背景圖像—background屬性　201
實戰(zhàn)　為網(wǎng)頁設(shè)置多個背景圖像　201
10．5．2　背景圖像大小—background-size屬性　202
實戰(zhàn)　控制背景圖像的大小　202
10．5．3　背景圖像原點—background-origin屬性　204
實戰(zhàn)　控制背景圖像開始顯示的原點位置　204
10．5．4　背景圖像顯示區(qū)域—background-clip屬性　205
實戰(zhàn)　控制背景圖像的顯示區(qū)域　205
10．6　本章小結(jié)　206
第 11章　設(shè)置超鏈接和邊框樣式　207
11．1　超鏈接樣式偽類　207
11．1．1　：link偽類　207
11．1．2?。篽over偽類 　208
11．1．3?。篴ctive偽類　208
11．1．4?。簐isited偽類　209
實戰(zhàn)　設(shè)置網(wǎng)頁中超鏈接文字效果　209
11．1．5　按鈕式超鏈接　212
實戰(zhàn)　制作網(wǎng)站導(dǎo)航菜單　212
11．2　鼠標指針樣式　213
11．2．1　鼠標指針效果—cursor屬性　214
11．2．2　設(shè)置網(wǎng)頁中鼠標效果　214
實戰(zhàn)　在網(wǎng)頁中實現(xiàn)多種鼠標指針效果　214
11．3　邊框樣式　215
11．3．1　邊框?qū)挾取猙order-width屬性　215
11．3．2　邊框樣式—border-style屬性　216
11．3．3　邊框顏色—border-color屬性　216
實戰(zhàn)　為網(wǎng)頁元素添加邊框效果　216
11．4　CSS3新增邊框?qū)傩浴?18
11．4．1　多邊框顏色—border-color屬性　218
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素多色彩邊框效果　218
11．4．2　圖像邊框—border-image屬性　219
實戰(zhàn)　為網(wǎng)頁元素添加圖像邊框效果　219
11．4．3　圓角邊框—border-radius屬性　220
實戰(zhàn)　在網(wǎng)頁中實現(xiàn)圓角邊框效果　220
11．5　本章小結(jié)　221
第 12章　設(shè)置元素的定位與布局屬性　222
12．1　元素定位樣式　222
12．1．1　position屬性　222
12．1．2　相對定位　223
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素的疊加顯示　223
12．1．3　絕對定位　224
實戰(zhàn)　網(wǎng)頁元素固定在右側(cè)顯示　224
12．1．4　固定定位　225
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素顯示在固定的位置　225
12．1．5　浮動定位—float屬性　226
實戰(zhàn)　制作順序排列的圖像列表　227
12．2　CSS3新增界面設(shè)計屬性　229
12．2．1　改變元素尺寸—resize屬性　229
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素尺寸可任意縮放　229
12．2．2　輪廓外邊框—outline屬性　230
實戰(zhàn)　為網(wǎng)頁元素添加輪廓外邊框　231
12．2．3　偽裝元素—appearance屬性　232
實戰(zhàn)　將超鏈接文字偽裝成按鈕　233
12．2．4　賦予內(nèi)容—content屬性　233
實戰(zhàn)　為網(wǎng)頁元素賦予內(nèi)容　234
12．3　CSS3新增多列布局屬性　235
12．3．1　多列布局—columns屬性　235
實戰(zhàn)　快速將網(wǎng)頁內(nèi)容分為多列　235
12．3．2　列寬度—column-width屬性　236
12．3．3　列數(shù)—column-count屬性　236
12．3．4　列間距—column-gap屬性　236
12．3．5　列分欄線—column-rule屬性　237
12．3．6　橫跨所有列—column-span屬性　237
實戰(zhàn)　實現(xiàn)網(wǎng)頁內(nèi)容的分欄顯示效果　237
12．4　本章小結(jié)　239
第 13章　CSS3盒模型　240
13．1　傳統(tǒng)CSS盒模型　240
13．1．1　什么是CSS盒模型　240
13．1．2　CSS盒模型要點　241
13．1．3　邊距—margin屬性　241
13．1．4　邊框—border屬性　242
13．1．5　填充—padding屬性　242
實戰(zhàn)　設(shè)置網(wǎng)頁元素盒模型　242
13．2　CSS3彈性盒模型　244
13．2．1　開啟彈性盒模型　245
13．2．2　布局方向—box-orient屬性　246
13．2．3　布局順序—box-direction屬性　247
13．2．4　元素位置—box-ordinal-group屬性　248
13．2．5　空間分配—box-flex屬性　250
13．2．6　對齊方式—box-pack和box-align屬性　251
13．2．7　實現(xiàn)網(wǎng)頁元素水平和垂直居中對齊　251
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素水平和垂直居中對齊　251
13．2．8　實現(xiàn)網(wǎng)頁元素底部對齊　253
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素底部對齊　253
13．3　增強的CSS3盒模型　254
13．3．1　元素陰影—box-shadow屬性　254
實戰(zhàn)　為網(wǎng)頁元素添加陰影效果　254
13．3．2　元素尺寸大小—box-sizing屬性　255
13．3．3　元素溢出處理—overflow-x和overflow-y屬性　256
實戰(zhàn)　設(shè)置內(nèi)容溢出處理方式　256
13．4　本章小結(jié)　257
第 14章　CSS3動畫效果　258
14．1　CSS3變換效果　258
14．1．1　transform屬性　258
14．1．2　旋轉(zhuǎn)　259
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素的旋轉(zhuǎn)　259
14．1．3　縮放　260
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素的縮放和翻轉(zhuǎn)　260
14．1．4　移動　261
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素的移動　262
14．1．5　傾斜　263
實戰(zhàn)　實現(xiàn)網(wǎng)頁元素的傾斜效果　263
14．1．6　矩陣變形　264
14．1．7　定義變形中心點　264
實戰(zhàn)　設(shè)置網(wǎng)頁元素的變形中心點　265
14．1．8　同時使用多個變形函數(shù)　266
實戰(zhàn)　為網(wǎng)頁元素同時應(yīng)用多個變形效果　266
14．2　CSS3變換過渡效果　267
14．2．1　transition屬性　267
14．2．2　過渡效果—transition-property屬性　268
14．2．3　過渡時間—transition-duration屬性　268
14．2．4　過渡延遲時間—transition-delay屬性　268
14．2．5　過渡方式—transition-timing-function屬性　268
實戰(zhàn)　設(shè)置網(wǎng)頁元素的變換過渡動畫效果　269
14．2．6　制作網(wǎng)頁圖片交互特效　271
實戰(zhàn)　制作網(wǎng)頁圖片交互特效　271
14．3　CSS3動畫效果　273
14．3．1　關(guān)鍵幀動畫—@keyframes規(guī)則　274
14．3．2　animation屬性—實現(xiàn)元素動畫效果　274
實戰(zhàn)　制作圖片移動并旋轉(zhuǎn)的關(guān)鍵幀動畫　276
14．4　本章小結(jié)　277
第 15章　jQuery和jQuery Mobile基礎(chǔ)　278
15．1　了解jQuery　278
15．1．1　jQuery概述　278
15．1．2　引用jQuery函數(shù)庫的兩種方法　279
15．1．3　jQuery基本語法　280
15．1．4　認識jQuery選擇器　280
15．1．5　使用jQuery設(shè)置CSS樣式屬性　281
實戰(zhàn)　使用jQuery改變列表第 一行效果　281
15．2　了解jQuery Mobile　282
15．2．1　jQuery Mobile概述　282
15．2．2　jQuery Mobile功能特點　283
15．2．3　jQuery Mobile的工作原理　283
15．3　jQuery Mobile操作流程　284
15．3．1　下載移動設(shè)備模擬器　284
15．3．2　加載jQuery Mobile函數(shù)庫　285
15．3．3　創(chuàng)建jQuery Mobile頁面　286
實戰(zhàn)　制作第 一個jQuery Mobile頁面　286
15．3．4　jQuery Mobile頁面的基本架構(gòu)　288
15．4　本章小結(jié)　289
第 16章　認識并創(chuàng)建jQuery Mobile頁面　290
16．1　認識jQuery Mobile頁面　290
16．1．1　多容器jQuery Mobile頁面　290
16．1．2　jQuery Mobile頁面鏈接　291
實戰(zhàn)　創(chuàng)建jQuery Mobile頁面多容器之間鏈接　291
16．1．3　鏈接外部jQuery Mobile頁面　293
實戰(zhàn)　鏈接外部jQuery Mobile頁面　293
16．1．4　實現(xiàn)彈出對話框　294
實戰(zhàn)　在jQuery Mobile頁面中實現(xiàn)彈出對話框　295
16．2　jQuery Mobile頁面頭部欄　296
16．2．1　頭部欄基本結(jié)構(gòu)　296
16．2．2　在頭部欄中添加后退按鈕　296
16．2．3　在頭部欄中添加其他功能按鈕　298
實戰(zhàn)　在頭部欄中添加按鈕實現(xiàn)頁面跳轉(zhuǎn)　298
16．2．4　設(shè)置按鈕位置　300
16．3　jQuery Mobile頁面導(dǎo)航欄　302
16．3．1　導(dǎo)航欄基本結(jié)構(gòu)　302
實戰(zhàn)　制作jQuery Mobile頁面導(dǎo)航欄　302
16．3．2　為導(dǎo)航欄添加圖標　304
16．3．3　設(shè)置導(dǎo)航欄圖標位置　305
16．4　jQuery Mobile頁面尾部欄　307
16．4．1　在尾部欄添加按鈕　307
實戰(zhàn)　制作jQuery Mobile頁面尾部欄　307
16．4．2　添加表單元素　308
16．4．3　固定頁面頭部欄與尾部欄　309
實戰(zhàn)　固定jQuery Mobile頁面中頭部欄和尾部欄的位置　309
16．5　jQuery Mobile頁面內(nèi)容區(qū)域　310
16．5．1　布局網(wǎng)格　310
實戰(zhàn)　在jQuery Mobile頁面中創(chuàng)建布局網(wǎng)格　310
16．5．2　可折疊區(qū)塊　312
實戰(zhàn)　在jQuery Mobile頁面中創(chuàng)建可折疊內(nèi)容　313
16．5．3　可折疊區(qū)塊的嵌套　314
16．5．4　可折疊區(qū)塊組　314
16．6　預(yù)加載和緩存jQuery Mobile頁面　316
16．6．1　預(yù)加載jQuery Mobile頁面　316
16．6．2　頁面緩存　316
16．7　本章小結(jié)　316
第 17章　使用jQuery Mobile主題與組件　317
17．1　了解jQuery Mobile主題　317
17．1．1　了解主題　317
17．1．2　默認主題　318
實戰(zhàn)　為頁面應(yīng)用默認主題效果　318
17．1．3　修改默認主題　319
17．2　自定義jQuery Mobile頁面和工具欄主題　320
17．2．1　自定義頁面主題　320
實戰(zhàn)　制作APP歡迎頁面背景　320
17．2．2　自定義工具欄主題　323
實戰(zhàn)　設(shè)置APP歡迎頁面工具欄　323
17．2．3　自定義內(nèi)容主題　324
實戰(zhàn)　為可折疊區(qū)塊應(yīng)用主題　324
17．3　按鈕組件　325
17．3．1　內(nèi)聯(lián)按鈕　325
實戰(zhàn)　在jQuery Mobile頁面中添加按鈕　326
17．3．2　按鈕組　327
實戰(zhàn)　在jQuery Mobile頁面中使用按鈕組　327
17．4　列表組件　328
17．4．1　基本列表　328
17．4．2　有序列表　329
17．4．3　開啟或禁用列表圖標　329
17．4．4　對列表項進行分組　330
實戰(zhàn)　制作餐廳列表頁面　330
17．4．5　分割列表選項　334
17．4．6　圖標與計數(shù)器　336
實戰(zhàn)　為列表項添加圖標和計數(shù)器　336
17．4．7　列表項內(nèi)容格式化處理　337
實戰(zhàn)　對列表項內(nèi)容進行格式化處理　337
17．5　表單組件　339
17．5．1　文本輸入組件　339
實戰(zhàn)　制作移動APP登錄界面　340
17．5．2　滑塊　343
17．5．3　翻轉(zhuǎn)切換開關(guān)　343
17．5．4　單選按鈕　344
17．5．5　復(fù)選框　345
17．5．6　選擇菜單　346
17．5．7　多項選擇菜單　347
17．6　本章小結(jié)　348
第 18章　使用jQuery Mobile事件與插件　349
18．1　設(shè)置jQuery Mobile　349
18．2　使用jQuery Mobileg事件　351
18．2．1　加載外部頁面事件　351
18．2．2　頁面切換事件　351
實戰(zhàn)　實現(xiàn)頁面跳轉(zhuǎn)的動畫過渡效果　352
18．2．3　頁面顯示或隱藏事件　354
18．2．4　觸摸事件　354
實戰(zhàn)　通過滑動屏幕瀏覽圖片　355
18．2．5　屏幕滾動事件　358
實戰(zhàn)　滾動屏幕改變背景顏色　358
18．2．6　翻轉(zhuǎn)事件　361
實戰(zhàn)　判斷移動設(shè)備手持方向　362
18．2．7　隨機顯示頁面背景　363
實戰(zhàn)　隨機顯示頁面背景　363
18．3　使用jQuery Mobile插件　366
18．3．1　mmenu插件　366
實戰(zhàn)　制作交互式側(cè)邊菜單　367
18．3．2　Mobiscroll插件　370
實戰(zhàn)　實現(xiàn)滾動選擇日期和時間　371
18．3．3　Camera插件　372
實戰(zhàn)　在jQuery Mobile頁面中實現(xiàn)焦點輪換圖效果　373
18．3．4　Swipebox插件　375
實戰(zhàn)　實現(xiàn)查看大圖效果　375
18．4　本章小結(jié)　377
第 19章　移動應(yīng)用制作實戰(zhàn)　378
19．1　APP引導(dǎo)頁面　378
19．1．1　功能分析　378
19．1．2　制作步驟　378
實戰(zhàn)　制作APP引導(dǎo)頁面　379
19．2　移動應(yīng)用首頁面　383
19．2．1　功能分析　383
19．2．2　制作可滑動的頁面背景　383
實戰(zhàn)　制作可滑動的頁面背景　383
19．2．3　制作可滑動導(dǎo)航欄　386
實戰(zhàn)　制作可滑動導(dǎo)航欄　386
19．3　電商APP界面　390
19．3．1　功能分析　390
19．3．2　制作啟動頁面　390
實戰(zhàn)　制作電商APP啟動頁面　391
19．3．3　制作電商APP首頁面　393
實戰(zhàn)　制作電商APP首頁面　393
19．4　本章小結(jié)　400