HTML5+CSS3+jQuery Mobile移動網站與App開發實戰（視頻講解版）

李曉斌

預覽內頁

出版商: 人民郵電
出版日期: 2025-12-01
定價: $419
售價: $418
語言: 簡體中文
頁數: 393
ISBN: 7115479534
ISBN-13: 9787115479532
相關分類: HTML、CSS

下單後立即進貨 (約4週~6週)

HTML5+CSS3+jQuery Mobile移動網站與App開發實戰（視頻講解版）-preview-1

商品描述

本書分為三個部分。第一部分介紹HTML5各方面的知識點，重點介紹繪圖、音頻和視頻、新型表單等；第二部分介紹CSS樣式各屬性的設置和使用方法，重點介紹CSS 3.0中新增的相關屬性以及CSS動畫的制作方法；第三部分介紹了jQuery Mobile的相關知識，並通過實用案例講解了綜合運用HTML5、CSS 3和jQuery Mobile開發移動應用的方法和技巧。

作者簡介

本書作者編寫過多本設計類、前端開發類暢銷圖書，包括《7天精通Photoshop CS6 UI交互設計》、《網站用戶體驗設計全程揭秘》、《中文版Photoshop CS6完全自學一本通》等，重印多次，深受讀者好評。

目錄大綱

第一篇 HTML5基礎

第1章　HTML和HTML5基礎　2

1.1　HTML基礎　2

1.1.1　什麼是HTML　2

1.1.2　HTML的主要功能　3

1.1.3　HTML的編輯環境　3

1.1.4　認識Dreamweaver中的代碼工具　4

1.2　HTML5基礎　6

1.2.1　HTML5概述　6

1.2.2　HTML5的優勢　6

1.3　認識HTML5　7

1.3.1　HTML5的文檔結構　7

1.3.2　HTML5的基本語法　8

1.3.3　HTML5精簡的頭部　8

1.4　HTML5中新增的標簽　9

1.4.1　結構標簽　9

1.4.2　文本標簽　9

1.4.3　應用和輔助標簽　10

1.4.4　進度標簽　10

1.4.5　交互性標簽　10

1.4.6　在文檔和應用中使用的標簽　10

1.4.7　標簽　11

1.4.8　其他標簽　11

1.5　HTML5中廢棄的標簽　11

1.6　本章小結　12

1.7　課後習題　12

第2章　HTML中的主體標簽　13

2.1　HTML頭部標簽設置　13

