HTML5 教學範例

關於 HTML5 教學, 以下30多個資源可幫你開始學習HTML5。

BLOWING UP HTML5 VIDEO AND MAPPING IT INTO 3D
SPACE（將HTML5視訊吹散並組成3D效果）

最近我研究了HTML 5中的Canvas 和Video
標籤，並發現了一些很酷的特性。其中之一就是Canvas.drawImage() api。此為詳細介紹。

CODE A BACKWARDS COMPATIBLE, ONE PAGE PORTFOLIO
WITH HTML5 AND CSS3（用HTML5 和CSS3 打造向下相容的網頁）

HTML5更加語義化，使用HTML5 我們不必在網頁上佈滿沒有意義的div。它引入了有意義的tag，比如 navigations
和 footers 使語法更有意義也更接近自然語言。

CODING A HTML 5 LAYOUT FROM SCRATCH（HTML 5
佈局）

這篇文章將教你

• 用原有技術將元素放置在特定位置
• 最新的技術潮流
• Microformats與HTML5協同使用
• 介紹HTML5與CSS3的新特性

CODING A CSS3 AND HTML5 ONE PAGE WEBSITE
TEMPLATE（製作CSS3和 HTML5 一頁式網站樣板）

這篇文章介紹了如何利用CSS3 和jQuery的新特性製作HTML5 網頁模版。 HTML5
仍在完善當中，你也可以選擇性的下載XHTML版。

COMPREHENSIVE VIDEO TUTORIAL ON
HTML5（全面的HTML5視訊指南）

這是一個叫Brad Neuberg的工程師製作的HTML5教學視訊。

CREATE MODERN WEB SITES USING HTML5 AND
CSS3（用HTML5與CSS3打造時尚網站）

這篇文章介紹了許多HTML5的功能和語法及API，還有CSS3的新的選擇器，效果和特性。最 後，
還將教你如何利用這些新特性開發一個網頁。當你讀完這篇文章，你就能用HTML5和CSS3開發一個自己的網站啦。

DESIGNING A BLOG WITH HTML5（用HTML5設計部落格）

許多HTML5 特性要結合JavaScript
API一起使用，以增加網頁的互動性。但仍有一些新元素可讓傳統的Web1.0頁面更加語義化。為了學習這些，我們來看怎樣建立一個部落格。

DESIGNING FOR THE FUTURE WITH HTML5 AND CSS3 :
TUTORIALS AND BEST PRACTICES（為未來設計：HTML 5 和 CSS3 指南與最佳案例）

這篇文章將介紹用 HTML5和CSS3搭建的幾個最佳網站。

DESIGN AND CODE A COOL IPHONE APP WEBSITE IN
HTML5（用HTML5設計和實現一個超酷 IPHONE APP 網站）

HAVE A FIELD DAY WITH HTML5 FORMS（建立HTML 5表格）

這篇文站將教 你 如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。

HOW TO CREATE A NICE BLOG DESIGN TOUCHING THE
FUTURE(不用PHOTOSHOP，完成網頁設計)

HOW TO MAKE ALL BROWSERS RENDER HTML5 MARK-UP
CORRECTLY – EVEN IE6（怎樣讓所有瀏覽器都渲染HTML5標記——即使是IE6）

這篇文章將教你如何用JavaScript和CSS，使 HTML5頁面向下相容，即使是IE6也不例外。

HOW TO MAKE AN HTML5 IPHONE APP（製作HTML5 IPHONE
應用）

這是 一篇針對iPhone的指導，但是許多技術也可用在相容HTML5的手機瀏覽器上。

HTML 5 AND CSS 3: THE TECHNIQUES YOU』LL SOON BE
USING（HTML 5 和CSS 3：你將用到的技術）

這篇文章使用HTML 5和CSS 3 搭建部落格頁面。如果你已經熟悉html 和CSS，將很容易跟上。

HTML5 FOR BEGINNERS. USE IT NOW, ITS EASY!（HTML
5初學指南）

給所有具有基礎HTML知識的初學者的HTML 5 入門指南

HTML5
PRESENTATION

這篇文章介紹了HTML5 的發展歷史和它的基本特性

HTML5 TUTORIAL – GETTING STARTED（HTML 5 入門指導）

HOW TO BUILD WEB PAGES WITH HTML 5（怎樣建立HTML
5網頁）

