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

使用方法

该用户注册登录界面依赖于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

背景颜色

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

html5好看的注册页面设计,Material Design风格用户注册登录界面设计相关推荐

  1. 移动端html模板卡片列表效果,移动手机Material Design风格信息卡片UI设计

    这是一款非常时尚的移动手机Material Design风格信息卡片UI设计效果.该卡片设计效果中所有的卡片在点击或触摸之后,会以平滑过渡动画全屏展开.整个设计以扁平风格为主,非常时尚. 使用方法 H ...

  2. 15个华丽的扁平风格的登录界面设计示例

    对于任何网站来说,登录界面都是最重要的页面之一.这个页面的设计也在不断的进化,设计师会充分利用最新的技术和流行设计优势应用到登录界面的设计中.过去的2013年,扁平化设计成为非常受欢迎的设计风格,你绝 ...

  3. html5 仿微信语音播放器,Material design风格HTML5 audio音频播放器

    jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件.该音频播放器可以设置音频播放列表,每首曲子的封面,标题等,还可以控制歌曲的播放和快进, ...

  4. html用户登录页面设计,简洁时尚的用户登录界面设计效果

    这是一款简洁时尚的用户登录界面设计效果.该用户登录效果使用CSS和JS来完成,它使用元素滑动效果来制作登录表单动画,字体效果时尚大方,是非常不错的用户登录界面UI设计效果. 使用方法 HTML结构 该 ...

  5. java比较炫的登录界面_教你写一个炫酷的Material Design 风格的登录和注册页面

    每个人都会喜欢漂亮的登录界面,一个App 给人们的第一印象是非常重要的. 这篇文章将教你使用谷歌材料设计规范(Material design spec )和谷歌的新的设计支持库( design sup ...

  6. Material Design风格登录注册

    本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...

  7. Go项目(一)、服务器数据拉取和Material Design风格

    零.Go项目的github地址:https://github.com/fantianwen/Go 一.前言:因为希望能能够整合现在安卓的围棋app中较好的东西和当下较为流行的App中常见的功能,于是, ...

  8. 头条是一款遵循材料设计(Material Design)的第三方今日头条客户端, 聚合了新闻/段子/图片/视频/头条号内容, 没有广告, 仅仅只有存粹的阅读, 不断完善中, 采用 MVP + RxJa

    Toutiao 项目地址:iMeiji/Toutiao  简介:头条是一款遵循材料设计(Material Design)的第三方今日头条客户端, 聚合了新闻/段子/图片/视频/头条号内容, 没有广告, ...

  9. Android 材料设计Material Design 动画篇(一)

    Material Design,中文名:材料设计语言,是由Google推出的全新的设计语言,谷歌表示,这种设计语言旨在为手机.平板电脑.台式机和"其他平台"提供更一致.更广泛的&q ...

最新文章

  1. 索引块与数据块的区别
  2. 【安全漏洞】浅谈Bypass Waf (基础-实战)
  3. prettyJson V7.1 使用
  4. 并发基础知识:死锁和对象监视器
  5. 【转】itk、vtk、qt 显示dicom 数据
  6. composition java_阿里P7架构师通过源码浅析Java中的资源加载
  7. HBase-TDG Architecture
  8. poj2431java_POJ 2431 Expedition
  9. 介绍一下ajax后最好的返回结果的方式#34;Json#34;
  10. 将图的广度优先遍历在邻接矩阵和邻接表存储结构上分别实现_《青岛大学-王卓-数据结构》B站学习...
  11. python开发wince_零基础学习WinCE开发
  12. GPS定位技术相关的毕业论文有哪些呢?
  13. 围堵iPhone 13
  14. Hello World with Ant
  15. P1357 花园(dp快速幂转移)
  16. oa系统需要的服务器配置,oa办公系统需要服务器配置
  17. Python-OpenCV 实现美图秀秀视频剪辑效果【转场】
  18. 摩托车闪光控制器专用芯片MST1172
  19. 如何轻松记账,记录日常收支选对账本很重要
  20. debian linux 硬盘,Debian硬盘安装

热门文章

  1. 微前端--无界方案之官网demo操作说明
  2. MFC界面库BCGControlBar v33.0 - 全新升级Ribbon Bar、工具栏等
  3. 如何远程连接MySQL数据库
  4. NOIP2013 火柴排队 [洛谷P1966]
  5. 浅谈DNS域名解析过程
  6. uniapp实现下拉刷新及上拉(分页)加载更多(app,H5,小程序均可使用)
  7. 【开发工具】【smartctl】硬盘检测工具(smartctl)的使用
  8. MetLife亚洲分部开始试验区块链保险产品
  9. 【济南的夜不是夜】凌波不过起凤桥
  10. 毒瘤~~(第二类斯特林数及其相关公式)