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

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