SIMPLE WEBSITE LAYOUT TUTORIAL USING HTML 5 AND
CSS 3（HTML5和CSS3佈局指南）

HTML5最令人期待的新標籤包括HTML5最令人期待的新標籤包括header, footer, aside,
nav,audio，同時它還包括畫圖，線下存儲資料，拖放等API。頁面佈局將會更易理解。這裡將介紹一個最簡單的HTML 5
佈局頁面，用CSS3 設定樣式。最終結果如下

STRUCTURAL TAGS IN HTML5（HTML 5 結構標籤）

HTML5 有許多標籤幫助網頁結構化，這能省去以網頁中許多div

HTML5 BOILERPLATES（HTML 5樣板）

此文介紹了一些你能拿來就用的HTML5 樣板檔案

HTML 5 CANVAS – THE BASICS（HTML 5 基礎——CANVAS）

對HTML 5 Canvas使用方法的全面指導

HTML 5 TUTORIALS（HTML 5 指南）

IMPLEMENTING HTML5 DRAG AND DROP: NEW PREMIUM
TUTORIAL（HTML 5 拖放）

HTML5 的一個新特性就是拖放，不過IE早在5.5時代就支援拖放了，而HTML 5
的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。

PREVIEW OF HTML 5

這是一篇比較老的文章，介紹了HTML5的特性和優點。

THE HTML 5 CANVAS FOR FLASH DEVELOPERS :
DRAWING（HTML 5 CANVAS 的畫圖功能）

THE POWER OF HTML 5 AND CSS 3

介紹了HTML 5 與CSS3能創造的各種效果。

VIEW SOURCE TUTORIAL: STICKY NOTES WITH HTML5 AND
CSS3（HTML5 和CSS3 打造便利貼效果）

WEBOS HTML5 DATABASE STORAGE TUTORIAL（WEBOS HTML5
資料存儲指南）

HTML5 的本機存儲功能將使資料存儲十分簡便。

YES, YOU CAN USE HTML 5 TODAY!

本文介紹了一些現已被支援的HTML 5 特性，對初學者十分有用。

原文出處:http://my-web-design.blogspot.com/2010/06/30html5.html

imXD5 以HTML5為架構的WordPress佈景主題

資料來源

又到了換佈景的季節了，這回突然心血來潮想要挑戰一下HTML5的架構。雖說這個架構要到2022年才會完全落實，不過現在開始動其實也不嫌早，畢竟這是未來的趨勢，使用語意標籤去架構整個網站，未來維護也會比較方便，新標籤也多了一些額外功能，對於搜尋引擎來講，似乎有一些小小的加分(?)，在這樣的迷思下，不小心就把網站給改好了。

像是上一版的imXD只有一張RSS圖感覺非常單調，所以這次加了許多的小圖案(雖然也不是很明顯..)來點綴一下網站。不過主要的變化還是對整體的網站架構有了新的變動，也把許多功能function化，讓佈景主題程式碼乾淨一點，只是functions.php倒是增肥了不少，至於CSS也用了一些CSS3的語法來達到一些小小的特效。

本來這篇文章是想要先打完之後，再跟著佈景一同現身，不過因為想說都調整這麼久了，總有一股衝動想要直接給他啟用，所以在昨天晚上半夜12點多，趁著網站人數不多的時候，默默地上架了。一上架就發現許多小問題，因為本機電腦環境和實際運作環境的東西有差，所以修正這一些小問題又花了不少的時間。會出問題的主要是在側邊欄模組，因為我本機電腦環境和網站上落差蠻大的Orz。

版面寬度990

就從版面框框先講起，如果大家有注意到，這次的版面「好像」比較寬一點？沒錯！因為版面的寬度從原本的960調整到990，想說現在的螢幕都逐漸走向寬螢幕1024×768的解析度使用者應該越來越少，所以就偷偷調整了。雖然我每次都跟人家講說網頁寬度請保持在960px~980px之間，不過考慮到一些狀況，所以這次就真的給他改下去了，因為有好幾次都想說將舊版改寬，但中間都遇到很多突發狀況。

