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

因?yàn)樽赃m應(yīng)網(wǎng)頁(yè)設(shè)計(jì)在開(kāi)發(fā)上較為繁瑣，一般很少免費(fèi)提供下載的網(wǎng)站，但 HTML5 UP! 收錄一系列共 28 種網(wǎng)頁(yè)設(shè)計(jì)，通通都是 HTML5+CSS3 并有響應(yīng)式設(shè)計(jì)功能，網(wǎng)站采用的授權(quán)方式為 Creative Commons 姓名標(biāo)示 3.0，也就是說(shuō)你可以自由分享、修改這些模版，唯獨(dú)需要保留網(wǎng)頁(yè)里的姓名標(biāo)示（Attribution）。

如果你喜歡這位設(shè)計(jì)師的作品，那可在 Pixelarity 網(wǎng)站找到更多模版下載，不過(guò)這網(wǎng)站是采用訂閱計(jì)費(fèi)方式，最便宜方案為每三個(gè)月 $19 美元，可自由下載所有的網(wǎng)頁(yè)設(shè)計(jì)。

HTML5 UP!

STEP 1

HTML5 UP! 網(wǎng)站提供的模版都具有一定的質(zhì)量，使用的圖片大多為免費(fèi)圖庫(kù)而來(lái)，采用的是 CC0 授權(quán)，一般來(lái)說(shuō)要放在網(wǎng)頁(yè)上、或者置換掉都沒(méi)有問(wèn)題。從網(wǎng)頁(yè)里可以點(diǎn)選任何一個(gè)設(shè)計(jì)的 Live Demo 進(jìn)行實(shí)時(shí)預(yù)覽，或者 Free Download 免費(fèi)下載。

STEP 2

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

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

切換到平板計(jì)算機(jī)時(shí)，屏幕寬度雖然縮小，但可以發(fā)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)沒(méi)有太大變化。

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

STEP 3

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

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

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

原文地址：free.com.tw

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

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