2.1.1　標簽　13練習——為網頁設置標題　132.1.2　<base>標簽　142.1.3　<meta>標簽　14練習——設置網頁關鍵字、說明以及頁面的定時跳轉　162.2　HTML主體<body>標簽設置　172.2.1　邊距屬性margin　17練習——設置網頁整體邊距　172.2.2　背景顏色屬性bgcolor　18練習——設置網頁背景顏色　182.2.3　背景圖像屬性background　19練習——設置網頁背景圖像　192.2.4　文字屬性text　20練習——設置網頁文字默認顏色　202.2.5　默認鏈接屬性link　21練習——設置網頁中超鏈接文字的默認顏色　212.3　在HTML代碼中添加註釋　222.4　本章小結　232.5　課後習題　23第3章　HTML中基礎標簽的應用　243.1　文字設置標簽　243.1.1　標簽　24練習——使用標簽設置網頁文字效果　253.1.2　和標簽實現文字加粗　263.1.3　和標簽實現文字傾斜　263.1.4　標簽實現文字下畫線　26練習——為文字添加加粗、傾斜和下畫線修飾　273.1.5　其他文字修飾標簽　28練習——為文字添加上標和刪除線　283.2　分行與分段標簽　293.2.1　使用 標簽為文本分行　29練習——為網頁中的文本進行分行處理　293.2.2　使用標簽為文本分段　31練習——為網頁中的文本進行分段處理　313.2.3　<h1>至<h6>標簽　31練習——設置文本標題　323.2.4　<hr>標簽　32練習——在網頁中插入水平線　333.2.5　文本對齊設置　33練習——設置網頁文本對齊　343.2.6　在HTML中插入空格和特殊字符　35練習——在網頁中輸入空格和特殊字符　353.3　圖片標簽設置　363.3.1　<img>標簽　36練習——在網頁中插入圖片　373.3.2　圖文混排　38練習——制作圖文介紹頁面　383.4　列表標簽設置　393.4.1　使用<ul>標簽創建項目列表　40練習——制作新聞列表　403.4.2　使用<ol>標簽創建編號列表　41練習——制作編號有序列表　413.4.3　使用<dl>標簽創建定義列表　43練習——制作復雜的新聞列表　433.5　超鏈接標簽設置　443.5.1　超鏈接<a>標簽　443.5.2　相對鏈接和絕對鏈接　45練習——在網頁中創建超鏈接　453.5.3　網頁中的特殊超鏈接　46練習——在網頁中創建特殊超鏈接　463.5.4　超鏈接標簽中的其他屬性設置　483.6　表格標簽設置　493.6.1　表格的基本構成<table>、<tr>和<td>標簽　493.6.2　表格標題<caption>標簽　49練習——創建數據表格　503.6.3　表頭<thead>、表主體<tbody>和表尾<tfoot>標簽　51練習——設置表格中的表頭、表主體和表尾　513.7　本章小結　523.8　課後習題　53第4章　HTML中表單標簽的應用　544.1　了解HTML中的表單　544.1.1　表單的作用　544.1.2　<form>標簽　544.1.3　表單的數據傳遞方式　554.2　普通的HTML表單元素　554.2.1　文本域　554.2.2　密碼域　554.2.3　文本區域　564.2.4　隱藏域　564.2.5　復選框　564.2.6　單選按鈕　564.2.7　選擇域　564.2.8　文件域　574.2.9　按鈕　574.2.10　圖像域　57練習——制作登錄表單　584.3　HTML5新增表單輸入類型　614.3.1　url類型　614.3.2　email類型　614.3.3　range類型　614.3.4　number類型　614.3.5　tel類型　624.3.6　search類型　624.3.7　color類型　624.3.8　date類型　624.3.9　month、week、time、datetime、datetime-local類型　63練習——制作留言表單頁面　634.3.10　瀏覽器對HTML5表單的支持情況　654.4　HTML5新增表單屬性　654.4.1　form屬性　664.4.2　formaction屬性　664.4.3　formmethod、formenctype、formnovalidate、formtarget屬性　664.4.4　placeholder屬性　664.4.5　autofocus屬性　67練習——為表單元素設置默認提示內容　674.4.6　autocomplete屬性　684.5　使用HTML5表單驗證　684.5.1　與驗證有關的表單元素屬性　68練習——驗證網頁表單元素　694.5.2　表單驗證方法　704.5.3　表單驗證事件　724.6　本章小結　734.7　課後習題　73第5章　HTML中多媒體標簽的應用　745.1　使用<embed>標簽　745.1.1　使用<embed>標簽嵌入音頻　74練習——在網頁中嵌入音頻　755.1.2　使用<embed>標簽嵌入視頻　75練習——在網頁中嵌入視頻　765.2　了解HTML5中多媒體的應用　765.2.1　在線多媒體的發展　775.2.2　檢查瀏覽器是否支持<audio>和<video>標簽　775.3　HTML5新增<audio>標簽的應用　775.3.1　<audio>標簽所支持的音頻格式　775.3.2　使用<audio>標簽　77練習——在網頁中嵌入音頻播放　785.4　HTML5新增<video>標簽的應用　795.4.1　<video>標簽所支持的視頻格式　795.4.2　使用<video>標簽　79練習——在網頁中嵌入視頻播放　795.4.3　使用<source>標簽　805.5　<audio>與<video>標簽的屬性　815.5.1　元素的標簽屬性　815.5.2　元素的接口屬性　82練習——實現網頁中視頻的快進控制　835.6　<audio>與<video>標簽的接口方法　84練習——控制網頁中視頻的播放和暫停　855.7　<audio>與<video>標簽的事件　86練習——自定義視頻播放控制組件　875.8　本章小結　915.9　課後習題　91第6章　HTML5中<canvas>標簽的應用　936.1　<canvas>標簽　936.1.1　了解<canvas>標簽　936.1.2　在網頁中使用<canvas>標簽　936.1.3　使用<canvas>標簽實現繪圖的流程　946.2　繪制基本圖形　956.2.1　繪制直線　95練習——在網頁中繪制直線　956.2.2　繪制矩形　96練習——在網頁中繪制矩形　976.2.3　繪制圓形　98練習——在網頁中繪制圓形　996.2.4　繪制三角形　100練習——在網頁中繪制三角形　1006.2.5　圖形組合　1026.3　繪制文本　1036.3.1　使用文本　103練習——在網頁中繪制文字　1046.3.2　創建對象陰影　105練習——為網頁中所繪制文字添加陰影　1056.4　在網頁中實現特殊形狀圖像　1066.4.1　繪制圖像　106練習——在網頁中繪制圖像　1076.4.2　裁切區域　108練習——在網頁中實現圓形圖像效果　1086.5　本章小結　1106.6　課後習題　110第7章　HTML5中文檔結構標簽的應用　1117.1　構建HTML5頁面主體內容　1117.1.1　文章<article>標簽　1117.1.2　章節<section>標簽　1137.1.3　導航<nav>標簽　1157.1.4　輔助內容<aside>標簽　1167.1.5　日期時間<time>標簽　1177.2　HTML5文檔中的語義模塊標簽　1177.2.1　標題<header>標簽　1177.2.2　標題分組<hgroup>標簽　1187.2.3　頁腳<footer>標簽　1197.2.4　聯系信息<address>標簽　1207.3　制作HTML5文章頁面　121練習——制作HTML5文章頁面　1217.4　本章小結　1257.5　課後習題　125第二篇　CSS樣式第8章　CSS樣式基礎　1278.1　了解CSS樣式　1278.1.1　什麼是CSS樣式　1278.1.2　CSS樣式的發展　1278.2　CSS樣式語法　1288.2.1　CSS樣式的基本語法　1288.2.2　CSS規則構成　1298.3　CSS樣式選擇器　1308.3.1　通配選擇器　1308.3.2　標簽選擇器　130練習——創建通配選擇器和標簽選擇器　1308.3.3　ID選擇器　1328.3.4　類選擇器　132練習——創建ID選擇器和類選擇器　1328.3.5　偽類和偽對象選擇器　135練習——創建並應用超鏈接偽類樣式　1368.3.6　群組選擇器　1378.3.7　派生選擇器　137練習——在網頁中創建並應用群組和派生CSS樣式　1388.4　在網頁中應用CSS樣式的4種方式　1398.4.1　內聯CSS樣式　1398.4.2　內部CSS樣式　1408.4.3　外部CSS樣式　140練習——創建並鏈接外部CSS樣式表文件　1418.4.4　導入外部CSS樣式　1438.5　CSS樣式的特性　1448.5.1　CSS樣式的繼承性　1448.5.2　CSS樣式的特殊性　1448.5.3　CSS樣式的層疊性　1458.5.4　CSS樣式的重要性　1458.6　本章小結　1458.7　課後習題　145第9章　CSS布局　1479.1　創建Div　1479.1.1　了解Div　1479.1.2　如何插入Div　1489.1.3　塊元素與行內元素　1499.2　CSS盒模型　1509.2.1　什麼是CSS盒模型　1509.2.2　CSS盒模型的特性　1519.2.3　margin屬性——邊距　1519.2.4　border屬性——邊框　1519.2.5　padding屬性——填充　151練習——設置網頁元素盒模型　1529.3　網頁元素定位屬性　1549.3.1　position屬性——元素定位　1549.3.2　網頁元素相對定位　155練習——實現網頁元素的疊加顯示　1559.3.3　網頁元素絕對定位　156練習——網頁元素固定在右側顯示　1569.3.4　網頁元素固定定位　157練習——實現固定位置的導航菜單　1579.3.5　網頁元素浮動定位　159練習——制作順序排列的圖像列表　1599.4　網頁常用布局方式　1619.4.1　居中的布局　1629.4.2　浮動的布局　1639.4.3　自適應高度的解決方法　1689.5　本章小結　1699.6　課後習題　169第10章　CSS樣式屬性詳解　17010.1　使用CSS設置文字樣式　17010.1.1　font-family屬性——字體　17010.1.2　font-size屬性——字體大小　17010.1.3　color屬性——字體顏色　171練習——設置網頁文字基本效果　17110.1.4　font-weight屬性——字體粗細　17310.1.5　font-style屬性——字體樣式　173練習——設置網頁文字的加粗和傾斜效果　17410.1.6　text-transform屬性——英文字體大小寫　175練習——設置網頁中英文字體大小寫　17510.1.7　text-decoration屬性——文字修飾　177練習——為網頁文字添加修飾　17710.1.8　letter-spacing屬性——字符間距　178練習——設置中文字符間距　17910.2　使用CSS設置段落樣式　17910.2.1　line-height屬性——行間距　17910.2.2　text-indent屬性——段落首行縮進　180練習——美化網頁中的段落文本　18010.2.3　text-align屬性——文本水平對齊　181練習——設置文本水平對齊　18110.2.4　vertical-align屬性——文本垂直對齊　183練習——設置文本垂直對齊　18310.3　使用CSS設置背景顏色和背景圖像　18510.3.1　background-color屬性——背景顏色　18510.3.2　background-image屬性——背景圖像　18510.3.3　background-repeat屬性——背景圖像平鋪方式　185練習——設置網頁背景效果　18610.3.4　background-position屬性——背景圖像位置　188練習——定位網頁中的背景圖像　18810.3.5　background-attachment屬性——背景圖像固定　190練習——固定網頁中的背景圖像　19010.4　使用CSS設置列表樣式　19110.4.1　list-style-type屬性——設置列表符號　191練習——設置新聞列表效果　19110.4.2　list-style-image屬性——自定義列表符號　192練習——自定義新聞列表符號　19210.4.3　設置定義列表　194練習——制作復雜新聞列表　19410.5　使用CSS設置邊框樣式　19510.5.1　border-width屬性——邊框寬度　19510.5.2　border-style屬性——邊框樣式　19510.5.3　border-color屬性——邊框顏色　196練習——為網頁元素添加邊框效果　19610.6　超鏈接CSS樣式偽類　19710.6.1　:link偽類　19710.6.2　:hover偽類　19810.6.3　:active偽類　19810.6.4　:visited偽類　199練習——設置網頁中超鏈接文字效果　19910.6.5　按鈕式超鏈接　202練習——制作網站導航菜單　20210.7　cursor屬性——光標指針效果　204練習——在網頁中實現多種光標指針效果　20410.8　本章小結　20610.9　課後習題　206第11章　CSS3.0新增屬性詳解　20711.1　了解CSS3.0　20711.1.1　CSS3.0的發展　20711.1.2　瀏覽器對CSS3.0的支持情況　20711.1.3　了解CSS3.0的全新功能　20811.2　CSS3.0顏色設置方式　20811.2.1　RGBA顏色值　208練習——使用RGBA設置半透明背景顏色　20911.2.2　HSL和HSLA顏色值　209練習——使用HSLA設置半透明背景顏色　21011.2.3　transparent顏色值　21111.3　CSS3.0新增文字設置屬性　21111.3.1　text-overflow屬性——文本溢出處理　211練習——設置網頁中溢出文本的處理方式　21211.3.2　word-wrap和word-break屬性——控制文本換行　213練習——控制英文內容強制換行　21311.3.3　text-shadow屬性——文本陰影　214練習——為網頁文本添加陰影效果　21511.3.4　@font-face規則——使用服務器端字體　215練習——在網頁中使用特殊字體　21611.4　CSS3.0新增背景設置屬性　21711.4.1　線性漸變背景顏色　217練習——為網頁設置線性漸變背景顏色　21811.4.2　徑向漸變背景顏色　220練習——為網頁設置徑向漸變背景顏色　22111.4.3　background屬性——設置多背景圖像　222練習——為網頁設置多個背景圖像　22211.4.4　background-size屬性——背景圖像大小　223練習——控制網頁背景圖像的大小　22311.4.5　background-origin屬性——背景圖像原點　225練習——控制背景圖像開始顯示的原點位置　22611.4.6　background-clip屬性——背景圖像顯示區域　226練習——控制背景圖像的顯示區域　22711.5　CSS3.0新增邊框設置屬性　22811.5.1　border-colors屬性——多重邊框顏色　228練習——實現網頁元素多色彩邊框效果　22811.5.2　border-image屬性——圖像邊框　229練習——為網頁元素添加圖像邊框效果　23011.5.3　border-radius屬性——圓角邊框　231練習——在網頁中實現圓角邊框效果　23111.6　CSS3.0新增多列布局屬性　23311.6.1　columns屬性——多列布局　233練習——將網頁內容分為多列　23311.6.2　column-width屬性——列寬度　23411.6.3　column-count屬性——列數　23411.6.4　column-gap屬性——列間距　23411.6.5　column-rule屬性——列分隔線　23511.6.6　column-span屬性——橫跨所有列　235練習——實現網頁內容的分欄顯示效果　23511.7　CSS3.0新增其他屬性　23711.7.1　opaity屬性——元素不透明度　237練習——設置網頁元素的半透明效果　23811.7.2　box-shadow屬性——元素陰影　239練習——為網頁元素添加陰影效果　23911.7.3　resize屬性——改變元素尺寸　240練習——實現網頁元素尺寸任意縮放　24111.7.4　outline屬性——輪廓外邊框　242練習——為網頁元素添加輪廓外邊框　24311.7.5　appearance屬性——偽裝的元素　244練習——將超鏈接文字偽裝成按鈕　24511.7.6　content屬性——為元素賦予內容　246練習——為網頁元素賦予文字內容　24611.8　本章小結　24711.9　課後習題　247第12章　使用CSS3.0實現動畫效果　24812.1　實現元素變形　24812.1.1　transform屬性　24812.1.2　使用rotate()函數實現元素旋轉　248練習——實現網頁元素的旋轉變形效果　24912.1.3　使用scale()函數實現元素縮放和翻轉變形　250練習——實現網頁元素的縮放和翻轉效果　25012.1.4　使用translate()函數實現元素移動　251練習——實現網頁元素的移動效果　25112.1.5　使用skew()函數實現元素傾斜　253練習——實現網頁元素的傾斜效果　25312.1.6　使用matrix()函數實現元素矩陣變形　254練習——實現網頁元素的矩陣變形效果　25412.1.7　定義變形中心點　255練習——設置網頁元素的變形中心點　25612.1.8　同時使用多個變形函數　257練習——為網頁元素同時應用多個變形效果　25712.2　CSS3.0實現過渡動畫效果　25812.2.1　transition屬性　25812.2.2　transition-property屬性——實現過渡效果　259練習——實現網頁元素旋轉並放大動畫　25912.2.3　transition-duration屬性——設置過渡時間　260練習——設置網頁元素變形動畫持續時間　26012.2.4　transition-delay屬性——實現過渡延遲效果　262練習——設置網頁元素變形動畫延遲時間　26212.2.5　transition-timing-function屬性——設置過渡方式　263練習——設置網頁元素變形動畫過渡方式　26312.3　本章小結　26412.4　課後習題　264第三篇　jQuery Mobile頁面第13章　初識jQuery Mobile　26613.1　jQuery入門　26613.1.1　什麼是jQuery　26613.1.2　如何引用jQuery函數庫　26713.1.3　jQuery基本語法　26713.1.4　jQuery選擇器　26813.1.5　使用jQuery設置CSS樣式屬性　269練習——使用jQuery改變CSS樣式效果　26913.2　jQuery Mobile基礎　27013.2.1　什麼是jQuery Mobile　27013.2.2　jQuery Mobile的優勢　27113.3　jQuery Mobile頁面開發前的準備工作　27113.3.1　如何測試所制作的移動頁面　27113.3.2　加載jQuery Mobile函數庫文件　27313.4　認識jQuery Mobile頁面結構　27413.4.1　創建jQuery Mobile頁面　274練習——創建jQuery　Mobile頁面　27413.4.2　jQuery Mobile頁面的基本架構　27613.4.3　多容器jQuery Mobile頁面　27713.5　jQuery Mobile頁面的基本操作　27713.5.1　jQuery Mobile頁面中多容器之間的鏈接　277練習——創建jQuery　Mobile頁面多容器之間鏈接　27813.5.2　鏈接外部jQuery Mobile頁面　280練習——鏈接外部jQuery　Mobile頁面　28013.5.3　預加載jQuery Mobile頁面　28213.5.4　頁面緩存　282練習——在jQuery　Mobile頁面中實現預加載和緩存　28313.5.5　在jQuery Mobile頁面中實現後退功能　283練習——在jQuery　Mobile頁面中實現後退功能　28413.5.6　彈出對話框　285練習——以彈出窗口方式顯示鏈接內容　28513.6　本章小結　28713.7　課後習題　287第14章　jQuery Mobile頁面詳解　28814.1　頭部欄　28814.1.1　頭部欄的基本結構　28814.1.2　設置後退按鈕的文字　28914.1.3　添加按鈕　290練習——在jQuery　Mobile頁面頭部欄中添加按鈕　29014.1.4　設置按鈕位置　29314.2　導航欄　29414.2.1　導航欄的基本結構　295練習——在jQuery　Mobile頁面中創建導航欄　29514.2.2　導航欄的圖標　29714.2.3　設置導航欄圖標位置　29914.3　尾部欄　30014.3.1　添加按鈕　300練習——在jQuery　Mobile頁面尾部欄中添加按鈕　30014.3.2　添加表單元素　301練習——在jQuery　Mobile頁面尾部欄中添加下拉列表　30214.4　jQuery Mobile頁面正文內容處理　30314.4.1　jQuery Mobile布局網格　303練習——創建布局網格　30314.4.2　可折疊區塊　305練習——創建可折疊內容　30614.4.3　嵌套可折疊區塊　30714.4.4　可折疊區塊組　308練習——創建可折疊區塊組　30814.5　本章小結　30914.6　課後習題　309第15章　使用jQuery Mobile頁面組件和主題　31115.1　列表組件　31115.1.1　無序列表　311練習——在jQuery　Mobile頁面中創建列表　31115.1.2　有序列表　31215.1.3　分割列表選項　313練習——分割jQuery　Mobile頁面中的列表選項　31315.1.4　列表選項分組　315練習——實現列表選項的分組　31515.1.5　開啟或禁用列表項中的圖標　317練習——開啟或禁用列表項中的圖標　31715.1.6　圖標與計數器　319練習——為列表項添加圖標和計數器　31915.1.7　列表項內容格式化處理　320練習——列表項內容的格式化處理　32115.2　按鈕組件　32315.2.1　使用按鈕組件　323練習——在jQuery　Mobile頁面中添加按鈕　32315.2.2　使用按鈕組　325練習——在jQuery　Mobile頁面中使用按鈕組　32515.3　表單組件　32615.3.1　文本輸入框　326練習——在jQuery　Mobile頁面添加不同類型輸入框　32615.3.2　滑塊　327練習——使用滑塊修改頁面元素的背景顏色　32715.3.3　翻轉切換開關　32815.3.4　單選按鈕　328練習——制作投票表單　32915.3.5　復選框　330練習——制作調查表單　33015.3.6　選擇菜單　33115.3.7　多項選擇菜單　33315.4　關於jQuery Mobile頁面主題　33415.4.1　什麼是jQuery Mobile頁面主題　33415.4.2　jQuery Mobile頁面主題的特點　33415.4.3　默認的jQuery Mobile頁面主題　335練習——應用jQuery　Mobile頁面的默認主題　33515.4.4　如何修改默認的jQuery Mobile頁面主題　336練習——修改jQuery　Mobile頁面的默認效果　33615.5　自定義jQuery Mobile頁面主題　33815.5.1　自定義jQuery Mobile頁面背景　338練習——自定義jQuery　Mobile頁面背景　33815.5.2　自定義jQuery Mobile頁面工具欄　341練習——自定義jQuery　Mobile頁面工具欄　34115.5.3　自定義jQuery Mobile頁面內容區域　343練習——自定義可折疊區塊主題　34415.6　本章小結　34515.7　課後習題　345第16章　使用jQuery Mobile頁面事件　34616.1　應用jQuery Mobile事件　34616.1.1　頁面顯示/隱藏事件　34616.1.2　加載外部頁面事件　34716.1.3　頁面切換事件　347練習——設置jQuery　Mobile頁面切換過渡動畫效果　34816.1.4　觸摸事件　350練習——使用觸摸事件實現滑動屏幕瀏覽圖片　35116.1.5　滾動屏幕事件　354練習——使用滾動屏幕事件改變元素的背景顏色　35416.1.6　屏幕翻轉事件　357練習——通過屏幕翻轉事件判斷移動設備方向　35716.2　jQuery Mobile頁面的設置技巧　36116.2.1　固定頁面頭部欄與尾部欄　361練習——固定jQuery　Mobile頁面中頭部欄和尾部欄的位置　36116.2.2　隨機顯示頁面背景　362練習——隨機顯示jQuery　Mobile頁面的背景圖片　36216.3　本章小結　36616.4　課後習題　366第17章　移動端應用開發實戰　36717.1　移動APP引導頁面　36717.1.1　功能分析　36717.1.2　制作步驟　368練習——制作移動APP引導頁面　36817.2　電商APP頁面　37417.2.1　功能分析　37417.2.2　制作電商APP頁面　375練習——制作電商APP頁面　37517.2.3　制作側邊導航菜單　381練習——制作側邊導航菜單　38117.3　可滑動操作的移動頁面　38617.3.1　功能分析　38617.3.2　制作可滑動切換的背景　386練習——制作可滑動切換的背景　38617.3.3　制作可滑動底部導航欄　389練習——制作可滑動底部導航欄　38917.4　本章小結　39317.5　課後習題　393 </div> </section> </article> <div class="content"> <h2> 類似商品 </h2> <div class="book-list book-list-carousel"> <div class="list-wrapper"> <ul> <li class="single-book"> <a class="cover" href="/products/9787115485007?list_name=sp"> <img alt="HTML5 CSS3 jQuery Mobile APP與移動網站設計從入門到精通-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/124/854/medium/416sci_JNPL.jpg?1538432341" /> 85折 </a> <div class="pricing"> $351 <form class="button_to" method="post" action="/cart?id=9787115485007&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="eoBrxoOKqci/ekcO0SpZ+7f5SeaJivmlk8oYowBWC3hsfp+7qQOmzxMiaES/KdYR+RjVnsiJyT3shCePZX+g3g==" /></form> </div> <a title="HTML5 CSS3 jQuery Mobile APP與移動網站設計從入門到精通" href="/products/9787115485007?list_name=sp">HTML5 CSS3 jQuery Mobile APP與移動網站設計從入門到精通</a> </li> <li class="single-book"> <a class="cover" href="/products/9787302501497?list_name=sp"> <img alt="移動 Web 應用開發教程 — HTML5 + JavaScript 框架全棧 App 開發-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/123/565/medium/414FyStcLkL.jpg?1537689081" /> </a> <div class="pricing"> $294 <form class="button_to" method="post" action="/cart?id=9787302501497&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="VKLYhtPWUAXyCtChFqi5y5ALa4bEsQNL4SfSqxo3iZ1CXCz7+V9fAl5S/+t4qzYh3ur3/oWyM9Oeae2Hfx4iOw==" /></form> </div> <a title="移動 Web 應用開發教程 — HTML5 + JavaScript 框架全棧 App 開發" href="/products/9787302501497?list_name=sp">移動 Web 應用開發教程 — HTML5 + JavaScript 框架全棧 App 開發</a> </li> <li class="single-book"> <a class="cover" href="/products/9787302419723?list_name=sp"> <img alt="精通jQuery Web開發(第2版)-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/088/772/medium/51Cs-Hq2KZL.jpg?1525603669" /> </a> <div class="pricing"> $588 <form class="button_to" method="post" action="/cart?id=9787302419723&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="8HXmhg8XhkBoxaIEju2b0S9DThV6NQlz9mNe/2oBb4TmixL7JZ6JR8SdjU7g7hQ7YaLSbTs2OeuJLWHTDyjEIg==" /></form> </div> <a title="精通jQuery Web開發(第2版)" href="/products/9787302419723?list_name=sp">精通jQuery Web開發(第2版)</a> </li> <li class="single-book"> <a class="cover" href="/products/9787302367598?list_name=sp"> <img alt="HTML5 移動 Web 開發實戰詳解-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/079/663/medium/51FmHAKqH1L.jpg?1525641346" /> 75折 </a> <div class="pricing"> $310 <form class="button_to" method="post" action="/cart?id=9787302367598&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="GC48IwpoRicEAOhj789ZJdkcOdEHAQVdpCLRyGC4ZQAO0MheIOFJIKhYxymBzNbPl/2lqUYCNcXbbO7kBZHOpg==" /></form> </div> <a title="HTML5 移動 Web 開發實戰詳解" href="/products/9787302367598?list_name=sp">HTML5 移動 Web 開發實戰詳解</a> </li> <li class="single-book"> <a class="cover" href="/products/9787302403968?list_name=sp"> <img alt="jQuery Mobile移動網站開發(附光盤)-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/085/940/medium/51AZQ_pb1NL.jpg?1525645423" /> </a> <div class="pricing"> $414 <form class="button_to" method="post" action="/cart?id=9787302403968&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="0jR9xUO3oBykSM1VuWJephc5NpmmukxaBH8g6phUCObEyom4aT6vGwgQ4h/XYdFMWdiq4ee5fMJ7MR/G/X2jQA==" /></form> </div> <a title="jQuery Mobile移動網站開發(附光盤)" href="/products/9787302403968?list_name=sp">jQuery Mobile移動網站開發(附光盤)</a> </li> <li class="single-book"> <a class="cover" href="/products/9787115366535?list_name=sp"> <img alt="精通jQuery(第2版)-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/079/534/medium/51004o7HfKL.jpg?1525641271" /> </a> <div class="pricing"> $894 <form class="button_to" method="post" action="/cart?id=9787115366535&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="hu/PSrcK8g8Mr0B7zgG2gqQMn09bWsdqimz7b/imCRCQETs3nYP9CKD3bzGgAjlo6u0DNxpZ9/L1IsRDnY+itg==" /></form> </div> <a title="精通jQuery(第2版)" href="/products/9787115366535?list_name=sp">精通jQuery(第2版)</a> </li> <li class="single-book"> <a class="cover" href="/products/9787302707530?list_name=sp"> <img alt="HTML+CSS+JavaScript+Vue前端開發技術教程(微課視頻版)-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/257/852/medium/9787302707530.jpg?1773366388" /> </a> <div class="pricing"> $420 <form class="button_to" method="post" action="/cart?id=9787302707530&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="/v0UpRa7UsQX8VMDYnTP9P5HTfhlX2N3NyRyLkYNPK3oA+DYPDJdw7upfEkMd0AesKbRgCRcU+9Iak0CIySXCw==" /></form> </div> <a title="HTML+CSS+JavaScript+Vue前端開發技術教程(微課視頻版)" href="/products/9787302707530?list_name=sp">HTML+CSS+JavaScript+Vue前端開發技術教程(微課視頻版)</a> </li> <li class="single-book"> <a class="cover" href="/products/9787302520511?list_name=sp"> <img alt="HTML5+CSS3+JavaScript項目開發-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/130/895/medium/081728-01.jpg?1555124895" /> 75折 </a> <div class="pricing"> $292 <form class="button_to" method="post" action="/cart?id=9787302520511&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="ReGFlQRAj8apiRVxwzxV8kv5RvrRMp0d8T1EbfbF/IxTH3HoLsmAwQXROjutP9oYBRjagpAxrYWOc3tBk+xXKg==" /></form> </div> <a title="HTML5+CSS3+JavaScript項目開發" href="/products/9787302520511?list_name=sp">HTML5+CSS3+JavaScript項目開發</a> </li> <li class="single-book"> <a class="cover" href="/products/9789863126591?list_name=sp"> <img alt="設計師一定要學的 Bootstrap 5 RWD 響應式網頁設計 -- 行動優先的前端技術-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/163/060/medium/F1477_%E5%A4%A9%E7%93%8F.jpg?1623226642" /> 85折 </a> <div class="pricing"> <del>$580</del> $493 <form class="button_to" method="post" action="/cart?id=9789863126591&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="j51C49CpZl7Z+PDqZhh+DLUF6r4KAsqsTrOMuf+BVSGZY7ae+iBpWXWg36AIG/Hm++R2xksB+jQx/bOVmqj+hw==" /></form> </div> <a title="設計師一定要學的 Bootstrap 5 RWD 響應式網頁設計 -- 行動優先的前端技術" href="/products/9789863126591?list_name=sp">設計師一定要學的 Bootstrap 5 RWD 響應式網頁設計 -- 行動優先的前端技術</a> </li> <li class="single-book"> <a class="cover" href="/products/9787302672951?list_name=sp"> <img alt="Web前端開發技術——HTML 5+CSS 3項目化教程（微課版）-cover" loading="lazy" src="https://cf-assets2.tenlong.com.tw/products/images/000/225/445/medium/104831-01.jpg?1731035856" /> </a> <div class="pricing"> $270 <form class="button_to" method="post" action="/cart?id=9787302672951&list_name=sp"><button class="add-to-cart ml-1 px-2 rounded text-tl_blue hover:text-white hover:bg-tl_blue bg-gray-200" type="submit"> </button><input type="hidden" name="authenticity_token" value="Cb7I53T42n3LUHAtv3hS0KJLWUxuVWuZPrR4O6xxV8QfQDyaXnHVemcIX2fRe9067KrFNC9WWwFB+kcXyVj8Yg==" /></form> </div> <a title="Web前端開發技術——HTML 5+CSS 3項目化教程（微課版）" href="/products/9787302672951?list_name=sp">Web前端開發技術——HTML 5+CSS 3項目化教程（微課版）</a> </li> </ul> </div> </div> </div> <script> // item-preview $(".item-preview").on("click", function(e){ e.preventDefault(); $("body").addClass("preview-book"); }); $(".preview-close").on("click", function(e){ e.preventDefault(); $("body").removeClass("preview-book"); }); $("body").on("click", function(e){ if ($(e.target).parents('.preview-wrapper').length < 1 && !$(e.target).hasClass("item-preview")) { $("body").removeClass("preview-book"); } }); $(".preview-wrapper ul a").on("click", function(e){ e.preventDefault(); $(this).parents("ul").find("li").removeClass("active"); $(this).parent().addClass("active"); $(".preview-page").html($(this).html()); }); </script> </div> </div> </div>  <footer class="page-footer"> <div class="center-container"> <ul> <li> <a href="https://www.facebook.com/%E5%A4%A9%E7%93%8F%E8%B3%87%E8%A8%8A%E5%9C%96%E6%9B%B8-236436558020/">Facebook 粉絲專頁</a> </li> <li> <a href="/faq">客服與FAQ</a> </li> <li> <a href="/about">連絡我們</a> </li> <li> <a href="/privacy">隱私權政策</a> </li> <li> <a href="/terms">服務條款</a> </li> </ul> <div class="copyright"> Copyright © 2026 天瓏資訊圖書有限公司 營業人統一編號 86296517 </div> </div> </footer> </div> </body> </html> <script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"0b238202d29247d09c67e7cead0cb81f","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9eb386dd3878d319',t:'MTc3NjAxMDQ5NQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>