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. 【Python】【Head First Python】【chapter1】1 - 导入模块

    导入模块 导入模块有三种方法,以导入sys模块为例: 第一是import module 形式导入 import sys location = sys.stdout 第二是from module imp ...

  2. Node.js转化GBK编码 - iconv-lite

    node当使用node获取GBK编码的数据时,nodejs仅仅支持utf-8,node没有提供转换编码的原生支持,有倒是有一个模块iconv能干这个事,但须要本地方法,VC++库的支持.国外有个大牛写 ...

  3. Android Studio 中 gradle 构建 堆栈空间不足

    Error:Unable to start the daemon process. This problem might be caused by incorrect configuration of ...

  4. 2017国家集训队作业[arc082d]Sandglass

    2017国家集训队作业[arc082d]Sandglass 题意: ​ 有一个沙漏,初始时\(A\)瓶在上方,两个瓶子的最大容量都为\(X\)克,沙子流动的速度为\(1g\)每单位时间.给出\(K\) ...

  5. JavaScript翻译成Java

    这两天公司有一个需求,将一段加密的JavaScript代码转换为JAVA版. JavaScript中的某一段代码: 前期查看了整个JavaScript代码,发现代码中,方法里面嵌套方法,各种不合规的变 ...

  6. 解决 Ubuntu 下解压 .zip 文件时出现乱码

    Ubuntu 下解压含中文名的 .zip 文件时,有时候会出现乱码的情况.我们可以通过下列命令来解决此类问题: $ unzip -O CP936 xxx.zip 原文网址 http://www.cnb ...

  7. PatentTips - Control register access virtualization performance improvement

    BACKGROUND OF THE INVENTION A conventional virtual-machine monitor (VMM) typically runs on a compute ...

  8. hdu 3294 Girls&#39; research

    #include<stdio.h> #include<string.h> #define MAX 200020 char s[MAX],ss[MAX*2],str[2]; in ...

  9. Codeforces Round #316 (Div. 2) A B C

    A. Elections time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  10. JS 图片大小自动调整 (img)

    <script> function dlutChangeImg(){ var maxwidth = 598; var obj = document.getElementById('bbs_ ...