amazeui页面分析之登录页面的示例代码


Posted in HTML / CSS onAugust 25, 2020

一、总结

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

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

二、登录页面

截图:

amazeui页面分析之登录页面的示例代码

代码:

<!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页面分析之登录页面的示例代码的文章就介绍到这了,更多相关amazeui登录页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 #HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 #HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 #HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 #HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 #HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 #HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 #HTML / CSS
You might like
PHP中的日期及时间
2006/11/23 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
序列化Python对象的方法
2020/08/01 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
测绘工程个人的自我评价
2013/11/10 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
百日安全活动总结
2014/05/04 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
教师工作失职检讨书
2014/09/18 职场文书
保外就医申请书范文
2015/08/06 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python