添加材料設計到你的網站與分類

材料設計是由谷歌2014在努力結合觸覺元素（基于觸覺）與真實世界的技術可能性和超越。它行使用戶認識的東西像紙和墨水，增長了科學的實際活動和陰影。它甚至延長至實際世界的局限性和科學技術足以彎曲但不違背物理規律。效果是一個既認識又神奇的同時設計。

材料設計的一些共同的元素包括故意義的轉換使用（或活動），光與影，使用網格布局，勇敢的顏色。它很容易令人驚奇的是，這些元素可以進步團體的設計和你的網站的用戶體驗。

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

那我們就開始吧

實施與分材料設計

在今天的設計，我使用白色背景上的勇敢的顏色和圖片來吸引用戶。我還增長了陰影和活動時，在肯定的元素來進一步吸引用戶。我添加一個按鈕上海做網站中心上海網站建設，位于圖像和內容之間的界線由于兩者的舉措呼吁有關。，我添加了一點活動的按鈕圖標，有目的性的“點”，他們在的方向。所有這些元素都與材料的設計和易于實現的同等性。

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

設計題目

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

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

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

頂：150px

底線：，

先輩的設計環境下，添加一個自定義的底緣- 100px。

保存并退出

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

如今添加另一個標準節使用迪維Builder和給它一個全型柱。然后點擊模塊設置。

改變一樣平常設置如下：

使用自定義寬度：是的

自定義寬度：700px

自定義添補：頂部和底部50px 50px

先輩的設計環境下給排自定義利率如下：

上圖：- 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>

保存并退出

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

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

先輩的設計環境下，把下面的：

題目字體：球（B）

題目字體大小：40px；

題目文本顏色：# e91e63

頭字母間距：2px

如今你的頭了

設計的欄目和內容的盒子

一頭是到位的，如今是時候添加你的欄目和內容框。

首先添加一個標準節有一半，一半列布局

編輯本段設置。在一樣平常的設置，更改自定義添補選項如下：

頂：0px

右：20px

左：20px

如今點擊模塊設置。先輩的設計環境下，找到平衡柱高度的選擇和切換到“是”。它將為20px底部添補你的每列間距也是一個好主意。

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

保存并退出

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

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

上傳/輸入圖像

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

動畫：桶；

圖像對齊：中間

保存并退出

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

網址：[輸入]按鈕（我如今把#）

網址：在新標簽頁打開

按鈕筆墨：更多

按鈕對齊：中間

先輩的設計環境下，把下面的：

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

按鈕筆墨大小：24px

按鈕筆墨顏色：# ffffff；

按鈕背景顏色：# e91e63

按鈕的邊框寬度：0

按鈕邊界半徑：0

添加按鈕圖標：是的

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

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

去文本模塊設置。在一樣平常的設置，更改筆墨方向的中間和內容部分輸入你的內容。

先輩的設計環境下，給你一些自定義文本模塊添補如下：

頂：10px

看吧：

自底向上看：

左：10px

保存并退出

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

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

如今你的布局應該是如許的：