如何使用CSS3制作一个材料设计风格登录界面

　　介绍

这篇文章将为大家详细讲解有关如何使用CSS3制作一个材料设计风格登录界面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

心血来潮,想学材料学设计的设计风格,就尝试完成了一个登录页面制作。

这是整体效果。

感觉还不错吧,结尾会附上代码

在编写的过程中,没有使用任何图片或者字体图标,全部使用CSS3完成,还是遇到一些难点和错误,所以想笔记下来,以后方便查阅。

<强>响应式设计

在这个页面中,使用下面3点来完成响应式设计

1,最大宽度。设定了一个max-width的最大宽度,以便在大屏幕时兼容。

2,保证金:20 px汽车;使其保持时刻居中

3组件使用像素

关于响应式的设计要点还有很多。

<强>整体页面布局

& lt; ! DOCTYPE  html> 　　& lt; html  lang=癳n"祝辞 　　 　　& lt; head> 　　,,,& lt; meta  charset=癠TF-8"比; 　　,,,& lt; title> Document 　　,,,& lt; meta  http-equiv=癤-UA-Compatible",内容=癐E=边缘,chrome=1,比; 　　,,,& lt; meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　,,,& lt; link  rel=皊tylesheet", href=https://www.yisu.com/zixun/胺绺?style.css”> 　　头 　　 　　身体<> 　　

　　

　　

　　

　　

　　

　　

　　用户登录 　　

　　

　　<标签类=" form标签">用户名> 　　

　　<标签类=" form标签">密码> 　　

　　

忘记密码

　　

　　 　　<标签类=" form标签">记住密码> 　　

　　

　　<按钮类="登陆按钮“> 　　 　　 　　

　　 　　

赞