移动端的注册页面 

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

 

posted on 2017-07-14 15:03  轻触快乐  阅读(172)  评论(0)    收藏  举报

导航