浙江 杭州

Material Design风格用户注册登录界面设计

系统分类: 网页特效 - jquery插件 - jQuery文本框特效 2017-03-08

人气19752

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

使用方法

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<script type="text/javascript" src="js/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
                
HTML结构

输入框input允许用户进行输入,他的边框会在聚焦是变亮,占位文本会有浮动动画。你按照Materialize的要求需要在包裹<div>元素上添加一个.input-field class。这个class会通过jQuery动画来浮动标签。

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

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

<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s12">
              <i class="mdi-communication-email prefix"></i>
              <input id="email" type="email" class="validate">
              <label for="email" data-error="wrong" data-success="right">Email</label>
      </div>
    </div>
  </form>
</div>           
                

Material Design登录界面

背景颜色

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

<body class="red">
<body class="blue">
<body class="yellow">                 
                

查看演示
下载资源:6
下载资源
错误提交:

格式:zip 大小:45.55KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2146.html 非特殊说明,本文版权归原作者所有,转载请注明出处
Material Design风格用户注册登录界面设计

我当前G币余额:0 已下载次数:6

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有3 评论)