本書有DRM加密保護,需使用HyRead閱讀軟體開啟
  • HTML5、CSS3、RWD、 jQuery Mobile跨裝置網頁設計:掌握建立電腦&行動網站的關鍵技術
  • 點閱:804
  • 作者: 陳惠貞著
  • 出版社:碁峰資訊
  • 出版年:2015[民104]
  • ISBN:978-986-347-739-6 ; 986-347-739-7
  • 格式:PDF
  • 附註:原紙本書ISBN: 978-986-347-655-9

內容簡介

*徹底學會HTML5和CSS3的最新功能與設計技巧
*Responsive Web Design(RWD)讓網頁同時在PC/平板/手機完整呈現
*使用jQuery Mobile打造行動裝置專用網站

隨著無線上網的蓬勃發展,網站推出「行動版」已成為時勢所趨,然而市面上有數種不同的行動平台,例如Android、iOS、Windows等,即便是相同平台,也有不同品牌、不同尺寸的裝置,總不能針對各個裝置推出專屬的網站吧?!顯然我們需要一個跨平台、跨裝置的解決方案,讓網站在不同的裝置上顯示,而本書

正是為了此目標所撰寫,主要內容如下:
*HTML5:介紹HTML5元素和各種表單輸入類型,包括表單的後端處理。
*CSS3:CSS3的字型、文字、清單、色彩、背景、漸層、表格、陰影、邊界、留白、框線、多欄位排版、2D/3D變形處理、媒體查詢等屬性,尤其是透過媒體查詢功能,依據PC或行動裝置的特徵設計網頁樣式。

*Responsive Web Design (RWD):RWD會根據瀏覽器環境 (例如螢幕的寬度、解析度、長寬比、方向等),自動調整網頁的版面配置,只要設計單一版本的網頁,就能完整顯示在PC、平板電腦、智慧型手機等裝置,達到One Web One URL的目標。

