html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机app通用模板蓝色系用户登录页面</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="aui-flexView">
<header class="aui-navBar aui-navBar-fixed">
<a href="javascript:;" class="aui-navBar-item">
<i class="icon icon-return"></i>
</a>
<div class="aui-center">
<span class="aui-center-title"></span>
</div>
<a href="javascript:;" class="aui-navBar-item" >
<i class="icon icon-sys"></i>
</a>
</header>
<section class="aui-scrollView">
<div class="aui-sign-head">
<img src="images/head.png" alt="">
</div>
<div class="aui-sign-form">
<form action="">
<div class="aui-flex">
<i class="icon icon-phone"></i>
<div class="aui-flex-box">
<input type="text" id="phone1" autocomplete="off" placeholder="输入手机号码">
</div>
</div>
<div class="aui-flex">
<i class="icon icon-code"></i>
<div class="aui-flex-box">
<input type="text" id="code1" autocomplete="off" placeholder="输入验证码">
</div>
<div class="aui-code">
<input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onClick="sendMessage1()" />
</div>
</div>
<button class="aui-sign-login" onClick="binding()">立即登录</button>
<div class="aui-flex aui-flex-clear">
<div class="aui-flex-box">
<a href="javascript:;">手机注册</a>
</div>
<div class="aui-links">
<a href="javascript:;">忘记密码</a>
</div>
</div>
</form>
</div>
</section>
</section>
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
var count = 60;
var InterValObj1;
var curCount1;
function sendMessage1() {
curCount1 = count;
var phone = $.trim($('#phone1').val());
if (!phoneReg.test(phone))
{
alert(" 请输入有效的手机号码");
return false;
}
$("#btnSendCode1").attr("disabled", "true");
$("#btnSendCode1").val( + curCount1 + "秒再获取");
InterValObj1 = window.setInterval(SetRemainTime1, 1000);
}
function SetRemainTime1() {
if (curCount1 == 0) {
window.clearInterval(InterValObj1); $("#btnSendCode1").removeAttr("disabled");
$("#btnSendCode1").val("重新发送");
}else {
curCount1--;
$("#btnSendCode1").val( + curCount1 + "秒再获取");
}
}
function binding()
{
alert('请输入手机号码')
}
</script>
css/style.css
html,body { color: #333; margin: 0; height: 100%; font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: normal;}* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}a { text-decoration: none; color: #000;}a, label, button, input, select { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}img { border: 0;}body { background: #ededed; color: #666;}html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0;}a { text-decoration: none; color: #08acee;}button { outline: 0;}img { border: 0;}button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none;}li { list-style: none;}a { color: #666;}.clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}.clearfix {}.divHeight { width: 100%; height: 10px; background: #f5f5f5; position: relative; overflow: hidden;}.r-line { position: relative;}.r-line:after { content: ''; position: absolute; z-index: 0; top: 0; right: 0; height: 100%; border-right: 1px solid #D9D9D9; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); -webkit-transform-origin: 100% 0; transform-origin: 100% 0;}.b-line { position: relative;}.b-line:after { content: ''; position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; height: 1px; border-bottom: 1px solid #e2e2e2; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 100%; transform-origin: 0 100%;}.aui-flex { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 15px; position: relative;}.aui-flex-box { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; font-size: 14px; color: #333;}/* å¿…è¦å¸ƒå±€æ ·å¼css */.aui-flexView { width: 100%; height: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}.aui-scrollView { width: 100%; height: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; margin-top:-44px;}.aui-navBar { height: 44px; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; z-index: 102; background:none;}.aui-navBar-item { height: 44px; min-width: 25%; -webkit-box-flex: 0; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; padding: 0 0.9rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 0.7rem; white-space: nowrap; overflow: hidden; color: #808080; position: relative;}.aui-navBar-item:first-child { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-right: -25%; font-size: 0.9rem; font-weight: bold;}.aui-navBar-item:last-child { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}.aui-center { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 44px; width: 50%; margin-left: 25%;}.aui-center-title { text-align: center; width: 100%; white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; font-size: 0.95rem; color: #333;}.icon { width: 20px; height: 20px; display: block; border: none; float: left; background-size: 20px; background-repeat: no-repeat;}.icon-return{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAABl0lEQVRoQ+3bsU0EMRAF0D9dUAYUALqrBEogI4WMDK4CWqIEMlIQ5IMs3UontHu7uvHMfHvP+Vp+HtvBt1ewsiYr8+IMZqu4qm4A3O7HtRORd8sYqSusqncA3v4BryxoWvAEttifROTx1CpTgo9g+wPPYL8BXIrIRxcVXoDdWPZvmSSaJR2BpQFHYSnAkdh0cDQ2FZyBTQNnYVPAmdhwcDY2FMyADQOzYEPATFh3MBvWFcyIdQOzYl3AzNjqYHZsVXAL2GrgVrBVwKr6DOBhImMqGZQ5ljk1vxr7zhTxqOo9gJdWsOYKq+ongIsR8C+Aa2vgVrOyQ1/WCk+BfwDc9Ag+tqS/AGzZ0KYKl2Uyc2jRoc3gPXrs0mvYNlToKuCW0NXAraCrgltAVwezo13AzGg3MCvaFcyIdgezoUPATOgwMAs6FMyADgdno1PAmeg0cBY6FZyBTgdHoynAkWgacBSaCrwQXd5L9/G4dAjBVvV8eAG6vwfiM+g+fwE4QJefPEoMXNqrNdinO7Q87pMO+zyDvWc4u/8/z3E8TObMpTAAAAAASUVORK5CYII=');}.m-slider { overflow-x: hidden; width: 100%; position: relative;}.slider-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); position: relative; z-index: 1; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform;}.slider-item { width: 100%; height: 100%; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; background: #f6f6f6;}.slider-item img { width: 100%; height: auto; display: block; border: none;}.slider-pagination { text-align: right; position: absolute; width: 100%; z-index: 2; right: 0; bottom: 10px; pointer-events: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}.slider-pagination >.slider-pagination-item { margin: 0 .25rem; width: 8px; height: 8px; display: inline-block; border-radius: 100%; background-color: rgba(255,255,255,0.4);}.slider-pagination >.slider-pagination-item.slider-pagination-item-active { background-color: #fff; border-radius: 100%;}.aui-palace { padding: 0.5rem 0; position: relative; overflow: hidden;}.aui-palace-grid { position: relative; float: left; padding: 1px; width: 20%; box-sizing: border-box; margin: 5px 0;}.aui-palace-grid-icon { width: 30px; height: 30px; margin: 0 auto;}.aui-palace-grid-icon img { display: block; width: 100%; height: 100%; border: none;}.aui-palace-grid-text { display: block; text-align: center; color: #333; font-size: 0.85rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 0.2rem;}.aui-palace-grid-text h2 { font-size: 0.8rem; font-weight: normal; color: #666666;}.m-actionsheet { text-align: center; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; background-color: #EFEFF4; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s;}.mask-black { background-color: rgba(0, 0, 0, 0.4); position: fixed; z-index: 500; bottom: 0; right: 0; left: 0; top: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 998;}.actionsheet-action { display: block; margin-top: .15rem; font-size: 0.28rem; color: #555; height: 1rem; line-height: 1rem; background-color: #FFF;}.m-actionsheet { text-align: center; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 10005; background-color: #ffffff; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s;}.actionsheet-toggle { -webkit-transform: translate(0, 0); transform: translate(0, 0);}.actionsheet-item { display: block; position: relative; font-size: 0.85rem; color: #555; height: 2rem; line-height: 2rem; background-color: #FFF;}.actionsheet-item { display: block; position: relative; font-size: 0.85rem; color: #555; height: 2rem; line-height: 2rem; background-color: #FFF;}.aui-coll-cancel a { height: 45px; line-height: 45px; font-size: 12px; background: #f9f9f9; display: block; text-align: center; width: 100%;}.aui-coll-share-img { width: 38px; height: 38px; margin: 0 auto;}.aui-coll-share-img img { width: 100%; height: auto; display: block; border: none;}.aui-coll-share-box { position: relative; overflow: hidden; padding: 10px 0;}.aui-coll-cancel a { height: 45px; line-height: 45px; font-size: 12px; background: #f9f9f9; display: block; text-align: center; width: 100%;}.aui-coll-share-item { position: relative; float: left; padding: 8px 10px; width: 33.333%; box-sizing: border-box; font-size: 12px; height: 85px;}.aui-rule { position: absolute; right: 0; top: 1rem; background: #54ca9a; border-radius: 50px 0 0 50px; font-size: 0.8rem; padding: 0.2rem 0.6rem; color: #fff;}.aui-sign-head{ width:100%; position:relative; height:auto;}.aui-sign-head img{ width:100%; height:auto; display:block; border:none;}.aui-sign-form{ width:92%; background-color:white; box-shadow:0 3px 9px #cfcfcf; border-radius:5px; margin:-5rem auto; z-index:1; position:relative; padding:1.5rem 1rem;}.aui-sign-form .aui-flex{ border:1px solid #cccccc; border-radius:2px; margin:1.2rem 0; padding:0.2rem 0 0.2rem 0.3rem;}.aui-sign-form .aui-flex input{ width:100%; height:2rem; line-height:2rem; background:none; border:none; font-size:0.89rem;}.aui-sign-login{ width:100%; color:#fff; font-size:0.98rem; border-radius:22px; background-color:#5f8cd0; border:none; height:2.5rem; line-height:2.5rem;}.aui-code{ padding-right:1rem;}.aui-sign-form .aui-code input{ color:#999999; font-size:0.85rem;}.icon-phone{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACPUlEQVRoQ+1bwVHDMBC8kyd50wEpAT9iKS9CBdABLYQKCBUAFUAHQAWEV6x8Ah2EDsI3jxxzAQ8ehsSW0Ag8Pv08vtN5dXdrOVkhtGxgy/DCTsDT6bSnlDoEgF7MhSGipVLqKcuy59BxtwK21p4DwDh0QJf5EPEqy7IzF58q2x8BW2tPAOCuyjnS/QutdbCF3wZ4AgBcyjwulFJ8HW0QUY+IboqAWutgXLMNMHEwIno1xkTt3wKktfYWAE75GhHTUP28EzAAPGmth9FSWwpkreUyZh4BpdRRv98PUmUCmFfUWrspaclwxNqWkpYe9is3IS0hLXkP+/WOq5ewtLC0a8182AtLC0sLS/v1jquXsLSwtGvNCEt/rZj8AOBXPb/yEtIS0vIrINlaytZStpZ+vePqJSwtLO1aM7K1lK2l/Jnm1zV+XsLSMViaiBaIyNKD6IOIhoi4UR/EVABEB/pTQAH8izRUfS29AUBwNVyd52XpEiLuxy5pUfHUyQ7bzGazjbCt0+m8pGm6rOtX2DXmtTSfz/dWq9UjABzwwzPTE9HRYDBYuIBuDOA8z0eIeFkGR0QPxhjWb9YeTQJ8j4jH3wA7SxibBLhdGebM5nlezvJLt9sduhJXYzJclDKr6ZMk2fNVwf4V4GetdVqbaQIaxpYPlwXiY0QMIt2tux7r9fqA5f+FfQyBeLuOAPDKlnuobmZC2xHRtTFmFHLeymM8SZIMeSMfMmjVXJ/HeCa+hLdr/mCHJ6pA/Jf7rQP8Dlj5U1t0e2xbAAAAAElFTkSuQmCC');}.icon-code{ background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFH0lEQVRoQ+2aTVbbSBCAqxqevJzcIOQEgQVusRrmBBNOMHCCwAmAE4ScIPYJAicYs0IyC+AEcW4AS/668kqvm9fIkrpkS3Zw3Dtbbbm+rp/uqi6EP2zgH8YLS+BF1/hcNJwkyTde2DiO92a9wDMFvrq6end/f/8FEXcZlIh6nU7nYGNj43ZW4DMDvry83DbGfAGAdR+OiEYrKyt7m5ubg1lAtw58cXGxhoiHTqsVUKfGmIOtra1Rm+CtAFvT/RsA9hFxuwDg2H53mH9GRANE7EVRdNaGqTcCbLX4ERHXiWi7BJLZzhFxv9vtXvOH4XDI808AgBdnbFj4ARFdE9FNE9oXAQ+Hw11jzH95iSrA8lPPlVJHZX6apukntoYy8CIryH+nlOp3u91eyB1EwGmaHgHAmPlVvZyIfgLAqVKq5zQaEoY1bozhCP4JEd+H5ueeH2utWc7K0STwDUdcABgopQZSyDLpLDz7P7vIGgB8DLC0Btxnrbk/f3p6GjXhWyHN8HOOFaurqwyfDWsNztVaAxa9WAIw7Zycq4nkmsSkRS+eFkby+yVwS0FrqWGJ+bUxZ2nSi2LSXgJyprU+ddaycBrmJOTh4eEzAGQnKD69xXH8sg8vFDDnz8/Pz9/sKYt5b6Io2vYzqIUAZq0+Pj4eEhEnE26MwfKDNw9sz8/fPa0WanYhfJhTUCLiEtC7kGbfPDBXMQtKQIVm7O/nb86kbRT+v6Cw97PT6ayHSjxzB2aAkJBOQyX+yo/vuJIiyafnCuzMkqNrHMdfq46StpbFmvX9NfuJUuofacl2LsAlZnkaRdFekbZLglMGi4h7krrUXINWWb2Lyz1KqR3fNC1sds1SMPpa6+xGQjrmomEWLkkSrj/zljI2nIkHYIMRuejdcwNmYQJAXId+dcXiAYiDVB56rsAsjL0/4mzmL6lZEtFBHMdcjK89ZgJMRF/jOPbPua8EtRGYL8Yk0Oda66KrGBF8mqZcPW2+apkz16CQnL8qpVjTVbXkO2PM+jQl3jRNeWGzaxpphBdVLa2p8r7JOekojuMPIRXY7YoFKoOeujaWJMkPl2hI928RMMOlaUoO0hjzQaIZC83++epeKp/Ihxav6Lm1oh/umdZaxCKaZIFfzAcAamkn52v8uh2/VDMJcC5gBd3M/YcY2N9rpWbtg3i/FwtXtRC+OUv9N/N16epa8+TLsiz6TrKdcPBDxJH0rFwmW067d1EUrUmTFjGwNWv/2vTWGLMh8WXpokrmWd+98hKPWu5VCzivZQC41lpvSARtak6apgzrTm21tFvLpJ3A9rb+u/vMrUez6rcqqIzUDn61NOxB+yecrN+qbegC2NrZ1UQa9qA5IXg5VLTVZGbdiFNK7gNx40ZrXZaMVHrPRBrmN5acpK6NMTtNBTJ7LmdYH26iVLL2Ply0bLYfq4eI/3rPb4noKFTmCQWxJEk+IyLvCn4ZqB9F0b50Cyr6j4k1nDtUnCAi3wG9DO6xUkodSIpx/u9scY/7MfNZVK3tp2xBGwG2ezT7GAezV2kh+zYRHYfMvKJF8Q4Adqc9ijZi0vlVLDHxbFoZeFUvJhGddTqd3WlMOC9jYxr2X2zTSfa/sZZCNnUAcBWOsl7Mys69kP9XPW8F2P2hbVk8knbVcdrILYp1SrV14VsF9sHt9WdZMYCbTrlFMdgrWRdwJiZdJpTdV7ke5goCfUQ8qRvJp4GeiYaLght/12Qwki7CXIClwrUxbwncxqr+Tu/8Bf4pg2orHmZMAAAAAElFTkSuQmCC');}.aui-sign-form .aui-flex-clear{ border:none;}.aui-sign-form .aui-flex-clear a{ color:#999999; font-size:0.85rem;}
1015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
