目次
第一篇 HTML5完整學習
第1章 HTML5 的歷史
1-1 認識HTML3
1-2 蒂姆·伯納斯 -李
(Tim Berners Lee)3
1-3 HTML歷史上的3個重要協會4
1-4 HTML的發展史5
1-5 HTML開發中的插曲XHTML6
1-6 HTML與瀏覽器的兼容問題6
第2章 HTML5 從零開始
2-1 HTML5與HTML 4.018
2-2 HTML文件結構8
2-2-1 大小寫皆可8
2-2-2 文件聲明doctype8
2-2-3 … 8
2-2-4 … 9
2-2-5 … 9
2-3 認識HTML基本元素9
2-4 HTML標記類型10
2-5 我的第一個HTML文件10
2-5-1 編輯我的第一個HTML文件10
2-5-2 執行我的第一個HTML文件11
2-5-3 Notepad++11
2-6 解析我的第一個HTML文件12
2-6-1 元素12
2-6-2
元素13<BR>2-6-3 文件主體13<BR>2-7 HTML文件的批註14<BR>習題14<BR>第3章 HTML文件輸出的基本知識<BR>3-1 瀏覽器處理數據的輸出16<BR>3-2 標題輸出<hn>元素16<BR>3-3 換行輸出元素17<BR>3-4 保持原始文件樣式<pre> 元素17<BR>3-5 水平線<hr>元素18<BR>3-6 段落<p>元素18<BR>3-7 文件某個區域<section> 元素19<BR>3-8 頁首<header>元素19<BR>3-9 頁尾<footer> 元素20<BR>3-10 粗體顯示和<strong>元素20<BR>3-11 斜體<em>和<i>元素21<BR>3-12 引用<cite>、<q>和<BR> ?<blockquote>元素21<BR>3-13 加上底紋<mark> 元素22<BR>3-14 小型字<small> 元素22<BR>3-15 顯示與計算機有關聯的文字<kbd>、<BR> ?<samp>、<var><BR> ?和<code>元素22<BR>3-16 定義縮寫<abbr>元素23<BR>3-17 定義用語<dfn>元素23<BR>3-18 內容新增與刪除<ins><BR> ?和<del>元素24<BR>3-19 隔離雙向文字走向<bdi> 元素24<BR>3-20 指定文字走向<bdo dir=<BR> ?"direction"> … </bdo>25<BR>3-21 標示注音或拼音<ruby>、<BR> ?<rt>和<rp>元素25<BR>3-22 上標<sup>和下標<BR> ?<sub>元素26<BR>3-23 輸出特殊字符26<BR>3-24 HTML的樹狀結構27<BR>3-25 HTML5不再支持的元素與<BR> ?屬性設定28<BR>習題29<BR>第4章 設計含超鏈接的網頁<BR>4-1 <a> … </a>的基本應用31<BR>4-2 瀏覽脈絡的設定31<BR>4-3 從一個文件跳到另一個文件32<BR>4-3-1 超鏈接的HTML文件在同一個<BR> 文件夾32<BR>4-3-2 超鏈接的文件在子文件夾34<BR>4-3-3 超鏈接的文件在父文件夾34<BR>4-3-4 絕對路徑35<BR>4-4 同一個HTML文件中的超鏈接35<BR>4-5 設定聯絡信息<address>元素36<BR>4-6 鏈接到電子郵件信箱37<BR>4-7 引用短文的實例<cite>元素與<BR> 超鏈接的應用38<BR>4-8 指定基準的URL38<BR>習題39<BR>第5章 製作項目列表<BR>5-1 點符列表41<BR>5-2 有編號的項目列表41<BR>5-3 設定有編號項目列表的起始編號42<BR>5-4 更改項目列表的連續編號43<BR>5-5 更改項目列表的編號種類43<BR>5-6 項目列表編號遞減的應用44<BR>5-7 自定義清單45<BR>習題45<BR>第6章 設計表格<BR>6-1 表格的基本元素47<BR>6-2 表格框線的border屬性47<BR>6-3 建立表頭<thead>和<th>元素48<BR>6-4 建立表格本體<tbody>元素48<BR>6-5 建立表尾<tfoot>元素49<BR>6-6 合併橫向單元格colspan屬性49<BR>6-7 合併縱向單元格rowspan屬性50<BR>6-8 表格的標題<caption>元素51<BR>6-9 單元格的群組化<colgroup><BR> 和<col>元素51<BR>6-10 表格與超鏈接的混合應用52<BR>習題53<BR>第7章 嵌入圖片<BR>7-1 嵌入圖片<img>元素55<BR>7-2 標示文件標題<figure>和<BR> <figcaption>元素56<BR>7-3 製作響應圖56<BR>7-3-1 建立地圖<img>56<BR>7-3-2 響應圖<map>57<BR>7-3-3 定義響應圖的鏈接區域<area>57<BR>7-4 在表格內嵌入圖片58<BR>7-5 設計圖片的超鏈接59<BR>7-6 將圖片作為項目符號60<BR>7-7 簡易編排嵌入圖片與文字61<BR>7-8 GIF動畫62<BR>習題63<BR>第8章 設計多媒體網頁<BR>8-1 播放影片<video>元素65<BR>8-2 播放聲音<audio>元素68<BR>8-3 指定多個播放文件<source>元素70<BR>8-4 為影片加入字幕功能<track>元素72<BR>8-4-1 認識與建立WebVTT文件73<BR>8-4-2 HTML5 Video Caption Maker74<BR>8-4-3 為影片加字幕的實例75<BR>8-5 嵌入資源文件<embed>元素77<BR>8-6 嵌入對象<object>元素78<BR>8-7 設定嵌入對象的參數<param><BR> 元素79<BR>8-8 建立嵌入的浮動框架<iframe>元素80<BR>習題82<BR>第9章 製作輸入表單<BR>9-1 製作輸入表單<form>元素84<BR>9-2 製作表單組件<input>元素85<BR>9-2-1 製作提交按鈕submit屬性值88<BR>9-2-2 製作重設按鈕reset屬性值89<BR>9-2-3 製作單行輸入的文本框<BR> text屬性值89<BR>9-2-4 製作可輸入密碼的文本框<BR> password屬性值90<BR>9-2-5 製作搜索框search屬性值91<BR>9-2-6 製作圖片按鈕image屬性值91<BR>9-2-7 製作輸入電話號碼的文本框tel<BR> 屬性值92<BR>9-2-8 製作輸入電子郵件字段的文本框<BR> email屬性值92<BR>9-2-9 製作輸入URL的文本框url<BR> 屬性值92<BR>9-2-10 製作單選按鈕radio屬性值93<BR>9-2-11 製作複選框checkbox屬性值94<BR>9-2-12 製作數值輸入框number屬性值95<BR>9-2-13 製作指定範圍的數值輸入框range<BR> 屬性值95<BR>9-2-14 指定顏色color屬性值96<BR>9-2-15 製作不顯示但要傳送的信息hidden<BR> 屬性值96<BR>9-2-16 製作輸入時間的控件time屬性值97<BR>9-2-17 製作輸入日期的控件date屬性值98<BR>9-2-18 製作輸入周次week屬性值98<BR>9-2-19 製作輸入年份和月份month<BR> 屬性值99<BR>9-2-20 本地與世界標準時間datetime/<BR> datetime-local屬性值99<BR>9-2-21 製作選擇文件後上傳的file<BR> 屬性值100<BR>9-3 建立多行輸入的文字框<BR> <textarea>元素101<BR>9-4 為對象加上關聯標記<BR> <label>元素102<BR>9-5 顯示進度<progress>元素103<BR>9-6 顯示儀錶值<meter>元素103<BR>9-7 下拉式選單與列表框<BR> <select>和<option>元素104<BR>9-7-1 建立下拉式選單 104<BR>9-7-2 建立列表框105<BR>9-7-3 選項組化<optgroup>元素106<BR>9-8 製作文字框的候補選項<BR> <datalist>和<option>元素107<BR>9-9 表單組件群組化<BR> <fieldset>和<legend>元素108<BR>9-10 加密密鑰<keygen>元素109<BR>習題110<BR>第10章 HTML功能總結<BR>10-1 全局屬性112<BR>10-2 事件屬性115<BR>10-3 認識<script>元素與一個<BR> ?超簡單的JavaScript應用117<BR>10-4 設定一般區塊<div>元素119<BR>10-5 設定一般範圍<span>元素119<BR>10-6 區塊層級與行內層級120<BR>10-7 網頁佈局121<BR>10-7-1 <header>元素與群組化標題122<BR>10-7-2 <nav>元素應用實例122<BR>10-7-3 <article>元素應用實例123<BR>10-7-4 <aside>元素應用實例123<BR>10-8 HTML章節的概念124<BR>10-9 日期與時間<time>元素124<BR>習題125<BR><BR>第二篇 CSS3完整學習<BR>第11章 CSS3的基礎知識<BR>11-1 CSS基本語法129<BR>11-1-1 CSS基本語法格式129<BR>11-1-2 多個選擇器使用<BR> ?相同的聲明區塊129<BR>11-1-3 CSS的批註129<BR>11-2 CSS顏色設定130<BR>11-2-1 1600萬種顏色130<BR>11-2-2 網絡安全顏色―― 256種顏色130<BR>11-2-3 HSL顏色131<BR>11-3 套用CSS的方法132<BR>11-4 class選擇器133<BR>11-5 字體133<BR>11-5-1 設置字體名稱的<BR> ?font-family屬性134<BR>11-5-2 設置字號的font-size屬性134<BR>11-5-3 設置字體樣式的font-style屬性135<BR>11-5-4 設置字體樣式的<BR> ?font-weight屬性135<BR>11-5-5 font-variant136<BR>11-5-6 font-size-adjust136<BR>11-5-7 font137<BR>11-5-8 @font-face137<BR>11-5-9 綜合應用137<BR>11-6 id選擇器138<BR>11-7 屬性選擇器138<BR>11-8 全域選擇器140<BR>11-9 虛擬選擇器140<BR>11-9-1 鏈接的虛擬類別:link和:visited140<BR>11-9-2 動作虛擬類別141<BR>11-9-3 目標虛擬類別141<BR>11-10 前綴詞的使用142<BR>習題142<BR>第12章 段落文字的編排知識<BR>12-1 設置文字對齊方式的text-align<BR> 屬性144<BR>12-2 設置首行縮排的text-indent<BR> 屬性144<BR>12-3 設定行高的line-height屬性145<BR>12-4 設置字母間距的letter-spacing<BR> 屬性146<BR>12-5 設置文字間距的word-spacing<BR> 屬性147<BR>12-6 處理空格符的white-space屬性147<BR>12-7 大小寫轉換的text-transform<BR> 屬性148<BR>12-8 設置文字陰影的text-shadow<BR> 屬性149<BR>12-9 設置線條裝飾的text-decoration<BR> 屬性149<BR>12-10 再談線條裝飾150<BR>12-10-1 text-decoration-line150<BR>12-10-2 text-decoration-color150<BR>12-10-3 text-decoration-style151<BR>12-11 設定制表符寬度的tab-size<BR> ? 屬性151<BR>12-12 設定換行的word-wrap屬性152<BR>12-13 設定文字超出範圍的<BR> ? text-overflow屬性153<BR>習題153<BR>第13章 將CSS應用在項目列表<BR>13-1 建立項目列表符號的<BR> list-style-type屬性155<BR>13-2 建立圖片項目符號的<BR> list-style-image屬性156<BR>13-3 項目符號與編號位置的<BR> list-style-position屬性156<BR>13-4 簡易表示法list-style157<BR>習題157<BR>第14章 設計背景<BR>14-1 透明色159<BR>14-1-1 rgba()函數159<BR>14-1-2 hsla()函數159<BR>14-1-3 透明度opacity159<BR>14-2 設置背景顏色的<BR> background-color屬性160<BR>14-3 設置背景圖像的<BR> background-image屬性161<BR>14-4 設置背景是否重複出現的<BR> background-repeat屬性162<BR>14-5 設置背景圖片位置的<BR> background-position屬性163<BR>14-6 設置背景圖片大小的<BR> background-size屬性165<BR>14-7 設置背景圖片隨內容捲動的<BR> background-attachment屬性166<BR>14-8 背景簡易表示法background167<BR>習題168<BR>第15章 完整學習Box Model<BR>15-1 認識Box Model170<BR>15-2 外邊距的設計170<BR>15-2-1 <body>的外邊距172<BR>15-2-2 外邊距的合併172<BR>15-2-3 外邊距應用在段落輸出的實例173<BR>15-3 內邊距的設計174<BR>15-4 邊框的設計175<BR>15-4-1 邊框樣式176<BR>15-4-2 邊框色彩178<BR>15-4-3 邊框寬度179<BR>15-4-4 邊框屬性的簡易表示法179<BR>15-4-5 圓角邊框180<BR>15-4-6 設計圖案邊框181<BR>15-5 補充背景功能background-clip和<BR> back ground-origin屬性187<BR>15-5-1 設定背景顯示範圍的<BR> background-clip屬性187<BR>15-5-2 設定背景圖案的基準位置的<BR> background-origin屬性187<BR>15-6 設定盒子陰影的box-shadow<BR> 屬性188<BR>15-7 設定盒子寬度與高度的box-sizing<BR> 屬性190<BR>15-8 內容超出範圍時的顯示方式190<BR>15-9 outline屬性192<BR>15-10 設定內容盒子尺寸的resize<BR> ? 屬性193<BR>習題194<BR>第16章 將CSS應用在表格數據<BR>16-1 表格標題196<BR>16-2 表格底色的設計196<BR>16-3 表格框線設計197<BR>16-4 單元格框線的距離197<BR>16-5 為單元格內容加上內邊距198<BR>16-6 顯示或隱藏空白的單元格199<BR>16-7 表格框線的模式201<BR>16-8 單元格內容排版201<BR>16-9 表格版面的排版202<BR>16-10 綜合應用202<BR>習題204<BR>第17章 設計漸變效果<BR>17-1 線性漸變函數<BR> ?linear-gardient()206<BR>17-2 放射狀漸變函數<BR> ?radial-gradient()208<BR>17-3 重複線性漸變函數<BR> ?repeating-linear-gradient()209<BR>17-4 重複放射性漸變函數<BR> ?repeating-radial-gradient()210<BR>習題211<BR>第18章 設計多欄版面<BR>18-1 設定欄數量與寬度的columns<BR> ?屬性213<BR>18-1-1 設定欄數量的column-count<BR> ? 屬性213<BR>18-1-2 設定欄寬度的column-width<BR> ? 屬性214<BR>18-1-3 欄數量與寬度簡易<BR> ? 表示法columns214<BR>18-2 設定欄與欄間距的column-gap<BR> ?屬性215<BR>18-3 設定欄與欄線屬性column-rule215<BR>18-3-1 設定欄線類型的column-rule-style<BR> ?屬性215<BR>18-3-2 設定欄線顏色的column-rule-color<BR> ?屬性216<BR>18-3-3 設定欄線寬度的column-rule-width<BR> ?屬性216<BR>18-3-4 欄線屬性的簡易表示法column-rule217<BR>18-4 設置跨欄顯示的column-span<BR> ?屬性217<BR>18-5 設定欄高度的column-fill屬性218<BR>18-6 換欄或換頁219<BR>18-6-1 break-before219<BR>18-6-2 break-after220<BR>18-6-3 break-inside220<BR>習題221<BR>第19章 定位與網頁排版<BR>19-1 設定盒子的大小223<BR>19-2 設定盒子大小的極限223<BR>19-3 display屬性224<BR>19-4 用於定位的position屬性225<BR>19-4-1 position屬性值是relative的程序<BR> ?實例226<BR>19-4-2 position屬性值是absolute的程序<BR> ?實例228<BR>19-4-3 position屬性值是fixed的程序<BR> ?實例229<BR>19-4-4 綜合應用229<BR>19-5 設定與解除圖旁串字230<BR>19-5-1 設定圖旁串字的float屬性230<BR>19-5-2 清除圖旁串字的clear屬性231<BR>19-6 堆疊順序232<BR>19-7 顯示或隱藏元素的visibility屬性233<BR>19-8 用box調整元素呈現方式的<BR> ?object-fit屬性233<BR>19-9 設定垂直對齊的vertical-align<BR> ?屬性234<BR>習題235<BR>第20章 使用彈性容器（flexible container）排版<BR>20-1 flex container的基本概念237<BR>20-2 彈性容器的聲明237<BR>20-3 設定版面方向（flex-direction）238<BR>20-4 設定彈性區塊內為多行排列<BR> ?（flex-wrap）239<BR>20-5 直接設定排版方向和行數<BR> ?（flex-flow）241<BR>20-6 版面區塊的排列順序（order）241<BR>20-7 增加版面區塊對象寬度<BR> ?（flex-grow）243<BR>20-8 縮減版面區塊對象寬度<BR> ?（flex-shrink）243<BR>20-9 調整前的區塊對象寬度<BR> ?（flex-basis）244<BR>20-10 增減區塊寬度的簡易表示法（flex）245<BR>20-11 設定留白的方式<BR> ?（justify-content）246<BR>20-12 垂直方向留白的處理<BR> ?（align-items）247<BR>20-13 個別版面區塊留白的處理<BR> ?(align-self)249<BR>20-14 彈性容器有多行版面區塊時留白<BR> 的處理（align-content）250<BR>20-15 綜合應用252<BR>習題252<BR>第21章 動畫設計 ―― 過渡效果<BR>21-1 設定過渡效果時間的屬性<BR> ?transition-duration254<BR>21-2 設定過渡效果的屬性<BR> ?transition-property254<BR>21-3 設定過渡延遲時間的屬性<BR> ?transition-delay255<BR>21-4 設計過渡速度的屬性<BR> ?transition-timing-function255<BR>21-5 過渡效果的簡易表示法<BR> ?transition256<BR>21-6 綜合應用257<BR>習題257<BR>第22章 設計網頁動畫<BR>22-1 關鍵幀（@keyframes）259<BR>22-2 運用關鍵幀（animation-name）259<BR>22-3 設定動畫時間<BR> ?（animation-duration）259<BR>22-4 設計動畫變速方式<BR> ?（animation-timing-function）260<BR>22-5 設定動畫次數<BR> ?（animation-iteration-count）261<BR>22-6 設定動畫重複執行的方向<BR> ?（animation-direction）262<BR>22-7 設定動畫執行或是暫停<BR> ?（animation-play-state）263<BR>22-8 設定動畫延遲的時間<BR> ?（animation-delay）264<BR>22-9 設定動畫延遲與完成的樣式<BR> ?（animation-fill-mode）264<BR>22-10 動畫的簡易表示法animation265<BR>習題265<BR>第23章 變形動畫<BR>23-1 2D變形效果267<BR>23-2 2D變形的基準點271<BR>23-3 3D變形效果271<BR>23-4 3D變形的基準點274<BR>23-5 設定透視圖視點距離275<BR>23-6 透視圖的基準點277<BR>23-7 巢狀元素產生時子元素的處理277<BR>23-8 是否顯示背面內容278<BR>習題279<BR>第24章 響應式（RWD）網頁設計<BR>24-1 設置鼠標指針的形狀281<BR>24-2 媒體查詢281<BR>24-2-1 媒體類型282<BR>24-2-2 媒體特性282<BR>24-2-3 媒體查詢設計使用@media282<BR>24-2-4 媒體查詢設計使用<link>284<BR>24-2-5 媒體查詢設計使用@import285<BR>24-3 選擇器完整說明285<BR>24-4 響應式網頁設計289<BR>24-4-1 響應式網頁實例 290<BR>24-4-2 設計響應式網頁的基本原則290<BR>24-4-3 viewport290<BR>24-4-4 瀏覽畫面設計291<BR>24-4-5 導覽區套用樣式表292<BR>24-4-6 文章區套用樣式表293<BR>24-4-7 側邊欄區套用樣式表293<BR>24-4-8 其他設計293<BR>24-4-9 完整程序內容294<BR>習題294<BR><BR>第三篇 邁向網頁設計高手之路<BR>第25章 JavaScript基礎知識<BR>25-1 JavaScript的功能297<BR>25-2 JavaScript的輸出297<BR>25-3 撰寫JavaScript代碼的位置297<BR>25-3-1 將JavaScript代碼寫在<head><BR> ?元素內298<BR>25-3-2 將JavaScript代碼寫在<body><BR> ?元素內298<BR>25-3-3 以外部文件方式撰寫JavaScript<BR> ?代碼299<BR>25-3-4 存取HTML內容輸出的實例299<BR>25-3-5 document.write()輸出的實例299<BR>25-4 JavaScript基本語法300<BR>25-5 聲明變量301<BR>25-6 數據類型302<BR>25-6-1 數值數據302<BR>25-6-2 字符串數據303<BR>25-6-3 對象數據303<BR>25-6-4 綜合應用304<BR>25-7 運算符304<BR>25-7-1 算術運算符305<BR>25-7-2 遞增、遞減運算符305<BR>25-7-3 賦值運算符306<BR>25-8 布爾值、比較運算與邏輯運算306<BR>25-8-1 布爾值306<BR>25-8-2 比較運算符307<BR>25-8-3 邏輯運算符308<BR>25-9 位運算符309<BR>25-10 運算符的優先級310<BR>習題310<BR>第26章 JavaScript的流程控制<BR>26-1 if 語句312<BR>26-1-1 if 語句312<BR>26-1-2 if … else語句312<BR>26-1-3 if … else if … else語句313<BR>26-1-4 判斷條件可以擴展314<BR>26-2 switch語句314<BR>26-3 for語句316<BR>26-4 while語句317<BR>26-5 do … while語句317<BR>26-6 特殊表達式318<BR>26-7 數組array319<BR>26-7-1 Array的方法320<BR>26-7-2 Array的屬性320<BR>26-8 for/in語句321<BR>26-9 綜合應用322<BR>習題322<BR>第27章 JavaScript的函數設計<BR>27-1 基本函數設計324<BR>27-2 設計一個可以傳遞參數的函數325<BR>27-3 函數調用同時有返回值325<BR>27-4 全局變量與局部變量326<BR>27-5 函數被定義在對象內327<BR>習題328<BR>第28章 瀏覽器對象模型BOM<BR>28-1 認識BOM330<BR>28-2 window對象330<BR>28-2-1 有趣的程序測試330<BR>28-2-2 window對象的屬性331<BR>28-2-3 window對象的方法333<BR>28-3 screen對象338<BR>28-4 navigator對象338<BR>28-5 history對象339<BR>28-6 location對象340<BR>習題341<BR>第29章 HTML的文件對象模型DOM<BR>29-1 認識DOM343<BR>29-2 取得HTML元素344<BR>29-2-1 getElementByID()344<BR>29-2-2 getElementsByTagName()344<BR>29-2-3 getElementsByClassName()345<BR>29-2-4 querySelectorAll()和<BR> ?querySelector()345<BR>29-2-5 雙層條件的存取功能346<BR>29-2-6 返回串行的長度length346<BR>29-2-7 元素上下文屬性347<BR>29-2-8 元素大小與位置348<BR>29-2-9 更改圖片大小349<BR>29-3 更改HTML元素內容349<BR>29-3-1 更改標題或段落的內容349<BR>29-3-2 更改屬性內容350<BR>29-4 DOM節點和瀏覽元素350<BR>29-4-1 認識相關名詞351<BR>29-4-2 存取節點值351<BR>29-4-3 <body>和<html>節點352<BR>29-4-4 相同父節點的兄弟節點內容353<BR>29-4-5 存取父節點354<BR>29-5 建立、插入、刪除節點355<BR>29-5-1 建立節點355<BR>29-5-2 將節點插入特定位置355<BR>29-5-3 刪除節點356<BR>29-5-4 更換節點356<BR>29-6 DOM與CSS357<BR>29-7 HTML的集合對象359<BR>29-7-1 document.images359<BR>29-7-2 document.forms360<BR>29-7-3 document.links361<BR>29-8 DOM 事件屬性361<BR>29-8-1 onload與onunload事件362<BR>29-8-2 onchange事件362<BR>29-8-3 onclick事件363<BR>29-8-4 ondblclick事件364<BR>29-8-5 onmouseover和onmouseout事件364<BR>29-8-6 onmousedown和onmouseup事件364<BR>29-8-7 在JavaScript內建立事件365<BR>習題366<BR>第30章 HTML Canvas繪圖與動畫<BR>30-1 建立Canvas繪圖環境368<BR>30-2 繪製矩形368<BR>30-2-1 rect()、stroke()和strokeRect()368<BR>30-2-2 fillRect()和fillStyle()369<BR>30-2-3 clearRect()370<BR>30-3 繪製線條370<BR>30-3-1 繪製直線370<BR>30-3-2 beginPath()和closePath()371<BR>30-3-3 lineWidth371<BR>30-3-4 fill()372<BR>30-3-5 lineCap372<BR>30-3-6 lineJoin373<BR>30-4 繪製圓形或弧線373<BR>30-4-1 繪製圓形373<BR>30-4-2 繪製弧線374<BR>30-4-3 順時針弧線或逆時針弧線375<BR>30-4-4 實心圓的繪製376<BR>30-4-5 arcTo()376<BR>30-5 色彩漸變效果的處理377<BR>30-5-1 線性漸變377<BR>30-5-2 輻射漸變379<BR>30-5-3 將漸變應用在矩形框線380<BR>30-6 繪製文字382<BR>30-6-1 font382<BR>30-6-2 fillText()和strokeText382<BR>30-6-3 文字輸出與漸變的應用382<BR>30-6-4 輸出文字居中對齊383<BR>30-7 繪製圖像383<BR>30-8 建立簡單動畫385<BR>30-9 位移與旋轉386<BR>習題390<BR>第31章 取得用戶的經緯度數據<BR>31-1 HTML的 Geolocation392<BR>31-2 getCurrentPosition()393<BR>31-3 watchPosition()和clearWatch()394<BR>習題395<BR>第32章 jQuery Mobile移動版網頁設計<BR>32-1 安裝Opera Mobile Classic<BR> ?Emulator397<BR>32-2 我的第一個採用jQuery Mobile<BR> ?設計的網頁398<BR>32-3 jQuery的基本網頁架構399<BR>32-4 超鏈接功能401<BR>32-5 對話框的設計402<BR>32-6 頁面的切換402<BR>32-7 建立按鈕403<BR>32-7-1 使用<input>元素建立按鈕403<BR>32-7-2 使用<button>元素建立按鈕404<BR>32-7-3 使用<a>元素建立按鈕404<BR>32-7-4 按鈕圖標404<BR>32-7-5 設定按鈕圖標的位置404<BR>32-7-6 更多圖標設定405<BR>32-8 彈出框的設計406<BR>32-9 工具欄406<BR>32-9-1 頁首區406<BR>32-9-2 頁尾區407<BR>32-10 導航欄407<BR>32-11 面板（Panel）409<BR>32-12 可折疊區塊410<BR>32-12-1 基本可折疊區塊410<BR>32-12-2 巢狀可折疊區塊411<BR>32-13 建立表格411<BR>32-13-1 Reflow表格411<BR>32-13-2 Column Toggle表格412<BR>32-13-3 將樣式表應用在表格413<BR>32-14 列表顯示414<BR>32-15 列表符號416<BR>32-15-1 默認列表符號 416<BR>32-15-2 自設列表圖標416<BR>32-15-3 清單的縮圖 417<BR>32-15-4 為縮圖加上文字批註417<BR>32-15-5 分割列表按鈕417<BR>32-16 製作輸入表單418<BR>32-16-1 <label>元素418<BR>32-16-2 text屬性418<BR>32-16-3 功能按鈕屬性419<BR>32-16-4 radio屬性420<BR>32-16-5 checkbox屬性420<BR>32-16-6 select屬性421<BR>32-16-7 range屬性421<BR>32-16-8 On/Off切換設計422<BR>習題422<BR>第33章 將網頁轉成APP應用程序<BR>33-1 準備HTML文件424<BR>33-2 準備config.xml配置文件424<BR>33-3 壓縮網頁與配置文件425<BR>33-4 建立APP應用程序425<BR>33-5 重新上傳文件427<BR>附錄A HTML標記列表<BR>附錄B HTML屬性索引表<BR>附錄C CSS屬性索引表<BR>附錄D 網頁設計使用的單位<BR>D-1 絕對單位445<BR>D-2 相對單位445<BR>D-3 百分比445<BR>附錄E 認識網頁設計的顏色 </div>
</div>
</div>
</div>
<div class="col-12 col-lg-2 d-none d-lg-block">
<div class="w200 m0" style="position:sticky;top:126px;">
<div class="position-relative">
<div class="TitleUnderline color-blue2 "><i class="bi bi-bookmark-star-fill"></i> 主題書展</div>
<a href="/promote/publisher" class="text text-blue2 position-end Bold fs-12">更多 <i class="bi bi-plus-lg"></i></a>
</div>
<div class="swiper-container SwiperVertical w200 h730 Vertical180 p0">
<div class="swiper-wrapper ">
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/linefriends/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14963.gif" alt="三民書局Line好友募集中" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">加入即送50元購書金</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/13reading/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/15007.gif" alt="13號悅讀日" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0122original/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14829.gif" alt="匯讀中外曬書展" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">5折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/monthly_coupon/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14679.gif" alt="三民月月讀書金" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">滿600現折50</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/simplifiedbooks/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/13576.gif" alt="簡體每月選書" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/dramabooks/index/?id=a0&pi=1&utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://activity.sanmin.com.tw/promotions/event/dramabooks/180.gif" alt="簡體熱門影劇書展" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/2026fifa/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/15043.gif" alt="2026世界盃足球賽" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">好評熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2018/0604audiobook/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14609.gif" alt="廖彩杏-用有聲書輕鬆聽出英語力 168本啟蒙經典完整書單" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">19折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0610healthy/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/15053.gif" alt="給忙碌生活的健康提醒｜讀懂身體發出的訊號" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0603cosmosbook/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/15047.gif" alt="天地圖書50週年書展" />
</div>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">5折起</span></div>
</a>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
$(function () {
SwiperVertical('.Vertical180', 5);
})
</script>
</div>
</div>
</div>
<div id="IndexRelation" class="mb5"></div>
</div>
<div class="d-lg-none">
<div class="mt5">
<div class="position-relative">
<h2 class="TitleUnderline color-blue2 "><i class="bi bi-bookmark-star-fill"></i> 主題書展</h2>
<a href="/promote/publisher" class="text text-blue2 position-end Bold">更多書展 <i class="bi bi-plus-lg"></i></a>
</div>
<div class="py5">
<div class="swiper-container PromoAD180" id="PromoAD180">
<div class="swiper-wrapper ">
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/linefriends/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14963.gif" alt="三民書局Line好友募集中" />
</div>
<h3 class="d-none">三民書局Line好友募集中</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">加入即送50元購書金</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/13reading/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/15007.gif" alt="13號悅讀日" />
</div>
<h3 class="d-none">13號悅讀日</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0122original/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14829.gif" alt="匯讀中外曬書展" />
</div>
<h3 class="d-none">匯讀中外曬書展</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">5折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/monthly_coupon/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14679.gif" alt="三民月月讀書金" />
</div>
<h3 class="d-none">三民月月讀書金</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">滿600現折50</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/simplifiedbooks/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/13576.gif" alt="簡體每月選書" />
</div>
<h3 class="d-none">簡體每月選書</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/event/dramabooks/index/?id=a0&pi=1&utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://activity.sanmin.com.tw/promotions/event/dramabooks/180.gif" alt="簡體熱門影劇書展" />
</div>
<h3 class="d-none">簡體熱門影劇書展</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/2026fifa/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/15043.gif" alt="2026世界盃足球賽" />
</div>
<h3 class="d-none">2026世界盃足球賽</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">好評熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2018/0604audiobook/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/14609.gif" alt="廖彩杏-用有聲書輕鬆聽出英語力 168本啟蒙經典完整書單" />
</div>
<h3 class="d-none">廖彩杏-用有聲書輕鬆聽出英語力 168本啟蒙經典完整書單</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">19折起</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0610healthy/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/15053.gif" alt="給忙碌生活的健康提醒｜讀懂身體發出的訊號" />
</div>
<h3 class="d-none">給忙碌生活的健康提醒｜讀懂身體發出的訊號</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">熱賣中</span></div>
</a>
</div>
<div class="swiper-slide text-center p2">
<a href="https://activity.sanmin.com.tw/promotions/2026/0603cosmosbook/index?utmgtm=Product180bn" target="_blank">
<div class="CoverBox mw190 bg-white p5 shadow-2 ">
<img class="lazyload mh100" src="//cdnec.sanmin.com.tw/images/loading1.gif" data-src="https://cdnec.sanmin.com.tw/images/promotions/180/15047.gif" alt="天地圖書50週年書展" />
</div>
<h3 class="d-none">天地圖書50週年書展</h3>
<div class="fs-12 text-blue1 mt3">優惠方式：<span class="price">5折起</span></div>
</a>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script>
$(function() {
SwiperRWD('#PromoAD180',2,3,6);
})
</script>
</div>
</div>
</div>
<div class="content mb10">
<h2 class="TitleUnderline color-sanmin mb0">
<i class="bi bi-exclamation-circle-fill"></i> 購物須知
</h2>
<div class="p10 bg-gray">
<p><span style="color:#237a0f;">大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。</span><br /><br /><span style="color:#ff0000;">特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。</span><br /><br /><span style="color:#006699;">無現貨庫存之簡體書，將向海外調貨：</span><br /><span style="color:#006699;">海外有庫存之書籍，等候約45個工作天;</span><br /><span style="color:#006699;">海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。</span></p><p>為了保護您的權益，「三民網路書店」<span style='color:red'>提供會員七日商品鑑賞期</span>(收到商品為起始日)。</p><p>若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。</p>
</div>
</div>
</div>
<script type="text/javascript" src="/scripts/rwd/pinch-zoom.umd.js"></script>
<script>
$(function () {
if (navigator.userAgent == 'SanminTools') {
SanminTools.camera.openScanButton();
}
$("#Scaner").keyup(function (e) {
if (e.keyCode == 13) {
var EAN = $("#Scaner").val();
location.href = 'https://www.sanmin.com.tw/product/EAN/' + EAN;
}
});
})
</script>
<!-- 下方按鈕 mobile -->
<div class="MobileBottomNav ProductBottomCart">
<div class="row">
<div class="col-6 PriceStock">
<div>
<div class="DiscPrice text-inherit">
<span>優惠價：</span><span class="Disc disc-87">87</span>
<span class="Price">668</span>
</div>
<div class="mobile-store fs-14 lh-14 text-brown">
<span>海外經銷商無庫存，到貨日平均30天至45天</span>
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col">
<button type="button" class="bottomBtn" onclick="AddCollect('007191733');">
<i class="bi bi-heart-fill"></i>
<br> 收藏
</button>
</div>
<div class="col">
<button type="button" class="bottomBtn bg-sanmin" onclick="AddCart('007191733', '');">
<i class="bi bi-cart-fill"></i>
<br> 加入購物車
</button>
</div>
</div>
</div>
</div>
</div>
<!-- end 下方按鈕 mobile -->
<script>
$(function () {
var c = getCookie('weblinkauth');
if (c != '') {
var wUser = JSON.parse(c);
var $btn = $('<button>').addClass('btn btn-orange2-l px10 py2').text('推薦至圖書館');
$btn.appendTo('#btn-WebLink');
$btn.click(function () {
window.open('https://weblink.bookhouse.com.tw/WB2024/dy.aspx?ui=' + wUser.ui + '&id=' + wUser.id + '&isbn=9787302514633', '圖書推薦採訪整合系統',);
});
}
})
</script>
<script>
function PriceTabs( tab = 0) {
var $ctrl = $('#PriceTabs');
var $tabs = $ctrl.find('>.title');
var $content = $ctrl.find('>.body');
var i = 0;
var link = '';
$tabs.find('.tab').click(function () {
i = $(this).index();
link = $(this).attr('link');
if (link != '' && tab != i) {
location.href ='/product/index/'+ link;
} else {
$tabs.find('.active').removeClass('active');
$content.find('.active').removeClass('active');
$tabs.find('.tab').eq(i).addClass('active');
$content.find('> div').eq(i).addClass('active');
}
});
if ($tabs.find('.tab').length == 1 ) {
$tabs.hide();
tab = 0;
} else {
$tabs.show();
}
$tabs.find('.tab').eq(tab).click();
}
$(function () {
PriceTabs(0);
})
</script>
</div>
<div class="MobileBottomNav">
<a href="https://www.sanmin.com.tw/promote/top"><i class="bi bi-trophy-fill"></i><br />暢銷榜</a>
<a href="https://www.sanmin.com.tw/home/faq"><i class="bi bi-question-circle-fill"></i><br />客服中心</a>
<a href="https://www.sanmin.com.tw/shopping/car/collect"><i class="bi bi-heart-fill"></i><br />收藏</a>
<a href="#"><label for="HistoryHide"><i class="bi bi-book"></i><br />瀏覽紀錄</label></a>
<a href="https://www.sanmin.com.tw/member/index"><i class="bi bi-people-fill"></i><br />會員專區</a>
</div>
<style>
.SiteMap .col{
padding:1px;
}
</style>
<footer>
<div class="content">
<div class="row">
<div class="col-12 col-lg-8 p0">
<div class="Bold text-yellow fs-20">網站導航 >> </div>
<div class="p5 lh-18 mb10">
<div class="row row-cols-lg-5 row-cols-3 text-left fs-16 SiteMap">
<div class="col"><a href="https://www.sanmin.com.tw/static/history">關於我們</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/store/index">門市專區</a></div>
<div class="col"><a href="http://www.104.com.tw/jobbank/custjob/index.php?r=cust&j=456143252c393f6831593c20533f39197413b4426262626683d43512270j53">人才招募</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/other/voucher">禮券兌換</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/promote/bonus">紅利積點</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/promote/library">中文分類</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/product/scheme/?id=000">圖書分類法</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/product/schemechina/?id=A">中國圖書館分類法</a></div>
<div class="col "><a href="https://www.sanmin.com.tw/home/faq/">常見問題</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/home/faq/新手購書">新手購書</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/member/index/couponreg">通關密碼</a></div>
<div class="col"><a href="https://elearning.sanmin.com.tw/">學習平台</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/static/catalogue">圖書館採購/編目</a></div>
<div class="col"><a href="https://activity.sanmin.com.tw/nou/">空中大學購書</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/static/businesscustomer">企業合作</a></div>
<div class="col MobileHide"><a href="https://www.sanmin.com.tw/other/cooperation">異業合作</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/blog/index">閱讀潮評</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/promote/bonus">紅利兌換</a></div>
<div class="col"><a href="https://www.sanmin.com.tw/static/g_Link">好站連結</a></div>
</div>
</div>
<div class="d-none d-md-inline-block">
<div class="Bold text-yellow fs-20">圖書目錄 >> </div>
<div class="p5 lh-18 mb10">
<div class="row row-cols-3 text-left fs-16">
<div class="col p0">
<a href="https://drive.google.com/file/d/1lqCGLstDfjSsP19EBNKM7Yv1M0e-41So/view?usp=sharing">三民・東大・弘雅三民</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_9F89z01Pbc7RNVkBoaEf-kbKkBo3eLS/view?usp=sharing">小山丘童書(0-6歲)</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_5CdIcQpltRg_W40Qj8aCtN_KMy9KEU4/view?usp=sharing">兒童・青少年(7歲以上)</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_9IfRSoXgMyLykhCF84oOk-iifxpW9q6/view?usp=sharing">古籍圖書目錄</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_BTZb2IMtGzdlXaOCSsFeqyebWPREv9E/view?usp=sharing">古典圖書目錄</a>
</div>
<div class="col p0">
<a href="https://drive.google.com/file/d/1_Bzpauv2oxyua-zIN0ggqs7isy0Aijcv/view?usp=sharing">畢業禮品</a>
</div>
</div>
</div>
<div class="Bold text-yellow fs-20">聯絡資訊 >> </div>
<div class="row text-light fs-14">
<div class="col">
<div class="text-light Bold"><i class="fas fa-map-marker-alt"></i> 網路書店</div>
<div><a href="https://goo.gl/maps/hnxoce4uHmT2" class="text-light" target="_blank">台北市復興北路386號</a></div>
<div>電話：02-2500-6600轉 130、131</div>
<div>
客服信箱：<a href="mailto:ec@sanmin.com.tw">ec@sanmin.com.tw</a>
</div>
</div>
<div class="col">
<div class="text-light Bold"><i class="fas fa-map-marker-alt"></i> 復北店</div>
<div><a href="https://goo.gl/maps/hnxoce4uHmT2" class="text-light" target="_blank">台北市復興北路386號</a></div>
<div>電話：02-2500-6600</div>
<div>營業時間：11:00 AM - 9:00 PM</div>
</div>
<div class="col">
<div class="text-light Bold">
<i class="fas fa-map-marker-alt"></i> 重南店
</div>
<div><a href="https://goo.gl/maps/XSHRbPBDf5s" class="text-light" target="_blank">台北市重慶南路一段61號</a></div>
<div>電話：02-2361-7511</div>
<div>營業時間：11:00 AM - 9:00 PM</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 p0">
<div class="text-center mb10">
<a href="https://www.sanmin.com.tw/other/epaper" target="_blank"><img src="https://cdnec.sanmin.com.tw/images/layout/epaper.gif" alt="訂閱電子報"></a>
<a href="https://www.sanmin.com.tw/staticpage/hkck/index.html" target="_blank"><img src="https://cdnec.sanmin.com.tw/images/layout/hkckship.gif" alt="香港便利店"></a>
</div>
<div class="Bold text-yellow fs-20 text-left">聚焦三民 >> </div>
<div id="FollowSanmin" class="">
<div class="row row-cols-5">
<div class="col"><a href="https://www.facebook.com/sanminfans/" target="_blank"><div class="border"><i class="bi bi-facebook"></i></div><span>三民書局</span></a></div>
<div class="col"><a href="https://www.facebook.com/sanmineditor/" target="_blank"><div class="border"><i class="bi bi-facebook"></i></div><span>三民出版</span></a></div>
<div class="col"><a href="https://www.instagram.com/sanminbook/" target="_blank"><div class="border"><i class="bi bi-instagram"></i></div></a></div>
<div class="col"><a href="https://page.line.me/xsl3812i?oat_content=url&openQrModal=true" target="_blank"><div class="border"><i class="bi bi-line"></i></div></a></div>
<div class="col"><a href="https://www.youtube.com/channel/UC3ws3A0NjQcJmN1ZPs-UWgQ" target="_blank"><div class="border"><i class="bi bi-youtube"></i></div></a></div>
</div>
</div>
<div class=" text-center pb10">
<img src="https://cdnec.sanmin.com.tw/images/logo/footer_logo_g.png" class="mw-100" alt="三民網路書店">
</div>
<div class="section px10">
<div class="copyright fs-14 lh-20 w260 m0">
<div>本站著作權屬弘雅三民圖書股份有限公司<br />及相關著作權所有人所有</div>
<div>Copyright © San Min Book Co.,Ltd.<br /> All Rights Reserved.</div>
<div>統一編號：05134324</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<div id="SideMenu">
<div class="MenuClose">
<button >
<i class="bi bi-x"></i>
</button>
<div style="flex:8"></div>
</div>
<ul class="MenuBar row">
<li class="col"> <a href="/member/joinApply "> <i class="bi bi-person-plus-fill"></i> 加入會員 </a></li>
<li class="col"> <a href="javascript:;" onclick="Login();"> <i class="bi bi-box-arrow-in-right"></i> 會員登入 </a> </li>
<li class="col"><a href="/home/faq"><i class="bi bi-question-circle-fill"></i> 客服中心</a></li>
<li class="col"><a href="/coupon/index/"><i class="bi bi-currency-dollar"></i> 領券專區</a></li>
</ul>
<div class="MenuBody ">
<div class="MenuLeft ">
<ul class="Menulink">
<li> <a href="/">首頁 </a> </li>
<li class="active" name="網站導航">
<a alt="網站導航" onclick="SideMenuActive('網站導航')">網站導航 </a> </li>
<li name="暢銷榜"> <a href="/promote/top" alt="暢銷榜" >暢銷榜 </a> </li>
<li name="新品"> <a href="/promote/hotbook" alt="新品" >新品 </a> </li>
<li name="中文書"> <a href="/promote/library" alt="中文書" >中文書 </a> </li>
<li name="外文書"> <a href="/promote/originaltext" alt="外文書" >外文書 </a> </li>
<li name="簡體書"> <a href="/promote/china" alt="簡體書" >簡體書 </a> </li>
<li name="三民東大"> <a href="/promote/sanmin" alt="三民東大" >三民東大 </a> </li>
<li name="親子館"> <a href="/promote/child" alt="親子館" >親子館 </a> </li>
<li name="文具禮品"> <a href="/promote/stationery" alt="文具禮品" >文具禮品 </a> </li>
<li name="漫畫館"> <a href="/promote/comic" alt="漫畫館" >漫畫館 </a> </li>
<li name="教科考用"> <a href="/promote/exam" alt="教科考用" >教科考用 </a> </li>
<li name="政府出版"> <a href="/promote/government" alt="政府出版" >政府出版 </a> </li>
<li name="香港出版"> <a href="/promote/hongkong" alt="香港出版" >香港出版 </a> </li>
<li name="大學出版"> <a href="/promote/university" alt="大學出版" >大學出版 </a> </li>
<li name="得獎作品"> <a href="/promote/prize" alt="得獎作品" >得獎作品 </a> </li>
<li name="套書"> <a href="/promote/packagebook" alt="套書" >套書 </a> </li>
<li name="紅利兌換"> <a href="/promote/bonus" alt="紅利兌換" >紅利兌換 </a> </li>
<li> <a href="https://activity.sanmin.com.tw/addbuy">加價構 </a> </li>
<li> <a href="/promote/publisher">主題書展 </a> </li>
</ul>
</div>
<div class="MenuRight ">
<div class="MenuContent show" name="網站導航">
<div class="panel bg-sanmin">
<div class="title">三民書局</div>
<div class="body">
<div class="row row-cols-2 lh-30 fs-16 sublist">
<div class="col"><a href="/static/history">關於我們</a></div>
<div class="col"> <a href="/store/index">門市專區 </a> </div>
<div class="col"> <a href="https://activity.sanmin.com.tw/promotions/event/122103sanmin/index">藝文講座 </a> </div>
<div class="col"> <a href="https://elearning.sanmin.com.tw/">學習平台 </a> </div>
<div class="col"><a href="/other/cooperation">異業合作</a></div>
<div class="col"><a href="/static/catalogue">圖書採購/編目</a></div>
<div class="col"><a href="http://www.104.com.tw/jobbank/custjob/index.php?r=cust&j=456143252c393f6831593c20533f39197413b4426262626683d43512270j53" target="_blank">人才招募</a></div>
<div class="col"><a href="/other/voucher">禮券兌換處</a></div>
<div class="col"><a href="/i">瀏覽器資訊</a></div>
</div>
</div>
</div>
<div class="panel bg-sanmin">
<div class="title">三民網路書店服務</div>
<div class="body">
<div class="row row-cols-2 sublist">
<div class="col"><a href="/static/termsofservice">會員服務條款</a></div>
<div class="col"><a href="/static/termssecurity">資訊安全警語</a></div>
<div class="col"><a href="/static/termspprivacy">隱私權政策</a></div>
<div class="col"><a href="/home/faq/新手購書">新手購書</a></div>
<div class="col"><a href="/product/scheme/?id=000">圖書分類</a></div>
<div class="col"><a href="/product/schemechina/?id=A">中國圖書館分類</a></div>
<div class="col"><a href="https://activity.sanmin.com.tw/nou/?Kind=Book">空中大學購書</a></div>
<div class="col"><a href="/static/g_divnk">好站連結</a></div>
</div>
</div>
</div>
<div class="panel bg-sanmin">
<div class="title">企業會員專區</div>
<div class="body">
<div class="row row-cols-2 sublist">
<div class="col"><a href="/static/businessclause/?type=join">加入企業會員</a></div>
<div class="col"><a href="/static/businessclause">服務條款</a></div>
<div class="col"><a href="/static/businessprocurement">會員須知</a></div>
</div>
</div>
</div>
<div class="panel bg-sanmin">
<div class="title">圖書目錄下載</div>
<div class="body">
<div class="row row-cols-2 sublist">
<div class="col-12"><a href="https://drive.google.com/file/d/1lqCGLstDfjSsP19EBNKM7Yv1M0e-41So/view?usp=sharing">三民・東大・弘雅三民</a></div>
<div class="col-12"><a href="https://drive.google.com/file/d/1_9F89z01Pbc7RNVkBoaEf-kbKkBo3eLS/view?usp=sharing">小山丘童書(0-6歲)</a></div>
<div class="col-12"><a href="https://drive.google.com/file/d/1_5CdIcQpltRg_W40Qj8aCtN_KMy9KEU4/view?usp=sharing">兒童・青少年(7歲以上)</a></div>
<div class="col"><a href="https://drive.google.com/file/d/1_9IfRSoXgMyLykhCF84oOk-iifxpW9q6/view?usp=sharing">古籍圖書目錄</a></div>
<div class="col"><a href="https://drive.google.com/file/d/1_BTZb2IMtGzdlXaOCSsFeqyebWPREv9E/view?usp=sharing">古典圖書目錄</a></div>
<div class="col"><a href="https://drive.google.com/file/d/1_Bzpauv2oxyua-zIN0ggqs7isy0Aijcv/view?usp=sharing">畢業禮品</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
var $Menu = $('#SideMenu');
$('.SideMenuBtn').click(function () {
$Menu.show();
if ($('#PromoUrl').length == 1) {
var url = $('#PromoUrl').val();
var id = $('#PromoteSelectID').val();
url=url.replace(/\/$/g,'');
var $a = $Menu.find('[href="' + url + '"]');
$a.parent().addClass('active');
SideMenuActive($a.attr('alt'), url);
}
})
$Menu.find('.MenuClose').click(function () {
$Menu.hide();
});
})
function SideMenuActive(name,url) {
var $m = $('#SideMenu');
var $mr = $m.find('.MenuRight');
var $tab = $mr.find('.MenuContent[name="' + name + '"]');
var $ml = $m.find('.Menulink');
$ml.find('.active').removeClass('active');
$ml.find('[name="'+ name +'"]').addClass('active');
$mr.find('.show').removeClass('show');
if ($tab.length == 0 && true) {
$tab = $('<div>').addClass('MenuContent').attr('name', name);
var $div = $('<div/>').html(name);
var PromoUrl = $('#PromoUrl').val();
if (PromoUrl !=null && PromoUrl.includes(url)) {
var $left = $('.left-menu');
$div.html($left.html());
} else {
$div = $('<div/>').load(url + '/?id=menu');
}
$div.appendTo($tab);
$tab.appendTo($mr);
}
$tab.addClass('show');
}
</script>
<input type="hidden" id="ScanInput">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="/scripts/rwd/click.js?v=13020016"></script>
<script src="/scripts/jquery.rwdImageMaps.min.js?v=13020016"></script>
<script src="/scripts/swiper/swiper.min.js?v=13020016"></script>
<script src="/scripts/rwd/silder.js?v=13020016"></script>
<script src="/scripts/lazyload.js"></script>
<script src="/scripts/mvcsite.js?v=13020016"></script>
<script type="application/ld+json">
{ "@context": "http://schema.org", "@type": "Book", "additionalType":"Product",
"@id": "https://www.sanmin.com.tw/product/index/007191733", "isbn": "9787302514633", "name": "HTML5+CSS3王者歸來（簡體書）",
"url": "https://www.sanmin.com.tw/product/index/007191733", "image": "https://cdnec.sanmin.com.tw/images/nobook.gif", "description":"書名：HTML5+CSS3王者歸來（簡體書），ISBN：9787302514633，出版社：清華大學出版社（大陸），作者：洪錦魁，頁數：451，出版日期：2019/04/01",
"BookFormat": "Paperback",
"numberOfPages": "451", "datePublished": "2019-04-01",
"typicalAgeRange":"0-0", "bookEdition": "", "version": "",
"author": [{ "@type": "Person", "name": "洪錦魁" }],
"publisher": [{ "@type": "Organization", "name": "清華大學出版社（大陸）" }],
"offers": { "@type": "Offer", "priceCurrency":"TWD", "price": "668",
"availability":"http://schema.org/OutOfStock", "url":"https://www.sanmin.com.tw/product/index/007191733",
"priceValidUntil":"2026-06-13" } }
</script>
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"首頁","item":"https://www.sanmin.com.tw"},{"@type":"ListItem","position":2,"name":"簡體書","item":"http://www.sanmin.com.tw/promote/china"},{"@type":"ListItem","position":3,"name":"電腦〈計算機〉","item":"http://www.sanmin.com.tw/promote/china/?id=nn14"},{"@type":"ListItem","position":4,"name":"電腦入門","item":"http://www.sanmin.com.tw/promote/china/?id=nn1401"}]}
</script>
<script type="text/javascript">
$(function () {
$(".TryToSeeSmall").lazyload();
$('.ProductImageSilder').bind('click mouseenter ', function () {
var isload = $(this).hasClass('isload');
if (!isload) {
$(".TryToSeeBig").lazyload();
$(this).addClass('isload');
}
})
var url = 'https://www.sanmin.com.tw/product/index/007191733';
var form = '<iframe src="https://www.facebook.com/plugins/like.php?href=' + url + '&width=146&layout=button_count&action=like&size=large&show_faces=true&share=true&height=40&appId=231535363937338" width="65vw" style="border:none;overflow:hidden;height:32px;" scrolling="no" frameborder="0"allowtransparency="true" allow="encrypted-media"></iframe>';
$('#DviFaceBook').html(form);
var SilderBottom = new Swiper(".ProductImageSilder .Silder-Bottom", {
spaceBetween: 5,
slidesPerView: 5,
freeMode: true,
watchSlidesProgress: true,
});
var SilderTop = new Swiper(".ProductImageSilder .Silder-Top", {
spaceBetween: 10,
thumbs: {
swiper: SilderBottom,
},
});
$('.ZoomIn').click(function () {
var $silder = $('.ProductCover');
var $top = $('.Silder-Top');
if ($silder.hasClass('bg-mask')) {
$silder.removeClass('bg-mask');
$(this).find('i').attr('class', 'bi bi-search');
} else {
$silder.addClass('bg-mask');
$(this).find('i').attr('class', 'bi bi-x-lg');
}
SilderTop.update();
SilderBottom.update();
});
App_History.add('007191733','730251463', 'HTML5+CSS3王者歸來（簡體書）', 'https://cdnec.sanmin.com.tw/images/nobook.gif');
onDisplay('IndexRelation', function () {
$('#IndexRelation').load('/product/relation/007191733');
});
$('.IntroSection').each(function () {
var $body = $(this).find('.SectionBody');
var h = $body.height();
var title = $(this).find('.SectionTitle').text();
if (h >= 150) {
var $btn = $('<button/>').addClass('IntroMore').html('More');
$btn.appendTo($body);
$btn.click(function () {
$body.css('max-height', 5000);
$(this).remove();
});
}
});
})
function PlatformAlert(title, url) {
var r = confirm("您將離開本網站，前往" + title);
if (r == true) {
window.open(url);
}
}
</script>
<script>
var iframeMode = false;
if (self.frameElement && self.frameElement.tagName == "IFRAME") {
iframeMode = true;
} else if (window.frames.length != parent.frames.length) {
iframeMode = true;
} else if (self != top) {
iframeMode = true;
}
if (iframeMode) {
$('body').addClass('iframe');
}
function AddCart(pf_id, addfrom) {
//Start-----GA加入購物車事件
sanminCrossDomain.push({ 'addPfid': pf_id });
//End-----GA加入購物車事件
if ($('#DivAddItem').length == 0) {
$('<div/>').attr('id', 'DivAddItem').appendTo('body');
}
var url = httpsHost + '/shopping/addItem/?id=' + pf_id + '&js=true&addfrom=' + addfrom;
$('.AddScript').remove();
var $Script = $('<script/>').addClass('.AddScript');
$Script.attr('src', url);
$Script.appendTo('body');
return true;
}
document.getElementById('ScanInput').addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
const value = this.value.trim();
if (value.length === 13) {
window.location.href = 'https://www.sanmin.com.tw/product/EAN/' + value;
}
}
});
</script>
</body>
</html>