這回的版面除了調寬之外，側邊欄也縮小，上一版的imXD則是將側邊欄放寬到快300px，這回側邊欄僅有250px而已，這樣改主要是想讓內容寬度可以更寬一些，因為內容區域是網站的一個主體，如果小小窄窄的，閱讀起來不太舒服、也會感受到一些小小的壓力。以前曾經換成三欄式，結果一個月就下架了。後來接手的就是目前新佈景imXD5架構的雛型了…(就是傳說中的inove佈景，相信大家都不陌生。)

〈▲以HTML5+CSS3為架構：imXD5。〉

HTML5的語意架構

前一版不是叫做imXD，這版怎麼會突然跳成imXD5呢？因為這次的版面使用HTML5的架構去寫的主題，如同前面提到，HTML5是目前最新的網頁架構，強調「語意」標籤，用這個架構主要是為了搜尋引擎最優化，因為HTML5語意的關係，對於搜尋引擎來講等於說是直接告訴他網頁哪個地方權重較高，直接把重點給搜尋引擎，另外網頁程式碼也會比HTML4更好解讀。目前WordPress的預設佈景twentyeleven就是使用HTML5的架構，你發現了嗎？

〈▲HTML5特色：語意標籤。〉

內文側邊社群分享按鈕

目前還算是社群服務還是很夯的時代，所以不得不把社群分享按鈕弄得明顯一點。如果螢幕寬度夠寬的畫，相信會在內文頁面的左方看到一排分享按鈕。有Google+1、Facebook以及Twitter的分享按鈕。這樣的做法是上次在硬是要學的網站上看到，感覺不錯就學回來了(國外網站也蠻多這樣做的)。

〈▲看到這邊，別忘了看看左邊，順手按個讚！〉

網頁上方社群分享按鈕

以往，香腸炒魷魚的網站右上角都空空的(因為沒有人買廣告阿~笑)，本來想要把搜尋放到那邊去，但總覺得怪怪的，剛好想起免費資源網路社群網站右上角是放社群分享按鈕，再加Google+1說他們會影響到一些搜尋權重(個人化搜尋)，如法炮製的把按鈕搬到右上角了，只是放三個按鈕還是覺得很少，又加上這一陣子的RSS訂閱數都沒有衝高，所以又擺了個RSS圖示上去，希望以起大家的注意。

〈▲如果你還沒按讚、推、+1的人，別忘了幫我們按一下唷！〉

側邊社群追蹤數字

放一個Facebook粉絲框剛剛好，如果再放上一個Plurk框、Google+框，感覺整排側邊欄就太長了，而且越下面大家越容易沒看到，又加上自己想要看到統計的數字，所以找了一些資料就把功能實做出來了，至於怎麼做，相信大家Google一下國外網站，可以找到不少資料(不過有些寫法比較舊，要自己改寫一下)。在處理的過程中，唯獨噗浪不知道怎麼弄API，所以就直接擺上文字了Orz…。

〈▲歡迎訂閱、追蹤我們！〉

網頁自適應性CSS3 Media Queries

最近mrmu也將自己網站改成HTML5的架構，其中布景也使用了一些CSS3的效果，如果大家有注意到他的網站，最明顯的就是使用CSS3網頁自適應性(CSS3 Media Queries)，因此香腸就把這個做法移到內文區的分享按鈕，解決在瀏覽器寬度太窄的況下，還是會有按鈕顯示。或許大家有個小疑問，為什麼要這麼麻煩？因為內文區擺太脫按鈕改覺很雜，所以才用這樣的方法來處理。(但IE8以下，就全露餡了)

〈▲網頁自適應性可，以讓使用者更好的體驗。〉

隨機分類推薦閱讀

這功能應該是這次花蠻多時間在處理的部分，因為這邊的作法是隨機選取五個分類然後再根據這五個分類去隨機選取五篇文章，並顯示標題、圖片與超連結。並且搭配JQuery的Tab來達成效果，簡單說應該是仿Yahoo首頁新聞的作法。因為我同學Mavis想要在文章內使用這功能，所以我就先拿自己網站開刀測試看看了，如果OK到時候再幫他裝上，她主要是Photoshop教學網站，使用這種方式推薦閱讀，會更有看頭。

〈▲圖像的推薦閱讀，可以更吸引訪客。〉

網站導航麵包屑(Breadcrumb)

