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. 什么是PV和UV?

    技术角度 1个PV是指从浏览器发出一个对网络server的Request,网络server接到Request之后.会開始把该Request相应的一个Page(Page就是一个网页)发送到client的 ...

  2. 将Firefox设置为使用远程DNS

    将Firefox设置为使用远程DNS 原文 https://www.my-proxy.com/blog/firefox-remote-dns 测试当前在用DNS              https: ...

  3. js插件---评分插件Rating如何使用

    js插件---评分插件Rating如何使用 一.总结 一句话总结:form下的input和a标签,input记录值,a标签显示样式 12 <form data-am-rating> 13 ...

  4. js实现删除确认提示框

    js实现删除确认提示框 一.实例描述 防止用户小心单击了“删除”按钮,在用户单击“删除”按钮后,给出一个提示,让用户确认此次操作是否正确. 二.效果 三.代码 <!DOCTYPE html> ...

  5. CentOS 7.0yum安装MySQL

    CentOS 7.0yum安装MySQL 1.下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noar ...

  6. 56.ERR! configure error gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.

    Node.js 在安装模块的时候报错,缺少python环境. ERR! configure error gyp ERR! stack Error: Can't find Python executab ...

  7. 网上看到的一些IT资源

    A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板. Bootswatch:免费的Bootstrap主题. Templated:收集了845个免费的C ...

  8. jquery实现瀑布流效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Codefroces Educational Round 26 837 B. Flag of Berland

    B. Flag of Berland time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  10. groupadd---创建一个新的工作组

    groupadd命令   groupadd命令用于创建一个新的工作组,新工作组的信息将被添加到系统文件中. 语法 groupadd(选项)(参数) 选项 -g:指定新建工作组的id: -r:创建系统工 ...