- 注册
reg.html：
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="reg.aspx.cs" Inherits="Teaching.AUX.WebApp.reg" %> 2 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf-8"> 7 <title>手机号注册</title> 8 <%--<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">--%> 9 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 10 <meta name="apple-mobile-web-app-capable" content="yes"> 11 <meta name="format-detection" content="telephone=no"> 12 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 13 <link rel="stylesheet" href="../css/mui.min.css" /> 14 <link href="css/iconfont.css" rel="stylesheet" /> 15 <link href="css/main.css" rel="stylesheet" /> 16 <link href="css/StyleSheet.css" rel="stylesheet" /> 17 <link href="css/reg.css" rel="stylesheet" /> 18 </head> 19 <body> 20 <header class="mui-bar mui-bar-nav"> 21 <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 22 <h1 class="mui-title">手机号注册</h1> 23 </header> 24 <div class="mui-content"> 25 <form class="mui-input-group"> 26 <div class="mui-input-row"> 27 <label>手机号:</label> 28 <input id=‘account‘ type="text" class="mui-input-clear mui-input" placeholder="请输入手机号"> 29 </div> 30 <div class="mui-input-row mui-password"> 31 <label>密码:</label> 32 <input id=‘password‘ type="password" class="mui-input-password" placeholder="请设置登录密码"> 33 <span class="mui-icon mui-icon-eye"></span> 34 </div> 35 <div class="mui-input-row"> 36 <label>验证码:</label> 37 <button type="button" id=‘btnVerificationCode‘ class="mui-btn mui-btn-outlined">获取验证码</button> 38 <input id=‘VerificationCode‘ type="text" class="mui-input" placeholder="请输入验证码"> 39 </div> 40 </form> 41 <div class="mui-content-padded"> 42 <button id=‘reg‘ class="mui-btn mui-btn-block mui-btn-primary">注册</button> 43 </div> 44 <div class="mui-content-padded"> 45 <p>为了账号安全，设置密码不要少于6位，我们不会泄露你的手机号码，不会收取任何费用！</p> 46 </div> 47 </div> 48 49 <script src="js/mui.min.js"></script> 50 <script src="js/app.js"></script> 51 <script src="js/jquery-1.9.1.min.js"></script> 52 <script> 53 mui.init(); 54 </script> 55 </body> 56 </html>
reg.css
1 .mui-input-group label {width: 26%;padding-top:14px;padding-bottom:14px;text-align:left;}
2
3 .mui-input-row label~input,
4 .mui-input-row label~select,
5 .mui-input-row label~textarea {width: 74%;}
6
7 .mui-input-row .mui-input-clear ~ .mui-icon-clear,
8 .mui-input-row .mui-input-password ~ .mui-icon-eye {right: 15px; }
9 .mui-input-row .mui-input-password ~ .mui-icon-eye{font-size: 22px;top: 12px;}
10
11 .mui-input-row label~#VerificationCode{width: 48%;box-sizing: border-box;}
12 .mui-input-row .mui-btn{width: 26%;box-sizing: border-box;right: 15px;padding: 8px 0px;}
13 .mui-btn-outlined {margin-top: 6px;color: #00B4FF;border: 1px solid #00B4FF; }
StyleSheet.css ：页面共用样式：
1 .area {
2 margin: 20px auto 0px auto;
3 }
4
5 .mui-input-group {
6 margin-top: 10px;
7 background-color: #F5F5F5;
8 }
9
10 .mui-input-group:first-child {
11 margin-top: 20px;
12 }
13
14 .mui-input-group label {
15 /*width: 16%;*/
16 padding-right: 0px;
17 /*text-align:center;*/
18 }
19
20 .mui-input-row label~input,
21 .mui-input-row label~select,
22 .mui-input-row label~textarea {
23 /*width: 84%;*/
24 height:46px;
25 }
26
27 .mui-checkbox input[type=checkbox],
28 .mui-radio input[type=radio] {
29 top: 6px;
30 }
31
32 .mui-content-padded {
33 margin-top: 38px;
34 }
35
36 .mui-btn {
37 padding: 10px;
38 }
39
40 .link-area {
41 display: block;
42 margin-top: 12px;
43 text-align: right;
44 }
45
46 /*.spliter {
47 color: #bbb;
48 padding: 0px 8px;
49 }
50
51 .oauth-area {
52 position: absolute;
53 bottom: 20px;
54 left: 0px;
55 text-align: center;
56 width: 100%;
57 padding: 0px;
58 margin: 0px;
59 }
60
61 .oauth-area .oauth-btn {
62 display: inline-block;
63 width: 50px;
64 height: 50px;
65 background-size: 30px 30px;
66 background-position: center center;
67 background-repeat: no-repeat;
68 margin: 0px 20px;
69 border: solid 1px #ddd;
70 border-radius: 25px;
71 }
72
73 .oauth-area .oauth-btn:active {
74 border: solid 1px #aaa;
75 }
76
77 .oauth-area .oauth-btn.disabled {
78 background-color: #ddd;
79 }*/
80
81 .mui-icon{ font-size:24px;}
82 .iconfont {font-size: 17px;}
83 .mui-input-group .mui-input-row {height: 46px;}
84 .mui-input-group .mui-input-row:after {right: 15px;}
85 .mui-input-group:after,.mui-input-group:before{background-color: transparent;}
86 .mui-input-group:first-child {margin-top: 10px; }
87 .mui-bar-nav {box-shadow: 0 1px 0px #00B4FF;}
88 .mui-bar {height: 48px;}
89 .mui-bar .mui-icon {padding-top: 12px;padding-bottom: 12px;}
90 .mui-title {line-height: 48px;font-size: 18px;}
91 .mui-bar-nav ~ .mui-content {padding-top: 48px;}
92 body {background:#F5F5F5; }
- 登录
login.html
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="Teaching.AUX.WebApp.login" %> 2 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf-8"> 7 <title>登录</title> 8 <%--<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">--%> 9 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 10 <meta name="apple-mobile-web-app-capable" content="yes"> 11 <meta name="format-detection" content="telephone=no"> 12 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 13 <link rel="stylesheet" href="../css/mui.min.css" /> 14 <link href="css/iconfont.css" rel="stylesheet" /> 15 <link href="css/main.css" rel="stylesheet" /> 16 <link href="css/StyleSheet.css" rel="stylesheet" /> 17 <link href="css/login.css" rel="stylesheet" /> 18 </head> 19 <body> 20 <header class="mui-bar mui-bar-nav"> 21 <a href="###" class="mui-icon mui-icon-back mui-pull-left"></a> 22 <h1 class="mui-title">登录</h1> 23 </header> 24 <div class="mui-content"> 25 <form id=‘login-form‘ class="mui-input-group"> 26 <div class="mui-input-row"> 27 <label><span class="mui-icon iconfont icon-wode"></span></label> 28 <input id=‘account‘ type="text" class="mui-input-clear mui-input" placeholder="手机号/邮箱地址"> 29 </div> 30 <div class="mui-input-row"> 31 <label><span class="mui-icon mui-icon-locked"></span></label> 32 <input id=‘password‘ type="password" class="mui-input-clear mui-input" placeholder="密码"> 33 </div> 34 </form> 35 <div class="mui-content-padded"> 36 <button id=‘login‘ class="mui-btn mui-btn-block mui-btn-primary">登录</button> 37 <div class="link-area"><a id=‘forgetPassword‘>忘记密码？</a> 38 </div> 39 </div> 40 <div class="mui-content-padded oauth-area"> 41 42 </div> 43 </div> 44 45 <script src="js/mui.min.js"></script> 46 <script src="js/mui.enterfocus.js"></script> 47 <script src="js/app.js"></script> 48 <script src="js/jquery-1.9.1.min.js"></script> 49 <script> 50 mui.init(); 51 </script> 52 </body> 53 </html>
login.css
1 .mui-input-group label {
2 width: 16%;
3 text-align:center;
4 color:#929292;
5 }
6
7 .mui-input-row label~input,
8 .mui-input-row label~select,
9 .mui-input-row label~textarea {width: 84%;}
10
时间： 2024-08-07 17:00:37