以前曾經在Sofreev1.1和LowYA內加入過這樣的導航功能，但後來我也不知道為什麼拿掉了？或許是因為感覺放在那邊跟標題卡在一起感覺很怪吧？這回心血來潮又將按鈕放回去了，並且將顏色調淡、標題有多一些間距，感覺不會搶走標題的風采。補充一下，這個功能正確的名稱是麵包屑(Breadcrumb)，對於搜尋引擎或是訪客，都是一個很好的東西，可以清楚地告知訪客目前位置。

〈▲看到哪邊，都不會迷失方向。〉

HTML5留言表單

既然網頁整體架構使用HTML5去構版，那麼就不得不用一下HTML5的標籤了，雖然WordPress本身有提醒機制，不過使用HTML5的方式去做，感覺可以潮一點。目前暫時找不到針對其他非Google Chrome的瀏覽器，美化這個提示框Orz…

〈▲減少系統驗證，省去資源耗用。〉

新版404錯誤頁面

一個網站對於404頁面的設計其實是最容易忽略的，大多數的人可能認為不重要，但是當訪客近來你的網站，如果找不到想要的資訊就會跳出，那麼我們該如何好號把握這個訪客呢？倘若訪客找不到相關資訊，肯定是關掉瀏覽器走人，這時候我們可以自訂一下404頁面，留下一些可能會吸引訪客的資訊。這回在404頁面上的設計，跳脫了之前的框框，改用虛線底線來牌版，並且顯示各分類的文章，另外下方也顯示一些文章彙整，香腸自己也可以檢視一下每個月寫了多少文章(笑)。

〈▲留住訪客最有效的方式。〉

佈景自訂選項

最後，來看一下佈景後台設置。其實最近這幾個面板，都有加入佈景後台的設計，因為這樣的功能真的很方便，不需要改程式，就可以直接將功能加到主題中了，而且如果把佈景給朋友，他們也可以輕鬆加入自己想要的東西。後台的欄位主要就是整合META優化、廣告欄位以及Facebook留言整合。比起上一版的imXD少掉許多東西，因為目前佈景沒有要釋出，所以功能就不必做太多了。(因為上一版imXD有給幾個同主機的朋友使用:卡咪龜、殺氣、小俊，所以功能較多XD)

〈▲第一次秀後台(blush)。〉

function 功能模組化

這次大多數的功能都盡量做成模組，對於程式設計師來講，一開始會比較難做，因為要考慮到傳值的問題，或者是global變數的使用，但是功能一但做到後，未來如果要改佈景，就使用function即可輕鬆轉移。如果要自訂function的話，就要善用佈景主題的functions.php，即可達到自己所需的效果。

〈▲functions.php檔案變大了〉

IE的一些小問題&總結

這次調整佈景主題只針對IE9、IE8、IE7、Firefox7、Chrome14做校正，其他瀏覽器我就沒辦法支援了。針對目前這些瀏覽器做校正，絕對是可以涵蓋90%以上的使用者，剩下的使用者就請你們轉換一下了。至於蘋果的Safari我也沒去校正，因為Chrome和他同核心，所以網頁樣式不會相差太大的。那IE6呢？我已經把他丟到路邊的垃圾桶了。這回來開IETester都懶…(因為IE9的相容模式可以向下相容到IE7)

IE7其實也不太想調整了，因為她是跟著失敗的作業系統一同現身的，不過還是有很多人使用，所以只好默默地支援了。在改版的過程中遇到了關於IE7的問題，常見的是Google +1按鈕在IE7無法出現，因此版面配置上為了避免排版不好看，Google+1按鈕一定要放在最前面或最後面，不然放中間到時候會變成一個空洞。在IE8的狀況下，Google連結組廣告會被遮蓋(這應該是Google本身的問題)。

整體來講，很多東西都是由前一版imXD來改的，因為目前香腸自己對於這樣的版面算是很滿意，那麼另外一位站長魷魚絲呢？他好像一年沒發文了？(聽說他最近很忙，香腸也很少看見他上線)。既然香腸說OK，魷魚絲應該也OK啦(笑)。目前可能還有一些小Bug，如果大家有發現，別忘了回報一下唷！

這個新版，希望大家會喜歡 

用CSS+DIV畫表格(table)進行網頁排版

資料來源

