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. Mysql学习总结（8）——MySql基本查询、连接查询、子查询、正则表达查询讲解

    查询数据指从数据库中获取所需要的数据.查询数据是数据库操作中最常用,也是最重要的操作.用户可以根据自己对数据的需求,使用不同的查询方式.通过不同的查询方式,可以获得不同的数据.MySQL中是使用SEL ...

  2. Volitale

    例1 volatile提醒编译器它后面所定义的变量随时都有可能改变.因此编译后的程序每次须要存储或读取这个变量的时候,都会直接从变量地址中读取数据. 假设没有volatile关键字.则编译器可能优化读 ...

  3. KendoUi中KendoDropDownList控件的使用——三级级联模块的实现

    1. 应用需求 在权限系统开发中除了以上数据表关系的设计之外.比較麻烦的地方是级联模块在页面的展示,因为设计中最多是控制到三级,因此三级级联模块的展示.编辑等页面操作是须要解决的问题,这里採用Kend ...

  4. vim-缓存区中打开另外一个文件的方法

    现在有这么一种情况:    我现在在ubuntu用户根目录下--    我根目录下有一个文件夹blogs,这个文件夹下面有两个文件:text1,text2.    我现在从-目录下进行如下操作    ...

  5. js插件---video.js如何使用

    js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...

  6. 41.内存函数实现(memcpy,memset,memmove,memicmp,memchr.memccpy)

    memcpy #include <stdio.h> #include <stdlib.h> #include <memory.h> void * mymemcpy( ...

  7. MATLAB 软件学习

    what  列出当前目录或指定目录下的M\MAT 和 MAX 文件 …   在语句行尾端表示该行未完 !  调用操作系统的命令 isvarname  判断变量名是否有效 声明全局变量   变量名前加 ...

  8. telint---切换当前正在运行的Linux系统的运行等级

    telint命令用于切换当前正在运行的Linux系统的运行等级 Send control commands to the init daemon. --help Show this help --no ...

  9. Hive通过查询语句向表中插入数据过程中发现的坑

    前言 近期在学习使用Hive(版本号0.13.1)的过程中,发现了一些坑,它们也许是Hive提倡的比关系数据库更加自由的体现(同一时候引来一些问题).也许是一些bug.总而言之,这些都须要使用Hive ...

  10. js20---接口3种方式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...