html

手机app通用模板蓝色系用户登录页面

css css3 html 手机app通用模板蓝色系用户登录页面 第1张

手机注册

忘记密码

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;}

images/head.png

推荐链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：