以往傳統網頁設計都喜歡使用table(表格)來建構網頁，這樣的建構方式對於網頁整體排版來講並沒有太大的問題，可以完美相容於各個瀏覽器。但是時代在進步，還在用table排網頁感覺就有點過時了。會這樣說並不是想引起table和div之戰，而是想要說對於網頁的維護，table表格是比較麻煩一點的，再加上程式碼不太乾淨、過多的巢狀，對於搜尋引擎來講，也比較難發現其中重要的部分。

那如果用CSS+DIV進行網頁排版，就會比較好嗎？基本上是可以這樣講，但是大家又會遇到網頁校正的問題，一口氣要調整四、五種版本的瀏覽器，這樣很可能讓網頁設計者又跑回去用table表格排版。但其實在CSS中，已經有語法是支援表格的了，並不是對表格進行樣簡單的樣式定義，而是透過CSS的表格屬性，完美畫出表格，排除瀏覽器相容的問題，讓傳統的table排版的設計師，也可以快速轉換。

在香腸之前的imXD佈景版本中，就已經將分類文章改採清單的排版方式，目的主要是不讓搜尋引擎收錄過多的重複內容，另一方面也不希望大家找文章不好找，所以改用清單的方式。本來想說使用table來產生清單排版，免除瀏覽器校正問題，但礙於搜尋引擎對表格式的網頁不好解析其內容，所以還是使用DIV排版，並默默的校正一堆瀏覽器。

但是這回imXD5因為網頁HTML5化，因此所有的CSS與DIV幾乎是重構的狀態，所以在本來的分類文章清單中，樣式也順便進行重構，可是問題來了？「重構=花時間」，因為要用CSS+DIV模擬成table的樣式，如果一直使用float來排版，校正上其實很麻煩，當然在瀏覽器的校正上，更是頭大。後來找了一下發現有有不錯的好東西，在diplay的屬性上，有table相關的屬性值可以使用！

傳統的table構版的問題

一般來講，table打好語法就可以呈現效果了，而且語法很簡單，就單純的table、tr、td，這三個語法就可以畫出表格，在各個瀏覽器下也都可以正常的顯示。如果覺得排版不漂亮，就直接在語法內加上width、color等等的屬性值，效果很容易就達到了，可是這樣會讓程式碼雜亂。對於搜尋引擎來講，他們抓網站內容通常不會一次抓完，會先抓到一定的網頁大小，之後再來，如果你把樣式調整的程式碼都放進去，很快的，搜尋引擎可能光收錄你的表格樣式，還沒抓到重點就已經達到抓取額度了，重要的資料沒被收錄，倒是收錄了一些不重要的樣式設定。

使用CSS構版的優點

既然表格不推薦，那我們可以考慮改用CSS+DIV來構版。CSS+DIV構版的好處就是將網頁樣式設定和主要內容分離，透過style.css檔案來控制樣式，而且可以很方便的改，只要網站架構不變，可以隨你開心設計好幾個版本的樣式表，哪天心情好，換一下style.css的檔案，網頁就整個大不同。這也就是為什麼那一些BSP部落格(例如無名、痞客邦)，會有這麼多不同的套版，他們網頁架構都相同，就只是CSS檔案的不同，透過CSS的變換，可以營造出不一樣的效果。

開始進行CSS+DIV畫表格

為了讓大家方便在DIV和table之間的轉換，所以在CSS的命名上主要就是使用「css_」作為開頭，方便做一個對照。首先，以前面的範例table範例語法：

   

        
        
        
   

   

        
        
        
   
標題
回應
日期
如何停用WordPress內建搜尋功能？
5
2011-10-30

接著，我們將以上語法改成CSS+DIV的切板模式，如同前面所說，為了方便對照，所以CSS的定名開頭採用「css_」。

      

          

標題
        

回應
        

日期
    
    

          

如何停用WordPress內建搜尋功能？
        

5
        

2011-10-30
    

接下來，我們套上CSS的語法，效果就會出現了！

#css_table {
      display:table;
  }
.css_tr {
      display: table-row;
  }
.css_td {
      display: table-cell;
  }

CSS語法與table比對

事實上，從上面的語法來看，要用table改成css的方式並不困難，所有的樣式定義需要全部透過CSS的id或是class全部獨立出來，其他部分寫起來是差不多的。上面的語法，並沒有對CSS畫出的表個做顏色、邊線、寬度作定義，可能看起來醜醜的，這部分就請大家自己摸索了。這篇文章主要是要告訴大家，利用CSS也是可以達到table的效果。下面列出一些display對應table的屬性：

