amazeui页面分析之登录页面

一、总结

1、tpl命名空间：tpl命名空间的样式都是从app.css里面来的，app.css用用来移动网站开发的样式

2、表单样式：am-form到am-form-group的形式

二、登录页面

截图：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>Amaze UI Admin index Examples</title>

     <meta name="description" content="这是一个 index 页面">

     <meta name="keywords" content="index">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <meta name="renderer" content="webkit">

     <meta http-equiv="Cache-Control" content="no-siteapp" />

     <link rel="icon" type="image/png" href="assets/i/favicon.png">

     <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

     <meta name="apple-mobile-web-app-title" content="Amaze UI" />

     <link rel="stylesheet" href="assets/css/amazeui.min.css" />

     <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />

     <link rel="stylesheet" href="assets/css/app.css">

     <script src="assets/js/jquery.min.js"></script>

 </head>

 <body data-type="login">

     <script src="assets/js/theme.js"></script>

     <div class="am-g tpl-g">

         <!-- 风格切换 -->

         <div class="tpl-skiner">

             <div class="tpl-skiner-toggle am-icon-cog">

             </div>

             <div class="tpl-skiner-content">

                 <div class="tpl-skiner-content-title">

                     选择主题

                 </div>

                 <div class="tpl-skiner-content-bar">

                     <span class="skiner-color skiner-white" data-color="theme-white"></span>

                     <span class="skiner-color skiner-black" data-color="theme-black"></span>

                 </div>

             </div>

         </div>

         <div class="tpl-login">

             <div class="tpl-login-content">

                 <div class="tpl-login-logo">

                 </div>

                 <form class="am-form tpl-form-line-form">

                     <div class="am-form-group">

                         <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入账号">

                     </div>

                     <div class="am-form-group">

                         <input type="password" class="tpl-form-input" id="user-name" placeholder="请输入密码">

                     </div>

                     <div class="am-form-group tpl-login-remember-me">

                         <input id="remember-me" type="checkbox">

                         <label for="remember-me">

                         记住密码

                          </label>

                     </div>

                     <div class="am-form-group">

                         <button type="button" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">提交</button>

                     </div>

                 </form>

             </div>

         </div>

     </div>

     <script src="assets/js/amazeui.min.js"></script>

     <script src="assets/js/app.js"></script>

 </body>

 </html>

amazeui页面分析之登录页面的更多相关文章

  1. 使用iframe，注销以后，点击某个标签，跳转到的登录页面位于标签中

    当使用iframe时,要么会话过期,要么手动注销,如果此时再进行操作,可能遇到跳转到登录页面,可是登录页面会位于标签执行,并没有全屏显示,即位于当前的iframe中,此时的解决方式很简单,只需要在登录 ...

  2. Nuxt.js打造旅游网站第3篇_登录页面的编写

    主要知识点: 1.使用vuex/store管理数据 2.登录注册逻辑 3.Nuxt的本地存储 1.登录页面 1.1登录页面布局 替换pages/user/login.vue的代码如下 <temp ...

  3. amazeui页面分析5

    amazeui页面分析5 一.总结 1.把原模板当成样例集合就好 2.都是一块一块的,删改等操作都方便 3.list方面的操作很多都是ui配合li 4.其实容器本质还是div,所以真的算简单了 5.样 ...

  4. amazeui页面分析4

    amazeui页面分析4 一.总结 1.直接照着作者的设计思路用:例如 pet_hd_con_time pet_hd_con_map ,这是time 和 map,那我别的说不定也可以直接用,比如aut ...

  5. amazeui页面分析3

    amazeui页面分析3 一.总结 1. 本质是list列表,是ul套li的形式,只不过li里面是图片 <li class="am-g am-list-item-desced am-l ...

  6. amazeui页面分析2

    amazeui页面分析2 一.总结 1.弄清结构:这些部分都是一块一块分好了的,掌握结构之后,想替换哪块就替换哪块,想不要哪块就不要哪块,非常简单的 2.一块一块:替换十分简单 3.弄清楚大块之后,然 ...

  7. HTML5实战教程———开发一个简单漂亮的登录页面

    最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...

  8. 单点登录CAS使用记（四）：为登录页面加上验证码

    CAS默认的登录页面样式如下,只有用户名与密码两项验证项目. 现在需要为首页登录加上验证码功能. 第一步:首页对默认登录页面的样式进行了调整,使其看上去还算美观. 在页面上加上了验证码项目. 第二步: ...

  9. Vue.js实现一个SPA登录页面的过程

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...

随机推荐

  1. request.getSession().getServletContext().getRealPath("")获取工程目录 路径修改

    使用request.getSession().getServletContext().getRealPath("")获取工程目录. 设置server Locations在serve ...

  2. Java技术——Java泛型详解（转）

    ); for (int i = 0; i < list.size(); i++) { String name = (String) list.get(i); //取出Integer时,运行时出现 ...

  3. Objective-C method及相关方法分析

    ## Objective-C method及相关方法分析 转载请注名出处 [http://blog.csdn.net/uxyheaven](http://blog.csdn.net/uxyheaven ...

  4. hdu1078 FatMouse and Cheese(记忆化搜索)

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=1078" target="_blank">http://acm. ...

  5. PS：切图

    1.从psd中获取资源 2.基本了解 3.简单的图片操作和调整 4.对自己的审美提高一.界面设置: 1.新建设置:ctr+n; 预设:Web,大小Web(1920*1080) 背景:透明 2.移动工具 ...

  6. 竖向 两级手风琴 TAB 栏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. node内容

    什么是node? node是一门技术,并不是一门新的语言.是JavaScript运行环境. node在解析JavaScript,依靠的是什么? 依靠的是谷歌浏览器中的v8引擎,所以不需要考虑兼容性,n ...

  8. Android中级第十讲--相机录像和查看系统相册图片

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 录像比较简单,开始录制: myCamera.unlock(); ...

  9. Python基础教程之第3章 使用字符串

    Python 2.7.5 (default, May 15 2013, 22:43:36) [MSC v.1500 32 bit (Intel)] on win32 Type "copyri ...

  10. iOS - 系统经常使用框架(framework)的简介

    系统框架(framework)的简介 ImageIO  - 该框架的接口可用于导入或导出图像数据及图像元数据 CoreTelephony  - 获取IMSI号,SIM卡背面的号码是SIM卡的电子串号, ...