今天介紹的HTML5 UP! 提供大量的HTML5 模版，而且這些模版都支持響應式網頁設計，有了它我們就不用從無到有、從頭到尾來打造一個網站，而是直接就現(xiàn)有的樣版去做修改或調整，讓建網站難度降低許多，也減少花費的時間和開支。來收！

因為自適應網頁設計在開發(fā)上較為繁瑣，一般很少免費提供下載的網站，但 HTML5 UP! 收錄一系列共 28 種網頁設計，通通都是 HTML5+CSS3 并有響應式設計功能，網站采用的授權方式為 Creative Commons 姓名標示 3.0，也就是說你可以自由分享、修改這些模版，唯獨需要保留網頁里的姓名標示（Attribution）。

如果你喜歡這位設計師的作品，那可在 Pixelarity 網站找到更多模版下載，不過這網站是采用訂閱計費方式，最便宜方案為每三個月 $19 美元，可自由下載所有的網頁設計。

HTML5 UP!

STEP 1

HTML5 UP! 網站提供的模版都具有一定的質量，使用的圖片大多為免費圖庫而來，采用的是 CC0 授權，一般來說要放在網頁上、或者置換掉都沒有問題。從網頁里可以點選任何一個設計的 Live Demo 進行實時預覽，或者 Free Download 免費下載。

STEP 2

HTML5 UP! 的實時預覽（Live Demo）功能蠻好用的，除了可以讓你實時操作網頁、查看整體效果外，從左上角還能切換不同大小屏幕，例如桌面、平板計算機、手機，就能實時看到「響應式網頁設計」效果。

這是其中一個模版 Strata 在桌面瀏覽器的呈現(xiàn)效果：

切換到平板計算機時，屏幕寬度雖然縮小，但可以發(fā)現(xiàn)網頁設計沒有太大變化。

一旦切換到手機大小，網頁就自動縮成一行，不過依然保持原有的設計，并且能夠正常顯示網頁上的內容，這就是自適應網頁設計的特色。在 HTML5 UP! 里提供的樣版皆支持自適應設計，喜歡的話點選右上角的 Download 即可免費下載！

STEP 3

下載時不用注冊、也無須登錄任何數(shù)據(jù)，可以的話，記得順手幫 HTML5 UP! 按個贊，或是加入追蹤，讓這個網站可以被更多人看到。

【優(yōu)設酷站22連發(fā)！】

1. 免費圖庫+導航收集站：《酷站兩連發(fā)！高品質免費圖庫站+專注WEB/APP導航收集站》
2. 音樂站+字體搜索：《酷站兩連發(fā)！幫你專心工作的音樂站+谷歌字體在線搜索神器》
3. 漸變色+代碼比較：《酷站兩連發(fā)！漸變色方案全聚合網站+在線代碼比較神器》
4. 配色+占位圖：《酷站兩連發(fā)！在線色彩搭配工具+快速生成占位圖片器》
5. LOGO下載+字體下載：《酷站兩連發(fā)！可商用的矢量LOGO下載+平面最愛的27款免費字體》
6. 壓縮圖片+在線配色：《酷站兩連發(fā)！在線圖片壓縮神器+在線配色工具COLOURCO》
7. CSS Hover動畫+寵物小精靈配色：《酷站兩連發(fā)！寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
8. 美女圖片+游戲配色：《酷站兩連發(fā)！游戲配色網站+免費美女素材特供網站》
9. 在線配色+字體推薦：《酷站兩連發(fā)！在線配色神器+英文字體推薦網站》
10. 追波作品變代碼+16進制顏色：《酷站兩連發(fā)！用代碼呈現(xiàn)DRIBBBLE作品+16進制顏色網站》
11. 無縫紋理+多邊形背景：《酷站兩連發(fā)！專注無縫紋理素材站+多邊形背景生成器》

原文地址：free.com.tw

【優(yōu)設網 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網================
"優(yōu)設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優(yōu)秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com