記得去年底找到一個很棒的HTML5網(wǎng)站模版下載網(wǎng)站Templated，真的是網(wǎng)站開發(fā)者的好朋友，至少我們不用從無到有、從頭到尾來打造一個網(wǎng)站，而是直接就現(xiàn)有的樣版去做修改或調(diào)整，讓建網(wǎng)站難度降低許多，也減少花費(fèi)的時間和開支。

之前網(wǎng)友推薦我一個名為HTML5 UP！的網(wǎng)頁設(shè)計下載網(wǎng)站，提供大量HTML5模版，而且這些模版都支持響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design，簡稱RWD），也是俗稱的「自適應(yīng)網(wǎng)頁設(shè)計」，通過自動彈性調(diào)整畫面設(shè)計，以改變布局方式來使不同大小屏幕皆能正常瀏覽，達(dá)到最好的使用體驗(yàn)。

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

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

站點(diǎn)名稱：HTML5 UP！

網(wǎng)站連接：http://html5up.net/

使用教學(xué)

STEP 1

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

STEP 2

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

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

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

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

STEP 3

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

----我是分割線------

致力發(fā)布和推廣來自世界各地的互聯(lián)網(wǎng)資源

希望與更多人分享網(wǎng)絡(luò)快樂與便利，點(diǎn)關(guān)注作者更精彩！

前端」Bootstrap 網(wǎng)頁模版 Pure CSS

關(guān)注"荒料" 每天為您推薦優(yōu)秀的國內(nèi)外模版，源代碼，最新的技術(shù)。

[預(yù)覽地址]：https://purecss.io/base/

[下載地址]：https://github.com/yahoo/pure/

• 者：Vaibhav Arora
• 使用技術(shù)：HTML (Haml) / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/vaibhavarora/pen/xmpxjp

• 作者：Rob DiMarzo
• 使用技術(shù)：HTML (Pug) / CSS (SCSS)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/robdimarzo/pen/VqjvqR

• 作者：Chris Neale
• 使用技術(shù)：HTML / CSS (SCSS) / JavaScript (Babel)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/onion2k/pen/MZWoaL

• 作者：Mike Golus
• 使用技術(shù)：HTML (Pug) / CSS (Sass)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/mikegolus/pen/Jegvym

• 作者：Anastasia Goodwin
• 使用技術(shù)：HTML / CSS (SCSS)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/agoodwin/pen/NMJoER

• 作者：osorina irina
• 使用技術(shù)：HTML / CSS (Sass)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/333397406/pen/PQdMOO

• 作者：Mohammad Abdul Mohaiman
• 使用技術(shù)：HTML / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/mohaiman/pen/MQqMyo

• 作者：Chris Smith
• 使用技術(shù)：HTML / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/chris22smith/pen/RZogMa

• 作者：Bjorn
• 使用技術(shù)：HTML (Pug) / CSS (SCSS)
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/BjornRombaut/pen/mOLGgX

• 作者：Manuel Pinto
• 使用技術(shù)：HTML / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/P1N2O/pen/pyBNzX

• 作者：Sépion
• 使用技術(shù)：HTML / CSS
• 依賴庫：-
• 瀏覽器兼容：Chrome, Edge, Firefox, Opera, Safari
• 源碼鏈接：https://codepen.io/Sepion/pen/ZQJyeq