材料设计是由谷歌2014在努力结合触觉元素（基于触觉）与真实世界的技术可能性和超越。它利用用户熟悉的东西像纸和墨水，增加了科学的现实运动和阴影。它甚至延伸至现实世界的局限性和科学技术足以弯曲但不违反物理规律。结果是一个既熟悉又神奇的同时设计。

材料设计的一些共同的元素包括有意义的转换使用（或运动），光与影，使用网格布局，大胆的颜色。它很容易令人惊讶的是，这些元素可以提高整体的设计和你的网站的用户体验。

今天，我将向你展示如何实现几个元素材料设计你的网站使用迪维生成器和一个小的CSS。

那我们就开始吧

实施与分材料设计

在今天的设计，我使用白色背景上的大胆的颜色和图片来吸引用户。我还增加了阴影和运动时，在一定的元素来进一步吸引用户。我添加一个按钮，位于图像和内容之间的界线因为两者的行动呼吁有关。后，我添加了一点运动的按钮图标，有目的性的“点”，他们在正确的方向。所有这些元素都与材料的设计和易于实现的一致性。

使用的设计元素是图像从unsplash.com。标题图像有一个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

保存并退出

接下来，你要复制图像，按钮，文本模块你刚刚创建并将其拖到一半行右列。

复制你的模块，先通过选择复制复制行图标两列行。

现在你的布局应该是这样的：

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/10808.html