*jQuery Mobile:使用jQuery Mobile打造行動裝置專用網站,將跨平台、跨裝置所面臨的相容性問題交給jQuery Mobile處理。

  • Part 1 HTML5 篇(第1-1頁)
    • 第1章 網頁設計簡介(第1-1頁)
    • 第2章 文件結構(第2-1頁)
    • 第3章 資料編輯與格式化(第3-1頁)
    • 第4章 超連結與圖片(第4-1頁)
    • 第5章 表格(第5-1頁)
    • 第6章 影音多媒體(第6-1頁)
    • 第7章 表單與後端處理(第7-1頁)
  • Part 2 CSS3 篇(第8-1頁)
    • 第8章 CSS 基本語法(第8-1頁)
    • 第9章 文字與清單屬性(第9-1頁)
    • 第10章 色彩、背景與漸層屬性(第10-1頁)
    • 第11章 Box Model 與定位方式(第11-1頁)
    • 第12章 表格屬性(第12-1頁)
    • 第13章 特殊效果與媒體查詢(第13-1頁)
  • Part 3 行動版網頁設計篇(第14-1頁)
    • 第14章 回應式網頁設計(第14-1頁)
    • 第15章 行動版網頁的實用技巧(第15-1頁)
    • 第16 章 使用jQuery Mobile開發行動網頁(第16-1頁)
    • 第17章 jQuery Mobile UI 元件(第17-1頁)
  • 附錄 附錄A HTML 框架元素(第A-1頁)
    • A-1 建立框架- 、、 元素(第A-2頁)</li><li>A-2 包含水平框架與垂直框架的網頁(第A-17頁)</li><li>A-3 嵌入浮動框架- <iframe> 元素(第A-20頁)</li><li>A-4 製作導覽列(第A-22頁)</li></ul></li> <div id="jumpChapter" class="collapse fade"> </div> <div class="more_wrap"> <button type="button" class="btn btn-light moreBtn collapsed" data-toggle="collapse" data-target="#jumpChapter"><i class="icon icon-arrow-top-01"></i></button> </div> </ul> </div> </div> </div> </div> </div> </div> </div> <!-- [E] 簡介、章節、作者簡介 Tab --> <!-- End 中間欄位區塊 --> <!-- 右側欄位區塊 --> <div class="col-sm-5 col-md-4 col-lg-3 d-none d-sm-block"> <div class="right_side_info ml-md-0 ml-xl-4"> <div class="card border-0 bg-light mb-3"> <div class="card-body"> <div class="card-text book_price_group"> <div class="book_paper_price">紙本書 NT$ 540</div> <div class="text1 bold">單本電子書</div> <div class="book_price"> <span class="text2 ft-azure bold h5">NT$</span> <span class="price ft-azure bold h5">378</span> <span class="coin ft-azure small"> </span> </div> </div> <!--直接購買--> <div class="card-text"> <button type="button" id="buynow" class="btn btn-lg btn-outline-primary custom_blue_outline_style btn-block" brn="76117" onclick="detailPageAddSpCart(true, this)"> <i class="icon icon-indicator"></i>直接購買 </button> </div> <!--放入購物車--> <div class="card-text"> <button type="button" id="addtocart" class="btn btn-lg btn-primary btn-block custom_blue_outline_style " brn="76117" onclick="detailPageAddSpCart(false, this)"> <i class="icon icon-indicator-add"></i>放入購物車 </button> </div> <!--買書送人--> <hr> <div class="card-text"> <button type="button" id="buyasgift" class="btn btn-lg btn-outline-primary custom_deep_seablue_outline_style btn-block" brn="76117" onclick="detailPageAddSpCart(true, this)">買書送人</button> </div> </div> </div> <!--右邊套書按鈕--> <!--右邊活動--> <!-- <div class="book_promo_info mb-3"> <span class="badge badge-pill badge-danger mr-0 mb-2 mb-lg-2 px-2 promo_info_text d-block">20周年慶/最HOT新書三本75折</span> <span class="badge badge-pill badge-danger mr-0 mb-2 mb-lg-2 px-2 promo_info_text d-block">HyRead選書~任選2本,現折30元!</span> </div> --> <!--右邊神秘的作家專欄--> <!-- <div class="writer_column card bg-light"> <div class="card-body"> <div class="card-text book-badge"> <span class="badge badge-dark ">作家專欄</span> </div> <div class="card-text ft-azure bold">看見你所聽的,聽見你所想的──五月選書《蜜蜂與遠雷》 </div> <div class="card-text ps_note_text"> 文/林小滿 2018年05月03日 </div> <div class="card-text small-sm"> 蜜蜂與遠雷 每個人選擇讀/不讀某一本書的原因有很多,但「不懂音樂」絕對不足以成為放下《蜜蜂與遠雷》的理由──它並非 <a href="javascript:;" class="ft-azure">more</a> </div> </div> </div> --> </div> </div> <!-- End 右側欄位區塊 --> <!-- [S] GOOGLE結構化資料 書本商品資訊 --> <script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Product", "name": "HTML5、CSS3、RWD、 jQuery Mobile跨裝置網頁設計:掌握建立電腦&行動網站的關鍵技術", "image": "https://webcdn.ebook.hyread.com.tw/bookcover/76117978986347739620150915050912.jpg", "releasedate": "2015[民104]", "description": "內容簡介 *徹底學會HTML5和CSS3的最新功能與設計技巧*Responsive Web Design(RWD)讓網頁同時在PC/平板/手機完整呈現*使用jQuery Mobile打造行動裝置專用網站 隨著無線上網的蓬勃發展,網站推出「行動版」已成為時勢所趨,然而市面上有數種不同的行動平台,例如Android、iOS、Windows等,即便是相同平台,也有不同品牌、不同尺寸的裝置,總不能針對各個裝置推出專屬的網站吧?!顯然我們需要一個跨平台、跨裝置的解決方案,讓網站在不同的裝置上顯示,而本書 正是為了此目標所撰寫,主要內容如下:*HTML5:介紹HTML5元素和各種表單輸入類型,包括表單的後端處理。*CSS3:CSS3的字型、文字、清單、色彩、背景、漸層、表格、陰影、邊界、留白、框線、多欄位排版、2D/3D變形處理、媒體查詢等屬性,尤其是透過媒體查詢功能,依據PC或行動裝置的特徵設計網頁樣式。 *Responsive Web Design (RWD):RWD會根據瀏覽器環境 (例如螢幕的寬度、解析度、長寬比、方向等),自動調整網頁的版面配置,只要設計單一版本的網頁,就能完整顯示在PC、平板電腦、智慧型手機等裝置,達到One Web One URL的目標。 *jQuery Mobile:使用jQuery Mobile打造行動裝置專用網站,將跨平台、跨裝置所面臨的相容性問題交給jQuery Mobile處理。", "sku": "978-986-347-739-6 ; 986-347-739-7", "gtin13": "978-986-347-739-6 ; 986-347-739-7", "brand": "碁峰資訊", "offers": { "@type": "Offer", "url": "https://ebook.hyread.com.tw/bookDetail.jsp?id=76117", "priceCurrency": "TWD", "price": "378", "availability": "https://schema.org/InStock", "seller": { "@type": "Organization", "name": "HyRead ebook" } } } </script> <!-- [E] GOOGLE結構化資料 書本商品資訊 --> </div> </div> </div> </section> <style> a.anchor { display: block; position: relative; top: -120px; visibility: hidden; } </style> <a class="anchor" id="cpSetOfBook"></a> <!-- 同分類推薦書 --> <section class=""> <div class="container-fluid free_book pb-5"> <div class="container-1280"> <div class="titleBar py-3 py-md-4 d-flex justify-content-between"> <div class="blkTitle h5">同分類熱門書</div> </div> </div> <div class="container-1320"> <div class="row"> <div class="swiper-container" data-inner-slider> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="14958"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=14958" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/14958978986201561220123606031259.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=14958">不懂這一些, 別說Word很簡單:113個小技巧輕鬆幫你搞定所有的疑難雜症</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="136427"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=136427" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/136427978986476592820182926110131.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=136427">Arduino{初學}完全指南</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="66782"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=66782" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/66782978986375089520151416040351.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=66782">Exam 200-120 CCNA模擬實戰演練</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="14420"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=14420" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/14420978986614318220122303021204.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=14420">PowerPoint 2010簡報製作經典百例</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="116653"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=116653" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/116653978986476235420175101050648.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=116653">讓響應式(RWD)網頁設計變簡單:Bootstrap開發速成</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="17917"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=17917" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/17917978986201488220125205111057.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=17917">離散數學精要</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="189193"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=189193" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/189193978957204911220191719010928.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>EPUB</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=189193">極限嚴選!Google超神密技完全攻略</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="78028"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=78028" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/78028978986575173920154808081021.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=78028">Dropbox 不用整理的檔案整理術. 2, 別花時間搞整齊, 60個自動化技巧改變辦公室與生活效率</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="79508"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=79508" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/7950820153613021153.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=79508">神奇的手帳整理魔法:手寫筆記X文具控,50個ideas讓工作生活更美好</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="204974"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=204974" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/204974978986434419220201110090332.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>EPUB</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=204974">超強 Google雲端應用:贏家必勝技能與行銷方程式</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="156888"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=156888" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/156888978986953062020182418080911.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=156888">MAC超密技!省時省力的Apple工作術</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="14005"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=14005" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/14005978986181851120141320110149.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=14005">鳥哥的Linux私房菜, 基礎學習篇(第三版)</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="70764"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=70764" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/70764978986201827920152928100518.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=70764">全世界第一本寫給公務員的Excel省時技</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="178269"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=178269" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/178269978986973503220194716080509.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>EPUB</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=178269">跨界模式:單打獨鬥賣不贏 勇敢跨界才能賺進「轉型新紅利」</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="145682"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=145682" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/145682978986434263120181807090521.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>JPG</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=145682">Python:期貨演算法交易實務121個關鍵技巧詳解</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="146838"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=146838" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/146838978957085074120183217090527.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> <span class="btn btn-dark"><small>EPUB</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=146838">一鍵獲利:發掘共享經濟時代新商機, 讓知識、技能、物品變黃金的300個絕技</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="38104"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=38104" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/38104978986264160620131030011036.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=38104">逆轉勝:臺灣先進製造的新動力</a></div> </div> </div> <div class="swiper-slide"> <div class="book-wrap"> <div class="book-cover shadow-02 mb-2"> <div class="book-overlay"> <div class="book-shopcar"> <a href="javascript:;" class="btn buyBtn d-none d-lg-inline-block shopCartBtn" brn="157374"> <i class="icon icon-add_shopping_cart"></i>購物車 </a> </div> <a href="/bookDetail.jsp?id=157374" class="book-link"> <div class="coverBox"> <div class="maskColor"><img src="Template/store/images/book_overlay_250.png" class="img-fluid maskPic" on-image-load></div> <img src="https://webcdn.ebook.hyread.com.tw/bookcover/15737420185425090926.jpg" class="img-fluid bookPic chmln__img" on-image-load> </div> </a> </div> <!--加入最愛(未登入)--> <div class="no_login_favorite"></div> <div class="ver-btngroup "> <span class="btn btn-dark"><small>PDF</small></span> <span class="btn btn-dark"><small>EPUB</small></span> </div> </div> <div class="book-title-01"><a href="/bookDetail.jsp?id=157374">Word、Excel、PowerPoint強效精攻500招</a></div> </div> </div> </div> <!-- Add Arrows --> <button class="swiper-button-next"></button> <button class="swiper-button-prev"></button> </div> </div> </div> </div> </section> <!-- End 為您推薦 --> </div> </div> </div> <!-- APP Promo Banner --> <div class="row container-fluid bg-light border-top no-gutters align-items-center py-4"> <div class="col col-md-12 col-lg-3 ml-3 ml-xl-auto appPromoSlogon"> <a href="https://goo.gl/myZzoD" target="_blank" class="py-3" title="還沒安裝 HyRead 3 嗎?馬上免費安裝~"> <img src="/Template/store/images/footer-logo-pc.png" class="footer_logo img-fluid py-3" alt="HyRead"> <span class="rightnow d-block d-sm-inline-block text-dark">還沒安裝 HyRead 3 嗎?馬上免費安裝~</span> </a> </div> <div class="col col-md col-lg-auto mr-1 mr-xl-auto appPromoStoreLink justify-content-sm-center d-none d-md-block"> <a href="https://goo.gl/1ZkUJb" target="_blank" class="p-1"><img src="/Template/store/images/appstore.svg" class="img-fluid" alt="App Store"></a> <a href="https://goo.gl/WNmstc" target="_blank" class="p-1"><img src="/Template/store/images/googleplay.svg" class="img-fluid" alt="Google Play"></a> <a href="https://goo.gl/kGEflg" target="_blank" class="p-1"><img src="/Template/store/images/windowsstore.svg" class="img-fluid" alt="Windows Store"></a> <a href="javascript:;" class="p-1" data-toggle="modal" data-target="#pcdownloadModal"><img src="/Template/store/images/pc.svg" class="img-fluid" alt="pc download"></a> </div> <div class="col col-lg-1 mr-xl-auto d-none d-xl-block"><img src="/Template/store/images/app_qrcode.svg" class="img-fluid qr_code " alt="QR Code"></div> </div> <!-- APP Promo Banner --> <!--========== FOOTER ==========--> <footer class="footer"> <!-- PC/Mobile sitemap footer --> <div class="container-fluid"> <div class="container-1280 px-md-3 mx-xl-auto" id="pcMobileFooter"> <div class="row no-gutters"> <!-- PC sitemap --> <ul class="col footer_link_list d-none d-lg-block"> <li class="title">關於HyRead</li> <!--熱門活動--> <!-- <li><a href="javascript:;" class="footer_link" title="熱門活動">熱門活動</a></li> --> <li><a href="/Template/store/serviceRule.html" target="_blank" class="footer_link" title="服務政策">服務政策</a></li> <li><a href="/Template/store/privacy.html" target="_blank" class="footer_link" title="隱私權政策">隱私權政策</a></li> <li><a href="https://ebook.hyread.com.tw/activity/directions/index-2.html" target="_blank" class="footer_link" title="序號兌換說明">序號兌換說明</a></li> </ul> <ul class="col footer_link_list d-none d-lg-block"> <li class="title">會員服務</li> <li><a href="javascript:;" class="footer_link" title="免費註冊" data-toggle="modal" data-target="#registerMemberModal">免費註冊</a></li> <li><a href="javascript:;" class="footer_link" title="忘記密碼" data-toggle="modal" data-target="#forgotPasswordModal">忘記密碼</a></li> <li><a href="https://hyweb.zendesk.com/hc/zh-tw/categories/200041446" target="_blank" class="footer_link" title="常見問題">常見問題</a></li> </ul> <ul class="col footer_link_list d-none d-lg-block"> <li class="title">合作提案</li> <li><a href="https://ebook.hyread.com.tw/activity/cooperation.html" target="_blank" class="footer_link" title="出版社合作">出版社合作</a></li> <li><a href="http://hyweb.ebook.hyread.com.tw/resource/features.html" target="_blank" class="footer_link" title="團體採購優惠">團體採購優惠</a></li> </ul> <ul class="col footer_link_list"> <li class="title">聯絡客服</li> <li><span class="plain_text">客服時間:週一~五9:00~18:30</span></li> <li><span class="plain_text">客服專線:02-2395-6966*2555</span></li> <li><span class="plain_text"><a href="mailto:service@hyread.com.tw">Email:service@hyread.com.tw</a></span></li> <li><span class="plain_text">100台北市中正區重慶南路二段51號5樓(台北分公司)</span></li> </ul> <!-- PC sitemap --> <!-- Mobile sitemap --> <div class="container-fluid d-block d-lg-none" id="MobileSiteMap"> <ul class="footer_link_list d-block d-lg-none mb-0 d-flex align-content-start flex-wrap"> <li class="col-4 px-0"><a href="/Template/store/serviceRule.html" target="_blank" class="footer_link" title="服務政策">服務政策</a></li> <li class="col-4 px-0"><a href="/Template/store/privacy.html" target="_blank" class="footer_link" title="隱私權政策">隱私權政策</a></li> <li class="col-4 px-0"><a href="https://ebook.hyread.com.tw/activity/directions/index-2.html" target="_blank" class="footer_link" title="序號兌換說明">序號兌換說明</a></li> <!--熱門活動--> <!-- <li class="col-4 px-0"><a href="javascript:;" class="footer_link" title="熱門活動">熱門活動</a></li> --> </ul> <div class="collapse" id="mobileFooterSitemap"> <ul class="footer_link_list d-block d-lg-none d-flex align-content-start flex-wrap"> <li class="col-4 px-0"><a href="javascript:;" class="footer_link" title="免費註冊" data-toggle="modal" data-target="#registerMemberModal">免費註冊</a></li> <li class="col-4 px-0"><a href="javascript:;" class="footer_link" title="忘記密碼" data-toggle="modal" data-target="#forgotPasswordModal">忘記密碼</a></li> <li class="col-4 px-0"><a href="https://hyweb.zendesk.com/hc/zh-tw/categories/200041446" target="_blank" class="footer_link" title="常見問題">常見問題</a></li> <li class="col-4 px-0"><a href="https://ebook.hyread.com.tw/activity/cooperation.html" target="_blank" class="footer_link" title="出版社合作">出版社合作</a></li> <li class="col-4 px-0"><a href="http://hyweb.ebook.hyread.com.tw/resource/features.html" target="_blank" class="footer_link" title="團體採購優惠">團體採購優惠</a></li> </ul> </div> <div class="justify-content-center text-center"> <a href="#mobileFooterSitemap" data-toggle="collapse" class="btn mobileFooterSitemapBtn"> <i class="footer_sitemap_open icon-arrow-down-01 pr-2" aria-hidden="true"></i> <i class="footer_sitemap_close icon-arrow-top-01 pr-2" aria-hidden="true" style="display:none"></i> </a> </div> </div> <!-- Mobile sitemap --> <div class="w-100 d-flex d-lg-none sep_line"></div> <!-- PC/Mobile social btn --> <ul class="col footer_link_list rounded-btn text-center text-lg-left my-1 social_btn_group"> <li class="title d-none d-lg-flex text-center text-lg-left">社群動態</li> <li class="mt-2 mt-lg-2 text-center text-lg-left"> <a href="https://www.facebook.com/hyread.ebook" target="_blank" class="footer_link mr-2 mr-xl-3" title="Facebook"><i class="icon-facebook pr-2" aria-hidden="true"></i></a> <a href="https://www.youtube.com/channel/UC_nWrFmNhashbV8hi8EUqtw" target="_blank" class="footer_link mr-2 mr-xl-3" title="Youtube"><i class="icon-youtube pr-2" aria-hidden="true"></i></a> <a href="https://line.me/R/ti/p/%40zrv5224k" target="_blank" class="footer_link mr-0 mr-xl-3" title="Line"><i class="icon-line-square pr-2" aria-hidden="true"></i></a> </li> </ul> <!-- PC/Mobile social btn --> <div class="w-100 d-flex d-lg-none"></div> <!-- Mobile lang/coin menu btn --> <div class="col d-block d-lg-none text-center text-lg-right py-4 py-lg-0"> <div class="dropdown"> <a href="javascript:;" class="langDropdownMenu btnStyle" data-toggle="modal" data-target="#langcoinMenuModal"><span class=""><i class="fa fa-globe pr-2" aria-hidden="true"></i>正體中文</span><span class="px-1">|</span><span class="">NT$ TWD</span></a> </div> </div> <!-- Mobile lang/coin menu btn --> <!-- PC go to top btn --> <a href="javascript:topFunction();" class="js-back-to-top d-none d-lg-block"><i class=" icon-chevron-with-circle-up" aria-hidden="true"></i></a> <!-- PC go to top btn --> </div> </div> </div> <!-- PC/Mobile sitemap footer --> <!-- PC footer credit & lang/coin menu --> <div class="container-fluid"> <div class="container-1280 mx-xl-auto" id="pcFooterCredit"> <div class="row py-4 align-items-center"> <div class="col-12 col-lg-8 py-2 text-center text-lg-left"> 凌網科技股份有限公司<br class="d-block d-lg-none">Copyright&copy; 2019 hyread <em > IP=54.237.183.249(71) </em> </div> </div> </div> </div> <!-- PC footer credit & lang/coin menu --> </footer> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-TVTP73V');</script> <!-- End Google Tag Manager --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TVTP73V" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <!--========== END FOOTER ==========--> <script> $().ready(function(){ var rdurl = 'https://ebook.hyread.com.tw/bookDetail.jsp?id=76117'; var isExistPara = true; $('#mobileForm1 input[type=radio][name=lang]').change(function() { //location.href='/index.jsp?webpacLang='+$('input[type=radio][name=lang]:checked','#mobileForm1').val(); if(isExistPara){ rdurl += "&"; }else{ rdurl += "?"; } rdurl += "webpacLang=" + $('input[type=radio][name=lang]:checked','#mobileForm1').val(); location.href = rdurl; }); $('#mobileForm2 input[type=radio][name=coin]').change(function() { $.ajax({ url: '/Template/store/ajax/setCookie.jsp', type: 'GET', async: false, cache: false, data: { coin: $('input[type=radio][name=coin]:checked','#mobileForm2').val() }, error: function(xhr) { alert('Ajax request 發生錯誤'); }, success: function(data) { },complete : function () { location.reload(); } }); }); }) </script> <!-- language/coin Modal --> <div class="modal fade" id="langcoinMenuModal" tabindex="-1" role="dialog" aria-labelledby="langcoinMenuModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="dropdown-menu langcoin_style shadow show lightbox_style"> <!-- 更換語言/幣別 表單 --> <h6 class="dropdown-header px-3 text-center">更換語言/幣別</h6> <div class="dropdown-divider"></div> <form id='mobileForm1' class="px-1 py-1"> <div class="container-fluid lang-selector"> <div class="row"> <div class="col-12"> <input type="text" readonly class="form-control-plaintext" id="staticText" value="選擇語言:"> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="zh_TW" class="custom-control-input" name="langSelectorModal" id="langSelectorModal1" checked=''> <label class="custom-control-label" for="langSelectorModal1"> 正體中文</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="zh_CN" class="custom-control-input" name="langSelectorModal" id="langSelectorModal2"> <label class="custom-control-label" for="langSelectorModal2">簡體中文 </label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="en_US" class="custom-control-input" name="langSelectorModal" id="langSelectorModal3"> <label class="custom-control-label" for="langSelectorModal3">English</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="ja_JP" class="custom-control-input" name="langSelectorModal" id="langSelectorModal4"> <label class="custom-control-label" for="langSelectorModal4"> 日本語</label> </div> </div> <!-- <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="in_ID" class="custom-control-input" name="langSelectorModal" id="langSelectorModal5"> <label class="custom-control-label" for="langSelectorModal5">Indonesia</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="lang" value="ms_MY" class="custom-control-input" name="langSelectorModal" id="langSelectorModal6"> <label class="custom-control-label" for="langSelectorModal6">Malay</label> </div> </div> --> </div> </div> </form> <div class="dropdown-divider"></div> <form id="mobileForm2" class="px-1 py-1"> <div class="container-fluid coin-selector"> <div class="row"> <div class="col-12"> <input type="text" readonly class="form-control-plaintext" id="staticText" value="選擇幣別:"> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="TWD" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal1" checked> <label class="custom-control-label" for="coinSelectorModal1">TWD(NT$)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="HKD" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal2"> <label class="custom-control-label" for="coinSelectorModal2">HKD(HK$)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="USD" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal3"> <label class="custom-control-label" for="coinSelectorModal3">USD($)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="CNY" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal4"> <label class="custom-control-label" for="coinSelectorModal4">CNY(¥)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="JPY" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal5"> <label class="custom-control-label" for="coinSelectorModal5">JPY(¥)</label> </div> </div> <div class="col-6 form-radio py-1"> <div class="custom-control custom-radio"> <input type="radio" name="coin" value="THB" class="custom-control-input" name="coinSelectorModal" id="coinSelectorModal6"> <label class="custom-control-label" for="coinSelectorModal6">THB(฿)</label> </div> </div> </div> </div> </form> <!-- 更換語言/幣別 表單 --> </div> </div> </div> </div> <!-- language/coin Modal --> <!-- Mobile side navbar menu --> <nav id="mobileSideMenu"> <ul> <li> <a href="javascript:;" data-toggle="modal" data-target="#langcoinMenuModal">更換語言/幣別</a> </li> <li> <a href="/Template/store/shoppingcart/point/buyPoint.jsp">還沒有點數嗎?<span class="ft-yellow">立即儲值</span><br/> 就送你紅利點數,最高500點。</a> </li> <li><span>電子書</span> <ul> <li><a href="/searchList.jsp?search_field=BSU&search_input=B*&theme=&sortinfo=&op=AND&search_field=BSU&search_input=B0208">科幻奇幻小說</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=B*&theme=文學&op=AND&search_field=BSU&search_input=B0104&theme=文學&pagesize=30&sortinfo=&viewtype=2">翻譯文學誌</a></li><li><a href="/searchList.jsp?search_input=收納&search_field=FullText&op=OR&search_input=整理術&search_field=FullText&op=OR&search_input=不整理&search_field=FullText">收納整理術</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=J0106*&theme=&op=AND&search_field=BSU&search_input=J0106&theme=&sortinfo=">寫真圖文書</a></li><li><a href="/searchList.jsp?search_input=囤積&search_field=FullText&op=OR&search_input=零雜物&search_field=FullText&op=OR&search_input=簡單生活&search_field=FullText&op=OR&search_input=簡樸生活&search_field=FullText">簡單零雜物</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=J0211*&theme=&sortinfo=">眼睛流口水</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=D0101*&theme=國際市場趨勢&pagesize=30&sortinfo=&viewtype=2">掌握趨勢者</a></li><li><a href="/searchList.jsp?pagesize=30&sortinfo=YEAR,1&search_field=BSU&search_input=D0103*&theme=&sortinfo=">賺錢要做功課</a></li><li><a href="/searchList.jsp?nowpage=1&pagesize=30&search_field=BSU&search_input=O0102*&theme=&sortinfo=">日本漫畫本</a></li><li><a href="/Template/store/freeBooks.jsp">免費領書</a></li><li><a href="http://ebook.hyread.com.tw/searchList.jsp?search_field=BSU&search_input=V*">嗨讀影音區</a></li><li><a href="/Template/store/eventPage.jsp?id=441">9月新書優惠</a></li><li><a href="/Template/store/eventPage.jsp?id=442">9月發燒精選</a></li> <li><a href="/Template/store/category_list.jsp">瀏覽電子書所有分類</a></li> </ul> </li> <li><span>雜誌</span> <ul> <li><a href="/Template/store/magazineList.jsp?cate=M02">財經商管</a></li><li><a href="/Template/store/magazineList.jsp?cate=M01">新聞新知</a></li><li><a href="/Template/store/magazineList.jsp?cate=M03">數位資訊</a></li><li><a href="/Template/store/magazineList.jsp?cate=M04">語言學習</a></li><li><a href="/Template/store/magazineList.jsp?cate=M05">親子教育</a></li><li><a href="/Template/store/magazineList.jsp?cate=M06">生活居家</a></li><li><a href="/Template/store/magazineList.jsp?cate=M07">旅遊行腳</a></li><li><a href="/Template/store/magazineList.jsp?cate=M08">時尚風格</a></li><li><a href="/Template/store/magazineList.jsp?cate=M09">影視娛樂</a></li><li><a href="/Template/store/magazineList.jsp?cate=M10">知識專業</a></li><li><a href="/Template/store/magazineList.jsp?cate=M11">人文藝術</a></li><li><a href="/Template/store/magazineList.jsp?cate=M12">休閒運動</a></li> </ul> </li> <li><span>即時排行</span> <ul> <li><a href="/Template/store/bestSelling.jsp">暢銷排行</a></li> <li><a href="/Template/store/rentalRating.jsp">租書排行</a></li> <li><a href="/Template/store/magazineRating.jsp">雜誌排行</a></li> <li><a href="/Template/store/trialRating.jsp">試閱排行</a></li> </ul> </li> <!-- 最新上架 --> <li><span>最新上架</span> <ul> <li><a href="/Template/store/newbooks.jsp">熱門新書</a></li> <li><a href="/Template/store/magazineList.jsp">新刊上架</a></li> </ul> </li> <!-- 精選文章 --> <li><a href="/Template/store/bestArticle.jsp">精選文章</a></li> <!-- [S] 熱門活動 --> <!-- <li><span>熱門活動</span> <ul> <li><a href="/Template/store/eventPage.jsp?id=345">致那些曾有過的傷痛與美好</a></li> <li><a href="/Template/store/eventPage.jsp?id=257">職場停看聽</a></li> <li><a href="/Template/store/eventPage.jsp?id=246">劇荒看美劇小說</a></li> <li><a href="/Template/store/eventPage.jsp?id=399">「她」的文字,給你力量與溫度</a></li> <li><a href="/Template/store/eventPage.jsp?id=199">輕鬆「聽」學英文!</a></li> <li><a href="/Template/store/eventPage.jsp?id=113">空大電子書全新上線</a></li> <li><a href="/Template/store/eventPage.jsp?id=445">《從前從前,在河畔》延伸書推薦</a></li> <li><a href="/Template/store/eventPage.jsp?id=441">9月新書優惠</a></li> <li><a href="/Template/store/eventPage.jsp?id=427">2020第2季暢銷書排行榜Top50</a></li> <li><a href="/Template/store/eventPage.jsp?id=453">Master Cheers大師影音課系列</a></li> </ul> </li> --> <!-- [E] 熱門活動 --> <li><a href="/Template/store/event_list.jsp">熱門活動</a></li> <li><a href="/Template/store/publishing.jsp">出版社推薦</a></li> <li><a href="/Template/store/article.jsp">小編文摘</a></li> <li><a href="https://ebook.hyread.com.tw/activity/201902gaze/index.html">Gaze閱讀器</a></li> <li><a href="/Template/store/freeBooks.jsp">免費好書</a></li> <li><a href="javascript:alertLogin();">兌換專區</a></li> </ul> </nav> <!-- Mobile side navbar menu --> <!-- 使用HyRead帳號登入 Modal --> <div class="modal fade hyread_type frame_login" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row"> <div class="col px-0"> <img src="/Template/store/images/hyread-logo-no-text.png" class="img-fluid" alt="Small Logo"></div> <div class="col-9 col-md-9 pl-0 pl-md-5 pr-0 align-self-center"> <h5 class="modal-title">使用HyRead帳號登入</h5> </div> <div class="col-1 col-md-2 align-self-center"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <hr class="mb-0 d-block d-md-none"/> <div class="modal-body pb-3 pb-md-5"> <div class="container-fluid"> <div class="row d-block"> <form name="loginForm" action="/SSO/storeLogin.jsp" method="post"> <input type="hidden" name="loginmethod" value="hyread"> <div class="anim_form_control mt-4"> <input type="text" id="inputName" name="account2" required> <span class="highlight"></span> <span class="bar"></span> <label for="inputName">請輸入帳號</label> </div> <div class="anim_form_control mt-4"> <input type="password" id="inputPassword" name="passwd2" required> <span class="highlight"></span> <span class="bar"></span> <label for="inputPassword">請輸入密碼</label> </div> </form> </div> <div class="row mt-4"> <button type="button" data-dismiss="modal" class="btn btn-primary custom_blue_solid_style w-100 py-2" onclick="login();" >登入</button> </div> <div class="row mt-3"> <div class="col px-0 suggest_login"> 還沒有帳號? <br class="d-inline d-md-none"/> <a href='javascript:;' data-toggle="modal" data-target="#registerMemberModal" class="ft-deepseablue" data-dismiss="modal" title="立即免費註冊">立即免費註冊</a> </div> <div class="col-4 col-md-3 px-0 text-right forgot_password"> <a href='javascript:;' data-toggle="modal" data-target="#forgotPasswordModal" class="ft-warm-grey" data-dismiss="modal" title="忘記密碼">忘記密碼</a> </div> </div> </div> </div> <div class="modal-footer pb-5"> <div class="row justify-content-between no-gutters w-100"> <div class="col-12 pb-2"> <div class="stroke_line_text"><span>連結現有帳號登入</span></div> </div> <div class="w-100 pt-3"></div> <div class="col-12 col-md-6 pr-md-1 pt-2"> <button type="button" onclick="GoFacebook();" data-dismiss="modal" class="btn btn-primary custom_facebook_solid_style w-100 py-2"><i class="icon-facebook mr-2"></i>Facebook</button> </div> <div class="col-12 col-md-6 pl-md-1 pt-2"> <button type="button" onclick="GoGmail();" data-dismiss="modal" class="btn btn-danger custom_googleplus_solid_style w-100 py-2"><i class="icon-google mr-2"></i>Google</button> </div> <div class="col-12 col-md-6 pr-md-1 pt-2"> <button type="button" onclick="GoAppleId();" data-dismiss="modal" class="btn btn-dark ft-white w-100 py-2"> <i class="icon icon-appleinc mr-2"></i>Apple ID </button> </div> <div class="col-12 col-md-6 pl-md-1 pt-2"> <button type="button" onclick="" data-toggle="modal" data-target="#loginOpenIDModal" data-dismiss="modal" class="btn btn-warning custom_openid_solid_style ft-white w-100 py-2"> <i class="icon icon-openid mr-2"></i>Open ID </button> </div> <div class="row mt-3"> <div class="col px-3 ft-warm-grey login_note"> HyRead品牌整合,提供您更多服務!<br/>您可以使用HyRead journal全文資料庫會員帳號、密碼登入。 </div> </div> </div> </div> </div> </div> </div> <script> function login() { document.loginForm.submit(); } function GoFacebook(){ window.location = "http://www.facebook.com/dialog/oauth/?scope=email&client_id=241738632518448&redirect_uri=https://ebook.hyread.com.tw/SSO/FBAuth.jsp&response_type=token"; } function GoGmail(){ window.location = "https://accounts.google.com/o/oauth2/auth?response_type=token&scope=email&state=google&redirect_uri=https://ebook.hyread.com.tw/SSO/GmailAuth.jsp&client_id=30212826069-9n9dup3i54ha2luuj7bgho32bdj0amic.apps.googleusercontent.com&approval_prompt=auto&access_type=online"; } function GoAppleId(){ window.location = "https://ebook.hyread.com.tw/SSO/AppleAuth.jsp"; } function GoOpenID(){ form12.submit(); } </script> <!-- 使用HyRead帳號登入 Modal --> <!-- 註冊HyRead帳號 Modal --> <div class="modal fade hyread_type frame_register" id="registerMemberModal" tabindex="-1" role="dialog" aria-labelledby="registerMemberModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row"> <div class="col px-0"> <img src="/Template/store/images/hyread-logo-no-text.png" class="img-fluid" alt="Small Logo"></div> <div class="col-9 col-md-9 pl-0 pl-md-5 pr-0 align-self-center"> <h5 class="modal-title">註冊HyRead帳號</h5> </div> <div class="col-1 col-md-2 align-self-center"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <hr class="mb-0 d-block d-md-none"/> <div class="modal-body pb-3 pb-md-5"> <div class="container-fluid"> <div class="row d-block"> <form method="POST" id="regForm" action="javascript:;"> <div class="anim_form_control mt-4"> <input type="text" id="regAccount" name="regAccount" required> <span class="highlight"></span> <span class="bar"></span> <label for="regAccount">請輸入帳號 <span class="ft-grapefruit ml-3" id="accountChkInfo"></span></label>(<a href="javascript:chkAccountExist()">查看帳號是否被使用</a>) </div> <div class="anim_form_control mt-4"> <input type="text" id="regEmail" name="regEmail" required> <span class="highlight"></span> <span class="bar"></span> <label for="regEmail">請輸入電子信箱</label> </div> <div class="anim_form_control mt-4"> <input type="password" id="regPassword" name="regPassword" required> <span class="highlight"></span> <span class="bar"></span> <label for="regPassword">請輸入密碼</label> </div> <div class="anim_form_control mt-4"> <input type="password" id="regConfirmPassword" name="regConfirmPassword" required> <span class="highlight"></span> <span class="bar"></span> <label for="regConfirmPassword">請再輸入一次密碼</label> </div> <div class="anim_form_control mt-4 g-recaptcha" data-sitekey="6LeAGiAUAAAAAH9aFWeUdCn2rJQtUV-LbSJtIgCJ" data-callback="isNotRobot"></div> </form> </div> <div class="row mt-4"> <div class="form-group mb-3"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="register_rule_agree"> <label class="custom-control-label" for="register_rule_agree">我同意 <a href="/Template/store/serviceRule.html" target="_blank">服務條款</a> & <a href="/Template/store/privacy.html" target="_blank">隱私權條款</a></label> </div> </div> </div> <!-- <div class="row"> <div class="form-group mb-3"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="register_order_epaper"> <label class="custom-control-label" for="register_order_epaper">我要訂閱電子報,好康消息不漏接。</label> </div> </div> </div> --> <div class="row"> <button type="button" onclick="submitRegForm();" class="btn btn-primary custom_blue_solid_style w-100 py-2" >註冊</button> </div> <div class="row mt-4"> <div class="col px-0 suggest_login text-center"> 已有帳號了?<a href="javascript:;" data-dismiss="modal" data-toggle="modal" data-target="#loginModal" class="ft-deepseablue" title="馬上登入">馬上登入</a> </div> </div> </div> </div> <div class="modal-footer"></div> </div> </div> </div> <!-- 註冊HyRead帳號 Modal --> <script> var isValidRecaptcha = false; var isNotRobot = function() { isValidRecaptcha = true; }; function chkAccountExist(){ if (!$("input[name='regAccount']").val()) { alert('請填寫帳號!'); return false; } var account = $("input[name='regAccount']").val(); $.ajax({ url: '/Template/store/ajax/chkAccountExist.jsp', type: 'GET', async: false, cache: false, data: { account: account }, error: function(xhr) { alert('Ajax request 發生錯誤'); }, success: function(data) { var result = data.trim(); if(result == "true"){ //alert("此帳號已被申請"); $('#accountChkInfo').text("此帳號已被申請"); } else{ //alert("此帳號可以申請註冊"); $('#accountChkInfo').text("此帳號可以申請註冊"); } },complete : function () { //location.reload(); }, beforeSend:function(){ $('#accountChkInfo').text(""); //$('#exchangeZoneResult').empty(); //$('#exchangeZoneResult').append('<dd class="h5 bold my-4"></dd><br>'); } }); } function submitRegForm(){ var emailRegxp = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; var accountRegExp = /^[\d|a-zA-Z]+$/; if(!isValidRecaptcha){ alert('請勾選我不是機器人!'); return false; } if (!$("input[name='regAccount']").val()) { alert('請填寫帳號!'); return false; } if (accountRegExp.test($("input[name='regAccount']").val()) == false){ alert('帳號只能為數字加英文的組合!'); return false; } if ($("input[name='regAccount']").val().length > 50) { alert('帳號請填入50個字元內,小寫或大寫英文字母(a~z,A~Z)、數字(0~9)'); return false; } if (!$("input[name='regEmail']").val()) { alert('請填寫email!'); return false; } if (emailRegxp.test($("input[name='regEmail']").val()) == false){ alert('請檢查email格式!'); return false; } if (!$("input[name='regPassword']").val()) { alert('請輸入密碼!'); return false; } if (!$("input[name='regConfirmPassword']").val()) { alert('請再次確認密碼!'); return false; } if($("input[name='regPassword']").val() != $("input[name='regConfirmPassword']").val()){ alert('兩次輸入的密碼不相同,請重新確認!'); return false; } if ($("input[name='regPassword']").val().length < 7 || $("input[name='regPassword']").val().length > 20) { alert('密碼請填入7至20個字元的小寫或大寫英文字母!'); return false; } if($('#register_rule_agree').is(":checked") == false){ alert('請同意服務條款 與 隱私權條款!'); return false; } $('#regForm').attr('action', '/Template/store/service/register_act.jsp'); $('#regForm').submit(); } </script> <!-- 忘記密碼 Modal --> <div class="modal fade hyread_type frame_forgotpassword" id="forgotPasswordModal" tabindex="-1" role="dialog" aria-labelledby="forgotPasswordModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row"> <div class="col px-0"> <img src="/Template/store/images/hyread-logo-no-text.png" class="img-fluid" alt="Small Logo"></div> <div class="col-9 col-md-9 pl-0 pl-md-5 pr-0 align-self-center"> <h5 class="modal-title">忘記密碼?</h5> </div> <div class="col-1 col-md-2 align-self-center"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <hr class="mb-0 d-block d-md-none"/> <div class="modal-body pb-3 pb-md-5"> <div class="container-fluid"> <div class="row mt-3"> <div class="col px-0 ft-warm-grey login_note"> 請輸入您註冊時的會員帳號及電子信箱,<br class="d-none d-md-block"/>我們會將您的帳號資訊E-mail給您 </div> </div> <div class="row d-block"> <form method="POST" id="forgetPwdForm" action="javascript:;"> <div class="anim_form_control mt-4"> <input type="text" id="inputAccount" name="FPwdAccount" required> <span class="highlight"></span> <span class="bar"></span> <label for="inputAccount">會員帳號</label> </div> <div class="anim_form_control mt-4"> <input type="email" id="inputEmail" name="FPwdEmail" required> <span class="highlight"></span> <span class="bar"></span> <label for="inputEmail">電子信箱</label> </div> </form> </div> <div class="row mt-4"> <div class="anim_form_control mt-4 g-recaptcha" data-sitekey="6LeAGiAUAAAAAH9aFWeUdCn2rJQtUV-LbSJtIgCJ" data-callback="isNotRobot"></div> </div> <div class="row mt-4"> <button type="button" onclick="submitFPwdForm();" class="btn btn-primary custom_blue_solid_style w-100 py-2">確認</button> </div> </div> </div> <div class="modal-footer"></div> </div> </div> </div> <!-- 忘記密碼 Modal --> <script> var isValidRecaptcha = false; var isNotRobot = function() { isValidRecaptcha = true; }; function submitFPwdForm(){ var emailRegxp = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; if(!isValidRecaptcha){ alert('請勾選我不是機器人!'); return false; } if (!$("input[name='FPwdAccount']").val()) { alert('請填寫帳號!'); return false; } if (!$("input[name='FPwdEmail']").val()) { alert('請填寫email!'); return false; } if (emailRegxp.test($("input[name='FPwdEmail']").val()) == false){ alert('請檢查email格式!'); return false; } $('#forgetPwdForm').attr('action', '/Template/store/service/forgotPassword_act.jsp'); $('#forgetPwdForm').submit(); } </script> <!-- PC下載閱讀軟體安裝 Modal --> <div class="modal fade hyread_type frame_register_success" id="pcdownloadModal" tabindex="-1" role="dialog" aria-labelledby="pcdownloadModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row justify-content-end"> <div class="col-1 col-md-2 align-items-end"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <div class="modal-body pt-0 pb-3 pb-md-3"> <div class="container-fluid"> <form method="POST" id="downloadPcAppForm" action="javascript:;"> <div class="col text-center ft-greyish-brown shopping_page_complete_icon"> <span class="ft-greyish-brown mt-0 mt-md-3">PC下載閱讀軟體安裝</span> </div> <div class="row mt-3"> <div class="col px-0 ft-warm-grey login_note"> 版本編號:1.13.1216.0<br>更新日期:2020/01/10<br> <span class="text-danger small">※若PC Reader程式執行出現錯誤,請先執行更新windows update。</span> <ul><span class="font-weight-bold text-dark">環境需求參考</span> <li>主記憶體:512M,1GB更佳 <li>硬碟空間:500MB以上,3.5GB以上更佳(視下載書量預留空間)</li> <li>作業系統:Windows 10 / 8 / 7 / Vista / XP / 2000 /</li> <li>其它:.Net Framework 4以上版本 /<br>Windows XP需加裝適用於Windows XP 32位元的<a href="http://www.microsoft.com/zh-tw/download/windows-media-player-details.aspx">Windows Media Player</a></li> </ul> <ul><span class="font-weight-bold text-dark">版本自動升級</span> <li>安裝完成閱讀軟體後,當您每次開啓使用時,會自動進行版本升級,不需再重新安裝。</li> </ul> </div> </div> <div class="row mt-1"> <div class="col-12 mt-1 anim_form_control mt-4 g-recaptcha" data-sitekey="6LeAGiAUAAAAAH9aFWeUdCn2rJQtUV-LbSJtIgCJ" data-callback="isNotRobot"></div> <button type="button" onclick="submitDownloadPcAppForm();" class="btn btn-primary custom_blue_solid_style w-100 py-2 mt-3">確認下載</button> </div> </form> </div> </div> </div> </div> </div> <!-- PC下載閱讀軟體安裝 Modal --> <script> var isValidRecaptcha = false; var isNotRobot = function() { isValidRecaptcha = true; }; function submitDownloadPcAppForm(){ if(!isValidRecaptcha){ alert('請勾選我不是機器人!'); return false; } $('#downloadPcAppForm').attr('action', '/Template/store/service/downloadPcAppForm_act.jsp'); $('#downloadPcAppForm').submit(); } </script> <!-- OPEN ID Modal --> <div class="modal fade hyread_type frame_register" id="loginOpenIDModal" tabindex="-1" role="dialog" aria-labelledby="loginOpenIDModal" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content p-2 p-md-4"> <div class="modal-header text-center pt-2 pb-0 py-md-0"> <div class="container-fluid"> <div class="row"> <div class="col px-0"> <img src="/Template/store/images/hyread-logo-no-text.png" class="img-fluid" alt="Small Logo"></div> <div class="col-9 col-md-9 pl-0 pl-md-5 pr-0 align-self-center"> <h5 class="modal-title">請輸入OpenID:</h5> </div> <div class="col-1 col-md-2 align-self-center"> <button type="button" class="close px-0" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> </div> </div> </div> <hr class="mb-0 d-block d-md-none"/> <div class="modal-body pb-3 pb-md-5"> <div class="container-fluid"> <div class="row d-block"> <form method="POST" id="openIdForm" action="javascript:;"> <div class="anim_form_control mt-4"> <input type="text" id="regAccount" name="openid" required> <span class="highlight"></span> <span class="bar"></span> <label for="regAccount">請輸入OpenID <span class="ft-grapefruit ml-3" id="accountChkInfo"></span> </label> </div> </form> </div> <div class="row mt-4"> <button type="button" onclick="submitForm();" class="btn btn-primary custom_blue_solid_style w-100 py-2" >登入</button> </div> </div> </div> <div class="modal-footer"></div> </div> </div> </div> <!-- OPEN ID Modal --> <script> var isValidRecaptcha = false; var isNotRobot = function() { isValidRecaptcha = true; }; function chkAccountExist(){ if (!$("input[name='regAccount']").val()) { alert('請填寫帳號!'); return false; } var account = $("input[name='regAccount']").val(); $.ajax({ url: '/Template/store/ajax/chkAccountExist.jsp', type: 'GET', async: false, cache: false, data: { account: account }, error: function(xhr) { alert('Ajax request 發生錯誤'); }, success: function(data) { var result = data.trim(); if(result == "true"){ //alert("此帳號已被申請"); $('#accountChkInfo').text("此帳號已被申請"); } else{ //alert("此帳號可以申請註冊"); $('#accountChkInfo').text("此帳號可以申請註冊"); } },complete : function () { //location.reload(); }, beforeSend:function(){ $('#accountChkInfo').text(""); //$('#exchangeZoneResult').empty(); //$('#exchangeZoneResult').append('<dd class="h5 bold my-4"></dd><br>'); } }); } function submitForm(){ $('#openIdForm').attr('action', '/SSO/OpenIdAuth.jsp'); $('#openIdForm').submit(); } </script> </body> </html>