步驟1 創(chuàng)建空白的HTML 5模版 首先,我們創(chuàng)建一個(gè)空白的模版,代碼很簡(jiǎn)單,如下所示:復(fù)制代碼步驟2 增加HTML 5新標(biāo)簽 HTML 5中新增加了不少標(biāo)簽,如: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section在頁(yè)面模版中,我們需要確保每個(gè)區(qū)域都能正確地對(duì)齊,因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示:復(fù)制代碼讀者可能留意到這里使用的div id=”wrapper”,這個(gè)是稍候用來(lái)做meida query的時(shí)候調(diào)整全局CSS樣式調(diào)整用的 步驟3 往HTML 5標(biāo)簽中增加代碼 1)首先往標(biāo)題中增加如下代碼: Simple HTML5 Template 復(fù)制代碼2)往導(dǎo)航標(biāo)簽中添加如下代碼,這樣很方便地構(gòu)件了一個(gè)簡(jiǎn)單的頁(yè)面分類導(dǎo)航: Home About Parent Page Child One Child Two with child Child One Child Two Child Three Child Three Contact 復(fù)制代碼3)使用標(biāo)簽來(lái)描述每一個(gè)要展示的內(nèi)容實(shí)體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用標(biāo)簽了。如下代碼所示: This is a title for post Richard KS 20th March 2013 Tutorials HTML5, CSS3 and Responsive 10 Comments Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 復(fù)制代碼4)添加標(biāo)簽 HTML5提供的元素標(biāo)簽用來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分,可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組,以及其他類似的有別與主要內(nèi)容的部分。根據(jù)目前的規(guī)范,元素有兩種使用方法:被包含在中作為主要內(nèi)容的附屬信息部分,其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。 在之外使用,作為頁(yè)面或站點(diǎn)全局的附屬信息部分;最典型的形式是側(cè)邊欄(sidebar),其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。 代碼如下:Categories Category 1 Category 2 Parent Category Child One Child Two Grandchild One Grandchild Two Grandchild Three Child Three Category 3 Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. 復(fù)制代碼5)加上最后的標(biāo)簽,代碼為: Copyright@ 2013 HTML5.com Privacy Policy - About Us復(fù)制代碼 步驟4 增加CSS樣式 首先創(chuàng)建一個(gè)空白的樣式,如下:[/code] 然后在http://necolas.github.com/normalize.css/中下載這個(gè)css,然后將其內(nèi)容復(fù)制到該空白的文件中代碼如下: [code]body {font-family: arial, sans-serif;font-size: 100%; /* best for all browser using em */padding:0;margin:0;}*, html { line-height: 1.6em; }article img { width:auto; max-width:100%; height:auto; }.sidebar a, article a, header a, footer a { color: #C30; }header a { text-decoration: none; }#wrapper {font-size: 0.8em; /* 13px from 100% global font-size */max-width: 960px; /* standard 1024px wide */margin: 0 auto;}/* css for */header { padding: 1em 0; margin: 0px; float: left; width: 100%;}header hgroup { width: 100%; font-weight:normal; }/* css for */nav { display: block; margin: 0 0 2em; padding: 0px; float: left; width: 100%; background-color: #181919;}nav ul ul {display: none;}nav ul li:hover > ul {display: block;}nav ul { padding: 0; list-style: none; position: relative; display: inline-table; z-index: 9999; margin: 0px; float: left; width: 100%;}nav ul:after {content: ""; clear: both; display: block;}nav ul li {float: left;}nav ul li:hover a {color: #fff;}nav ul li a { display: block; padding: 1em; font-size: 1.125em; color: #ccc; text-decoration: none; margin: 0px; background-color: #000; border-right: 1px solid #333;}nav ul li:last-of-type a {border-right: 1px solid transparent !important;}nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; width: auto; float: none;}nav ul li:hover { background: #5f6975; color: #FFF;}nav ul ul li a:hover { background-color: #4b545f;}nav ul ul li {float: none;border-bottom: 1px solid #444240;position: relative;}nav ul ul li a {padding: 0.5em 1em;font-size: 1em;width:10em;color: #fff;}nav ul ul ul {position: absolute; left: 100%; top:0;}/* css for */section.content { width: 70%; float:left; }.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }article .entry { clear:both; padding: 0 0 1em; }h1.post-title { font-size: 1.8em; margin:0; padding:0;}.entry.post-meta { color: #888; }.entry.post-meta span { padding: 0 1em 0 0; }.entry.post-content { font-size: 1.125em; margin:0; padding:0;}/* css for */aside.sidebar { width: 25%; float:right; }aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;}aside.sidebar ul li { width:100%; margin: 0px 0px 2em; padding: 0px; float: left; list-style: none;}aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;}aside.sidebar ul li ul li ul li { margin: 0px; padding: 0px 0px 0px 1em; width: 90%; font-size: 0.9em;}aside.sidebar ul li h3.widget-title { width:100%; margin: 0px; padding: 0px; float: left; font-size: 1.45em;}/* css for */footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;}footer .footer-left { width: 45%; float:left; text-align:left; }footer .footer-right { width: 45%; float:right; text-align:right; }復(fù)制代碼步驟5 為移動(dòng)應(yīng)用使用@media query查詢 為了進(jìn)行響應(yīng)式設(shè)計(jì),最佳的方案是使用@media query去進(jìn)行查詢,在上面的CSS代碼中添加如下代碼:/* ipad 768px */@media only screen and (min-width:470px) and (max-width:770px){body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}/* iphone 468px */@media only screen and (min-width:270px) and (max-width:470px){body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}復(fù)制代碼步驟6 增加jquery,modernizer和html5shiv到標(biāo)簽中 這里推薦使用Modernizr 和html5shiv,它們都是一個(gè)能在多種瀏覽器中通過運(yùn)行各種腳本兼容運(yùn)行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫(kù)放在標(biāo)簽前,代碼如下:0復(fù)制代碼