<!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>
