網(wǎng)站設計

Website development

添加材料設計到你的網(wǎng)站與分類

發(fā)布時間：2017-02-28 12:12:07

Adding Material Design To Your Website With Divi

材料設計是由谷歌2014在努力結(jié)合觸覺元素（基于觸覺）與真實世界的技術可能性和超越。它利用用戶熟悉的東西像紙和墨水，增加了科學的現(xiàn)實運動和陰影。它甚至延伸至現(xiàn)實世界的局限性和科學技術足以彎曲但不違反物理規(guī)律。結(jié)果是一個既熟悉又神奇的同時設計。

材料設計的一些共同的元素包括有意義的轉(zhuǎn)換使用（或運動），光與影，使用網(wǎng)格布局，大膽的顏色。它很容易令人驚訝的是，這些元素可以提高整體的設計和你的網(wǎng)站的用戶體驗。

今天，我將向你展示如何實現(xiàn)幾個元素材料設計你的網(wǎng)站使用迪維生成器和一個小的CSS。

那我們就開始吧

實施與分材料設計

在今天的設計，我使用白色背景上的大膽的顏色和圖片來吸引用戶。我還增加了陰影和運動時，在一定的元素來進一步吸引用戶。我添加一個按鈕，位于圖像和內(nèi)容之間的界線因為兩者的行動呼吁有關。后，我添加了一點運動的按鈕圖標，有目的性的“點”，他們在正確的方向。所有這些元素都與材料的設計和易于實現(xiàn)的一致性。

使用的設計元素是圖像從unsplash.com。標題圖像有一個1288px寬度和高度737px。四盒的圖像800px寬度450px高度。其余的設計是通過把Builder自定義CSS。

設計標題

使用默認的標準節(jié)在迪維生成器所示，插入全角的柱。

對部分模塊設置，點擊。在一般的設置，插入您的背景圖像。

然后點擊排模塊設置給它一個自定義填充：

頂：150px

底線：，

先進的設計環(huán)境下，添加一個自定義的底緣- 100px。

保存并退出

由于這部分只作為一個背景，你不需要添加任何模塊。

現(xiàn)在添加另一個標準節(jié)使用迪維Builder和給它一個全型柱。然后點擊模塊設置。

改變一般設置如下：

使用自定義寬度：是的

自定義寬度：700px

自定義填充：頂部和底部50px 50px

先進的設計環(huán)境下給排自定義利率如下：

上圖：- 144px

底線：0px

背景顏色：# ffffff

自定義CSS選項卡，添加下面的CSS的主要元素的文本框：

<trans data-src="box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23), 0 6px 20px rgba(0, 0, 0, 0.16);" data-dst="盒子的影子：0 6px 20px RGBA（0，0，0，0.23），0 6px 20px RGBA（0，0，0，0.16）；">盒子的影子：0 6px 20px RGBA（0，0，0，0.23），0 6px 20px RGBA（0，0，0，0.16）；</trans>

保存并退出

一行添加一個文本模塊。在一般的設置，里面的內(nèi)容框中添加你的內(nèi)容。一定要把你的頭在一個H1標簽。這就是我加入（請選擇文本標簽進入HTML）：

<h1 style="text-transform: captialize;">Material Design</h1>Aenean consectetur ipsum ante, vel egestas enim tincidunt quis.

先進的設計環(huán)境下，把下面的：

標題字體：球（B）

標題字體大?。?0px；

標題文本顏色：# e91e63

頭字母間距：2px

現(xiàn)在你的頭了

設計的欄目和內(nèi)容的盒子

一頭是到位的，現(xiàn)在是時候添加你的欄目和內(nèi)容框。

首先添加一個標準節(jié)有一半，一半列布局

編輯本段設置。在一般的設置，更改自定義填充選項如下：

頂：0px

右：20px

左：20px

現(xiàn)在點擊模塊設置。先進的設計環(huán)境下，找到平衡柱高度的選擇和切換到“是”。它將為20px底部填充你的每列間距也是一個好主意。

去自定義CSS選項卡，把這行模塊自定義CSS類稱為“物質(zhì)”。這將是我們的標識為我們所有的自定義CSS元素將添加以后。這是重要的，設計元素不應用場地寬闊，但只有在你把“材料”類。

保存并退出

現(xiàn)在你可以開始添加模塊到你的行。我想包括3個模塊堆疊在彼此的頂部：圖像模塊，按鍵模塊，和一個文本模塊。首先添加一個圖片模塊的行左半柱。

在圖像模塊設置，在一般設置，修改/添加以下：

上傳/輸入圖像

刪除下面的空間形象：是的

動畫：桶；

圖像對齊：中心

保存并退出

圖像模塊下，添加一個按鈕模塊。改變按鈕模塊設置在一般設置如下：

網(wǎng)址：[輸入]按鈕（我現(xiàn)在把#）

網(wǎng)址：在新標簽頁打開

按鈕文字：更多

按鈕對齊：中心

先進的設計環(huán)境下，把下面的：

使用自定義樣式按鈕：是的

按鈕文字大?。?4px

按鈕文字顏色：# ffffff；

按鈕背景顏色：# e91e63

按鈕的邊框?qū)挾龋?

按鈕邊界半徑：0

添加按鈕圖標：是的

按鈕圖標：在雪佛龍下圖標（請選擇一個向下的箭頭圖標）

后，按鍵模塊下添加文本模塊。

去文本模塊設置。在一般的設置，更改文字方向的中心和內(nèi)容部分輸入你的內(nèi)容。

先進的設計環(huán)境下，給你一些自定義文本模塊填充如下：

頂：10px

看吧：

自底向上看：

左：10px

保存并退出

接下來，你要復制圖像，按鈕，文本模塊你剛剛創(chuàng)建并將其拖到一半行右列。

復制你的模塊，先通過選擇復制復制行圖標兩列行。

現(xiàn)在你的布局應該是這樣的：

原創(chuàng)不易，未經(jīng)授權，嚴禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7143,0.html

上一篇：?過時的SEO策略停止使用吧

下一篇：飲食和營養(yǎng)網(wǎng)站建設

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風
格設計
程序設
計研發(fā)
資料錄
入優(yōu)化
確認交
付使用
后續(xù)跟
蹤服務
+86 10 64758810
18510861135

熱門標簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團隊。

潘濤
我是東方龍馬集團，在云智家做了2個企業(yè)官網(wǎng)，服務態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務態(tài)度好。值得你的信賴！

譚嬌
技術好，設計精良，操作便利，很專業(yè)！配套的服務和后續(xù)的服務都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理