Ⅰ html5 怎麼製作響應式網頁
步驟1 創建空白的HTML 5模版
首先，我們創建一個空白的模版，代碼很簡單，如下所示：
復制代碼
步驟2 增加HTML 5新標簽 HTML 5中新增加了不少標簽，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在頁面模版中，我們需要確保每個區域都能正確地對齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標簽。代碼如下所示：
復制代碼
讀者可能留意到這里使用的div id=」wrapper」，這個是稍候用來做meida query的時候調整全局CSS樣式調整用的 步驟3 往HTML 5標簽中增加代碼
1）首先往標題中增加如下代碼：
Simple HTML5 Template
復制代碼
2）往導航標簽中添加如下代碼，這樣很方便地構件了一個簡單的頁面分類導航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
復制代碼
3）使用標簽來描述每一個要展示的內容實體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內容就可以使用標簽了。如下代碼所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply mmy text of the printing and typesetting instry.
Lorem Ipsum has been the instry's standard mmy text ever since the
1500s
復制代碼
4）添加標簽 HTML5提供的元素標簽用來表示當前頁面或文章的附屬信息部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分。
根據目前的規范，元素有兩種使用方法：
被包含在中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的引用、詞彙列表等。
在之外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情鏈接、附屬導航或廣告單元等。
代碼如下：
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 mmy
text of the printing and typesetting instry.
復制代碼
5）加上最後的標簽，代碼為：
Copyright@ 2013 HTML5.com Privacy Policy - About Us
復制代碼
步驟4 增加CSS樣式
首先創建一個空白的樣式，如下：
[/code] 然後在http://necolas.github.com/normalize.css/中下載這個css,然後將其內容復制到該空白的文件中代碼如下： [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; }
復制代碼
步驟5 為移動應用使用@media query查詢 為了進行響應式設計，最佳的方案是使用@media query去進行查詢，在上面的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%; }
}
復制代碼
步驟6 增加jquery,modernizer和html5shiv到標簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個能在多種瀏覽器中通過運行各種腳本兼容運行支持大部分HTML 5標簽的插件。我們將它們和jQuery庫放在標簽前，代碼如下：
0
復制代碼
Ⅱ 想建一個導航網站，有沒有什麼好看的網站源碼
如果是整體的導航網站， 找hao123的包就可以
行業分類的，可能要具體搜集處理了
這個代碼其實很簡單
大多數系統都可以實現
如果實在想找源碼的話，可以在站長工具上找找看