企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站设计

Website development

添加材料设计到你的网站与分类

发布时间:2017-02-28 12:12:07

TAGS:网站设计

Adding Material Design To Your Website With Divi0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

材料设计是由谷歌2014在努力结合触觉元素(基于触觉)与真实世界的技术可能性和超越。它利用用户熟悉的东西像纸和墨水,增加了科学的现实运动和阴影。它甚至延伸至现实世界的局限性和科学技术足以弯曲但不违反物理规律。结果是一个既熟悉又神奇的同时设计。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

材料设计的一些共同的元素包括有意义的转换使用(或运动),光与影,使用网格布局,大胆的颜色。它很容易令人惊讶的是,这些元素可以提高整体的设计和你的网站的用户体验。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

今天,我将向你展示如何实现几个元素材料设计你的网站使用迪维生成器和一个小的CSS。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

那我们就开始吧0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

实施与分材料设计0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联


0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在今天的设计,我使用白色背景上的大胆的颜色和图片来吸引用户。我还增加了阴影和运动时,在一定的元素来进一步吸引用户。我添加一个按钮,位于图像和内容之间的界线因为两者的行动呼吁有关。后,我添加了一点运动的按钮图标,有目的性的“点”,他们在正确的方向。所有这些元素都与材料的设计和易于实现的一致性。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用的设计元素是图像从unsplash.com。标题图像有一个1288px宽度和高度737px。四盒的图像800px宽度450px高度。其余的设计是通过把Builder自定义CSS。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计标题0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用默认的标准节在迪维生成器所示,插入全角的柱。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

对部分模块设置,点击。在一般的设置,插入您的背景图像。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联


0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

然后点击排模块设置给它一个自定义填充:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

顶:150px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

底线:,0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

先进的设计环境下,添加一个自定义的底缘- 100px。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

保存并退出0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

由于这部分只作为一个背景,你不需要添加任何模块。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在添加另一个标准节使用迪维Builder和给它一个全型柱。然后点击模块设置。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

改变一般设置如下:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用自定义宽度:是的0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

自定义宽度:700px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

自定义填充:顶部和底部50px 50px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

先进的设计环境下给排自定义利率如下:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

上图:- 144px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

底线:0px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

背景颜色:# ffffff0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

自定义CSS选项卡,添加下面的CSS的主要元素的文本框:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<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>0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

保存并退出0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一行添加一个文本模块。在一般的设置,里面的内容框中添加你的内容。一定要把你的头在一个H1标签。这就是我加入(请选择文本标签进入HTML):0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<h1 style="text-transform: captialize;">Material Design</h1>Aenean consectetur ipsum ante, vel egestas enim tincidunt quis.0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

先进的设计环境下,把下面的:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

标题字体:球(B)0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

标题字体大小:40px;0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

标题文本颜色:# e91e630Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

头字母间距:2px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在你的头了0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

设计的栏目和内容的盒子0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一头是到位的,现在是时候添加你的栏目和内容框。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

首先添加一个标准节有一半,一半列布局0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

编辑本段设置。在一般的设置,更改自定义填充选项如下:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

顶:0px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

右:20px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

左:20px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在点击模块设置。先进的设计环境下,找到平衡柱高度的选择和切换到“是”。它将为20px底部填充你的每列间距也是一个好主意。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

去自定义CSS选项卡,把这行模块自定义CSS类称为“物质”。这将是我们的标识为我们所有的自定义CSS元素将添加以后。这是重要的,设计元素不应用场地宽阔,但只有在你把“材料”类。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

保存并退出0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在你可以开始添加模块到你的行。我想包括3个模块堆叠在彼此的顶部:图像模块,按键模块,和一个文本模块。首先添加一个图片模块的行左半柱。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在图像模块设置,在一般设置,修改/添加以下:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

上传/输入图像0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

删除下面的空间形象:是的0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

动画:桶;0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

图像对齐:中心0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

保存并退出0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

图像模块下,添加一个按钮模块。改变按钮模块设置在一般设置如下:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网址:[输入]按钮(我现在把#)0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

网址:在新标签页打开0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮文字:更多0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮对齐:中心0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

先进的设计环境下,把下面的:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

使用自定义样式按钮:是的0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮文字大小:24px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮文字颜色:# ffffff;0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮背景颜色:# e91e630Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮的边框宽度:00Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮边界半径:00Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

添加按钮图标:是的0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

按钮图标:在雪佛龙下图标(请选择一个向下的箭头图标)0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

后,按键模块下添加文本模块。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

去文本模块设置。在一般的设置,更改文字方向的中心和内容部分输入你的内容。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

先进的设计环境下,给你一些自定义文本模块填充如下:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

顶:10px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

看吧:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

自底向上看:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

左:10px0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

保存并退出0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

接下来,你要复制图像,按钮,文本模块你刚刚创建并将其拖到一半行右列。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

复制你的模块,先通过选择复制复制行图标两列行。0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在你的布局应该是这样的:0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

0Qs北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7143,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号