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. 51nod 最大子矩阵和

    一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值. 我们可以降维,枚举矩形的长,然后算出一个一维数组,然后就转化成了最大字段和问题 #include< ...

  2. [Python] Understand List Comprehensions in Python

    List comprehensions provide a concise way to create new lists, where each item is the result of an o ...

  3. Python标准库：内置函数all(iterable)

    假设可迭代的对象的所有元素所有非空(或者空迭代对象),就返回True.这个函数主要用来推断列表.元组.字典等对象是否有空元素.比方有10000个元素的列表,假设没有提供此函数,须要使用循环来实现.那么 ...

  4. view-activity跟控件在onkey事件上的传递关系

    android 中Activity跟View对于键盘的监听,主要有以下几个方法 //按键按下 public boolean onKeyDown(int keyCode, KeyEvent event) ...

  5. js -- img 随着鼠标滚轮的变化变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Vue项目自动转换 px 为 rem，高保真还原设计图

    技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通 ...

  7. AC自动机 hdu2222

    #include <iostream> using namespace std; struct Node{ Node *next[]; Node* fail; int count; Nod ...

  8. vs2010 Visula C++ 把CString 转换为string 类型

    CString strSomeCstring ("This is a CString Object"); // Use ANSI variant CStringA to conve ...

  9. ES6第二节：新的声明方式

    通过上一节的环境搭建完成,接下来我们就可以愉快的探索ES6的新世界了!下面我们从新的声明方式开始: 在ES6里新加了两种声明方式:let 和 const,以前我们都是用var去作声明,接下来我们一一比 ...

  10. PatentTips - Transparent unification of virtual machines

    BACKGROUND Virtualization technology enables a single host computer running a virtual machine monito ...