html和css登录注册网页设计,Material Design风格用户注册登录界面设计

这是一款Material Design风格用户注册登录界面设计效果。该设计由用户登录,用户注册和忘记密码三个界面组成。设计中的所有元素都以Material Design为基础,整体效果时尚大方。

0990c109af4544ff860642c564be2f56.png

使用方法

该用户注册登录界面依赖于Materialize,一个用于制作Material Design设计的框架。使用时需要引入jQuery、materialize.js和materialize.css文件。

HTML结构

输入框input允许用户进行输入,他的边框会在聚焦是变亮,占位文本会有浮动动画。你按照Materialize的要求需要在包裹

元素上添加一个.input-field class。这个class会通过jQuery动画来浮动标签。

你还可以在输入框前添加一个小图标。要添加图标,只需要在图标上设置一个prefix class即可。你可以在这里找到更多的Material Design风格的图标。

如果你还需要添加一些验证提示信息,可以通过在data-error和data-success属性中进行设置。

Email

991cb57f9ec93d50fb0bb822f7c8de68.png

背景颜色

要调整元素的背景颜色,你只需要在元素上添加颜色的名称或亮/暗主题的class名称即可。关于背景颜色的更多资料可以参考这里。

201603282312454295.jpg

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值