<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>register</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/> <style> html,body{ height: 100%; background: #0B212F; /*overflow: hidden;*/ /* position: absolute; top:0; left: 0; bottom:0; right: 0;*/ } html,body,div,p,span,a,label,img,input,button{margin:0;padding:0;} .box{ width: 100%; height: 100%; position: absolute; top:0; left: 0; bottom:0; right: 0; margin: auto; /*background: transparent;*/ } .logo{ width: 50%; height: auto; margin:auto; overflow: hidden; } .logo > img{ width: 100%; height: auto; margin: 3rem auto; } .kid{ width: 70%; height: 29px; padding: 10px 20px; margin: 15px auto; border: solid 1px #ffffff; color: #ffffff; overflow: hidden; border-radius: 5px; } .kid > label{ float: left; width: 25px; height: auto; float: left; overflow: hidden; } .kid > label > img{ width: 18px; height: 24px; } .kid > input{ float: left; outline: none; border: none; background: none; color: #FCFEFF; font-size: 1rem; margin-top: 5px; } ::-webkit-input-placeholder{color: #FCFEFF;font-size: 1rem;} #forTel{ width: 24px; height: 24px; } #register{ width: 70%; padding: 10px 20px; color: #ffffff; display: block; overflow: hidden; height: 29px; border: solid 1px #ffffff ; background: none; text-align: center; border-radius: 5px; margin: 15px auto; font-size: 1rem; line-height: 29px; } </style> </head> <body> <div class="box" id="box"> <div class="logo"> <img src="img/logo.png" alt="logo"/> </div> <div class="information"> <div class="kid"> <label for="account" id="forAcc"> <img src="img/account.png" alt=""/> </label> <input type="text" id="account" placeholder="账户"/> </div> <div class="kid"> <label for="psd" id="forPsd"> <img src="img/block.png" alt=""/> </label> <input type="password" id="psd" placeholder="密码"/> </div> <div class="kid"> <label for="psd" id="forTel"> <img src="img/telphone.png" alt=""/> </label> <input type="tel" id="tel" placeholder="电话"/> </div> <div id="register">注册</div> </div> </div> </body> <script> var register = document.getElementById('register'); register.addEventListener('touchstart',function(){ alert('注册成功!') }); </script> </html>