• inline-table：顯示成前後沒有換行的表格
• table：對應標籤，以表格方式顯示。
• table-row：對應 標籤。
• table-row-group：對應標籤。
• table-cell：對應標籤。
• table-caption：對應標籤。
• table-column：對應標籤
• table-column-group：對應標籤。
• table-header-group：對應標籤。
• table-footer-group：對應標籤。

IE7以下不相容

沒錯，這樣的CSS屬性很巧的，只有在IE8以上才有支援，如果是IE7以下的瀏覽器，必須做CSS的相容性校正了，這是小可惜的地方。但目前瀏覽器的使用量，IE7的比例也逐漸下降，因為大多XP使用者如果要升級瀏覽器，都會直接升級IE8。如果要校正，那就要善用幾個屬性：display:block、float:left，還有padding和margin進行校正了。

Bootstrap 超好用工具 – Start Bootstrap 免費版型&資源網站

資料來源：我是小米

http://startbootstrap.com/

初期使用bootstrap的人可能會很苦手不知要怎麼下手版型，Google關鍵字「Bootstrap Theme」其實可以找到許多資源網站，一般免費的Theme 網站大都也是提供基礎的配色跟樣式，但那對初學者來說已經很夠用。目前看過最喜歡也最實用的是 Start Bootstrap 這個網站，不但有基本分類而且也有提供Unstyle的版型，基本Layout都排好了，比如Single Page、Portfolios、Ecommerce….等，且沒有太多花俏的樣式增加修改的難度；另外此網站還蒐集並整理了其他網路上Bootstrap的資源，有官方資源、免費版型樣式、付費版型樣式、範例網站、jQuery外掛…等等，非常詳盡且方便。

主選單上有幾種分類可以選：
Admin and Dashboard – 適合管理介面 & 統計數據類型
Full Website – 適合全網站
Landing Page – 適合小型活動或額外的說明公告頁
One Page Websites – 一頁式類型
Portfolios – 適合展示作品集類型
Blogs – 部落格文章
Ecommerce – 小型電子商務、購物網站類型
Unstyled Templates – 各式Layout
Navigation & Navbars – 基本選單版型

---

Full Websites – 整個網站的雛形都有了

---

Unstyled Templates – 有各式Layout可以選擇，都是基本沒有添加樣式的版型

---

One Page Websites – 一頁式類型，除了有幾組有完整的theme以外，其他也有基本unstyle的版型

另外到 Buy Bootstrap Templates也可以看到各種付費版型的列表頁面，這些作品都會直接連結到幾個常見的付費版型網頁

---

比如Wrap Bootstrap，但其實綜合看下來在這裡出現的付費版型也都幾塊~十幾塊美金而已，說真的不貴，換算台幣也不過兩百多到四百多塊左右，而且有些基本架構或動態都已經很完整，事實上買來使用在專案上也很划算。

---

另一個前面提過這個網站很棒的地方就是資源蒐集的部份，點選Bootstrap Resources List

---

左邊分類選單
Official Bootstrap Resources – 官方Bootstrap資源
Premium Bootstrap Themes – 付費Bootstrap版型
Free Bootstrap Themes – 免費Bootstrap版型
Bootstrap Showcases – Bootstrap作品網站
Bootstrap Development Tools – 專門為 Bootstrap 開發的各種輔助工具，比如 UI Bootstrap 中優化及改善基本功能；Bootdey、Bootsnipp 提供已經設計完成的片段樣式下載等
Bootstrap UI Extensions – 介面輔助工具，比如按鈕、社群分享按鈕、整體介面配色等
Bootstrap jQuery Plugins – 提供了表單、表格、選單、Lightbox、Notification…等等外掛

---

除了分享簡介功能以外，也直接提供了連結網址，非常實用，下次再來介紹其他免費資源~

40 個設計師必備免費資源，超推懶人包！

40 個設計師必備免費資源，超推懶人包！

Templated 免費下載 CSS 和 HTML5 網站模板、佈景主題設計

Templated 免費下載 CSS 和 HTML5 網站模板、佈景主題設計

[JQUERY] 倒數計時(還有X天X時X分X秒)

資料來源

jQuery 倒數計時, 需要 jQuery.Timers 這個 plugin.
startDate 可以用 server 的時間輸出, 避免 client 的電腦時間不準。