amazeui页面分析之登录页面

一、总结

1、tpl命名空间：tpl命名空间的样式都是从app.css里面来的，app.css用用来移动网站开发的样式
2、表单样式：am-form到am-form-group的形式
二、登录页面

截图：
代码：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <title>Amaze UI Admin index Examples</title>
 8     <meta name="description" content="这是一个 index 页面">
 9     <meta name="keywords" content="index">
10     <meta name="viewport" content="width=device-width, initial-scale=1">
11     <meta name="renderer" content="webkit">
12     <meta http-equiv="Cache-Control" content="no-siteapp" />
13     <link rel="icon" type="image/png" href="assets/i/favicon.png">
14     <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
15     <meta name="apple-mobile-web-app-title" content="Amaze UI" />
16     <link rel="stylesheet" href="assets/css/amazeui.min.css" />
17     <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
18     <link rel="stylesheet" href="assets/css/app.css">
19     <script src="assets/js/jquery.min.js"></script>
20 
21 </head>
22 
23 <body data-type="login">
24     <script src="assets/js/theme.js"></script>
25     <div class="am-g tpl-g">
26         <!-- 风格切换 -->
27         <div class="tpl-skiner">
28             <div class="tpl-skiner-toggle am-icon-cog">
29             </div>
30             <div class="tpl-skiner-content">
31                 <div class="tpl-skiner-content-title">
32                     选择主题
33                 </div>
34                 <div class="tpl-skiner-content-bar">
35                     <span class="skiner-color skiner-white" data-color="theme-white"></span>
36                     <span class="skiner-color skiner-black" data-color="theme-black"></span>
37                 </div>
38             </div>
39         </div>
40         <div class="tpl-login">
41             <div class="tpl-login-content">
42                 <div class="tpl-login-logo">
43 
44                 </div>
45 
46 
47 
48                 <form class="am-form tpl-form-line-form">
49                     <div class="am-form-group">
50                         <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入账号">
51 
52                     </div>
53 
54                     <div class="am-form-group">
55                         <input type="password" class="tpl-form-input" id="user-name" placeholder="请输入密码">
56 
57                     </div>
58                     <div class="am-form-group tpl-login-remember-me">
59                         <input id="remember-me" type="checkbox">
60                         <label for="remember-me">
61        
62                         记住密码
63                          </label>
64 
65                     </div>
66 
67 
68 
69 
70 
71 
72                     <div class="am-form-group">
73 
74                         <button type="button" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">提交</button>
75 
76                     </div>
77                 </form>
78             </div>
79         </div>
80     </div>
81     <script src="assets/js/amazeui.min.js"></script>
82     <script src="assets/js/app.js"></script>
83 
84 </body>
85 
86 </html>