50個(gè)精彩的響應(yīng)式HTML和CSS模板：上

自由設(shè)計(jì)固然是一件好事兒，然而經(jīng)常關(guān)注先進(jìn)的設(shè)計(jì)作品，久而久之，就會(huì)幫你節(jié)省更多的布景設(shè)計(jì)時(shí)間，視覺效果也明顯會(huì)更為專業(yè)，可以參考以下這些響應(yīng)式HTML / CSS模板，實(shí)用性高，你肯定能從中汲取不少精華。

一提到設(shè)計(jì)，大家可能首先會(huì)想到平面設(shè)計(jì)，我們先來看一下響應(yīng)式網(wǎng)頁設(shè)計(jì)，大約2年前，有7/10的網(wǎng)站中，你就能看到今天響應(yīng)式的影子，當(dāng)然這都是移動(dòng)互聯(lián)網(wǎng)革命的結(jié)果，最終演變成了標(biāo)準(zhǔn)版，盡管響應(yīng)式布局在客戶端并不清晰。

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

1、?Progressive

2、?Buildpress Construction

3、?EDENA

4、?HOUSEBULID

5、?Automotive

6、?Travelo

7、?Minio

8、?Nietzsche

9、?Pages

10、?Machine

11、?Base Hotel

12、?Gravity

13、?Elixir

14、?Slidebox

15、?Pleasure

16、?Lambda

17、?Minovate

18、?Gatwick

19、?Biss Corporate

20、?Angulr

21、?Xenon

22、?ServerEast

23、?Imago

24、?MaterialX

25、?Canvas

今天先介紹到這，下次繼續(xù)。

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

介紹

一個(gè)基于 vue、Echart 框架的大數(shù)據(jù)可視化（大屏展示）模板，提供數(shù)據(jù)動(dòng)態(tài)刷新渲染、屏幕適應(yīng)、內(nèi)部圖表自由替換、Mixins注入等功能。

開源地址

https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search

項(xiàng)目展示

項(xiàng)目使用

如何啟動(dòng)項(xiàng)目需要提前安裝好nodejs與npm,下載項(xiàng)目后在項(xiàng)目主目錄下運(yùn)行npm/cnpm install拉取依賴包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以啟動(dòng)項(xiàng)目，啟動(dòng)項(xiàng)目后需要手動(dòng)全屏（按 F11）。
如何請(qǐng)求數(shù)據(jù)現(xiàn)在的項(xiàng)目未使用前后端數(shù)據(jù)請(qǐng)求，建議使用 axios 進(jìn)行數(shù)據(jù)請(qǐng)求，在 main.js 位置進(jìn)行全局配置，在 views/xx.vue 文件里進(jìn)行前后端數(shù)據(jù)請(qǐng)求。

如何動(dòng)態(tài)渲染圖表在components/echart下的文件，比如drawPie()是渲染函數(shù)，echartData是需要?jiǎng)討B(tài)渲染的數(shù)據(jù)，當(dāng)外界通過props傳入新數(shù)據(jù)，我們可以使用watch()方法去監(jiān)聽，一旦數(shù)據(jù)變化就調(diào)用this.drawPie()并觸發(fā)內(nèi)部的.setOption函數(shù)，重新渲染一次圖表。

如何復(fù)用圖表組件因?yàn)?Echart 圖表是根據(jù)id/class去獲取 Dom 節(jié)點(diǎn)并進(jìn)行渲染的，所以我們只要傳入唯一的 id 值與需要的數(shù)據(jù)就可以進(jìn)行復(fù)用。如中間部分的任務(wù)通過率與任務(wù)達(dá)標(biāo)率組件就是采用復(fù)用的方式。

如何更換邊框邊框是使用了 DataV 自帶的組件，只需要去 views 目錄下去尋找對(duì)應(yīng)的位置去查找并替換就可以，具體的種類請(qǐng)去 DavaV 官網(wǎng)查看如：

