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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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开发中常用的8个小技巧
2008/08/27 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
flash用php连接数据库的代码
2011/04/21 PHP
php获取参数的几种方法总结
2014/02/18 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python生成数字图片代码分享
2017/10/31 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
python逆序打印各位数字的方法
2018/06/25 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
英国网上花店:Bunches
2016/11/29 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
运动会邀请函范文
2014/01/31 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
小学开学典礼主持词
2014/03/19 职场文书