們繼續(xù)來看下面這些最佳的響應(yīng)式Html 和Css模板，希望能啟發(fā)你的靈感，幫助你在設(shè)計(jì)/開發(fā)過程中提高效率。

26、?CityTours

27、?Extended

28、?Themekit

29、?pivot

30、?Euforia

31、?Learning APP

32、?Porto

33、?Palas

34、?ShopMe

35、?ODIN

36、?Rhythm Multipurpose One

37、?Eagle

38、?Make

39、?Atlant

40、?Orbitex

41、?Metronic

42、?AdminDesigns

43、?Material Admin Template

44、?CONCEPT

45、?Triada

46、?Aura

47、?Clip-Two

48、?Hempstead

49、?Oli

50、?Vossen

其實(shí)優(yōu)秀的模板非常多，不只有這50個(gè)。

智能社 撰稿，轉(zhuǎn)載請(qǐng)注明來源。

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

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

因?yàn)樽赃m應(yīng)網(wǎng)頁(yè)設(shè)計(jì)在開發(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，也就是說你可以自由分享、修改這些模版，唯獨(dú)需要保留網(wǎng)頁(yè)里的姓名標(biāo)示（Attribution）。

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

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

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

使用教學(xué)

STEP 1

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

STEP 2

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

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

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

一旦切換到手機(jī)大小，網(wǎng)頁(yè)就自動(dòng)縮成一行，不過依然保持原有的設(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è)、也無需登錄任何數(shù)據(jù)，可以的話，記得順手幫HTML5 UP！按個(gè)贊，或是加入追蹤，讓這個(gè)網(wǎng)站可以被更多人看到。

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

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

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

面頁(yè)面不多，提供給有能力的高手?jǐn)U展制作，里面為響應(yīng)式的html模板素材，一共4個(gè)頁(yè)面，首頁(yè)，列表頁(yè)，內(nèi)容頁(yè)，還有擴(kuò)展單頁(yè)，詳情可以看下面圖片，僅供參考

首頁(yè)

列表頁(yè)

內(nèi)容頁(yè)