如何更換圖表直接進(jìn)入 components/echart 下的文件修改成你要的 echarts 模樣，可以去echarts 官方社區(qū)里面查看案例。
Mixins 注入的問題使用 mixins 注入解決了圖表重復(fù)書寫響應(yīng)式適配的代碼，如果要更換(新增)圖形，需要將echarts.init()函數(shù)賦值給this.chart，然后 mixins 才會(huì)自動(dòng)幫你注入響應(yīng)式功能。
屏幕適配問題本項(xiàng)目借助了 flexible 插件，通過改變 rem 的值來進(jìn)行適配，原設(shè)計(jì)為 1920px。，適配區(qū)間為：1366px ~ 2560px，本項(xiàng)目有根據(jù)實(shí)際情況進(jìn)行源文件的更改，小屏幕（如:寬為 1366px）需要自己舍棄部分動(dòng)態(tài)組件進(jìn)行適配，如'動(dòng)態(tài)文字變換組件'會(huì)影響布局，需要手動(dòng)換成一般節(jié)點(diǎn)。

具體使用請(qǐng)移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址參考。

篇文章我們說了初始化css的創(chuàng)建，本篇文章我們來說一下如何創(chuàng)建一個(gè)初始化html的基本模版以及初始化文件的創(chuàng)建。

1）初始化html文件的創(chuàng)建

我們?cè)趯?duì)一個(gè)網(wǎng)頁進(jìn)行切圖編碼之前，我們需要?jiǎng)?chuàng)建這么幾個(gè)目錄文件，便于存放我們的代碼；

css文件目錄：該目錄的作用是用于存放我們的網(wǎng)頁css文件，一般我們分為2個(gè)文件，一個(gè)是用于存放我們上篇文章說到的初始化代碼的base.css，還有一個(gè)是用于存放我們自己編寫的網(wǎng)頁代碼的style.css文件；

images文件目錄：該目錄的作用是用于存放我們網(wǎng)頁的切圖文件，網(wǎng)頁中的背景圖片以及元素圖標(biāo)等都可以存放到此文件夾中；

js文件目錄：該目錄的作用是存放我們編寫的網(wǎng)頁javascript代碼（關(guān)于javascript代碼我們將在以后的文章中進(jìn)行詳解），js代碼的作用是實(shí)現(xiàn)網(wǎng)頁中的基本動(dòng)態(tài)展示效果，比如選項(xiàng)卡切換，banner輪播圖切換等效果；

另外還有一個(gè)文件就是我們的網(wǎng)頁html文件，首頁我們一般命名為index.html，一般放于跟目錄下邊。標(biāo)準(zhǔn)的目錄文件就如下圖所示：

備注：如果你的電腦看不到.html這個(gè)后綴的話, 在文件夾左上角找到組織-文件夾和搜索選項(xiàng)；

然后點(diǎn)擊查看-找到隱藏已知文件類型的擴(kuò)展名-將前邊的對(duì)勾去掉即可；

2）標(biāo)準(zhǔn)html模版的創(chuàng)建

文件創(chuàng)建完成之后我們就要?jiǎng)?chuàng)建標(biāo)準(zhǔn)的index.html的網(wǎng)頁模版，一個(gè)網(wǎng)頁模版一般是由主體html、頭部head、內(nèi)容body組成，其中head區(qū)域主要存放網(wǎng)頁標(biāo)題、關(guān)鍵詞、頁面描述以及css和js代碼的引用；而body區(qū)域主要存放我們以后對(duì)頁面的編碼內(nèi)容；

具體的標(biāo)準(zhǔn)模版顯示效果就如下圖所示：

好了，本篇文章就給大家說到這里，大家自己下來可以創(chuàng)建屬于自己的通用初始化文件模版，以后開發(fā)的時(shí)候直接復(fù)制使用即可。

每日金句：不要生氣要爭(zhēng)氣，不要看破要突破，不要嫉妒要欣賞，不要拖延要積極，不要心動(dòng)要行動(dòng)。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

在線咨詢

上一篇：一個(gè)簡單的CSS屬性助你實(shí)現(xiàn)頁面的等比例縮放，快來學(xué)習(xí)一下吧
下一篇：HTML實(shí)現(xiàn)文件夾的上傳和下載

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商