简单注册页面

来源：互联网发布：历史上真实的和珅知乎编辑：程序博客网时间：2024/05/28 04:52
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>register</title>    <style>        .div{            width: 300px;            height: 250px;            background-color: #fbfff4;            margin: 0px auto;            position: relative;        }        .div span{            position: absolute;            background-color: gray;            text-align: center;            width: 49.9%;            height: 40px;            line-height: 40px;            cursor:pointer;        }        .div span:first-child {            left: 0px;        }        .div span:first-child +span{            right: 0px;        }        .div2{            position: absolute;            width: 100%;            height: 200px;            top: 50px;        }        .lab{            font-weight: 600;            color: #94ffaf;            margin-left: 15px;            margin-top: 20px;        }        a{            color: black;        }        .he{            text-align: center;            font-weight: bolder;            font-size: 20px;            color: pink;            margin-left: 100px;            padding-top: 200px;        }        p{            margin: 100px 80px;            color: red;            font-size: 20px;            font-weight: bolder;        }    </style></head><body>    <div class="div">        <span class="span1" onclick="phone()">手机注册</span>        <span class="span2" onclick="email()">邮箱注册</span>        <div class="div2">            <p>选择注册类型</p>            <!--<lable class="lab">手机号码</lable>-->            <!--<input type="text" value="" class="lab">-->            <!--<lable class="lab">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</lable>-->            <!--<input type="text" value="" class="lab">-->            <!--<lable class="lab">验&nbsp;&nbsp;证&nbsp;码</lable>-->            <!--<input type="text" value="" class="lab">-->            <!--<input type="submit" value="提交" class="lab" style="color: black">-->        </div>    </div>    <script>        var ospan1 = document.getElementsByClassName("span1")[0];        var ospan2 = document.getElementsByClassName("span2")[0];        var odiv2 = document.getElementsByClassName("div2")[0];        function phone() {            ospan1.style.backgroundColor = "#fffc9b";            ospan2.style.backgroundColor = "gray";            odiv2.innerHTML = "<lable class='lab'>手机号码</lable>"+                "<input type='text' class='lab'>"+                "<lable class='lab'>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</lable>"+                "<input type='text' class='lab'>"+                "<lable class='lab'>验&nbsp;&nbsp;证&nbsp;&nbsp;码</lable>"+                "<input type='text' class='lab'>"+                "<input type='submit' value='提交' class='lab' style='color: black'>";        }        function email() {            ospan1.style.backgroundColor = "gray";            ospan2.style.backgroundColor = "#fffc9b";            odiv2.innerHTML = "<lable class='lab'>邮箱账号</lable>"+                "<input type='text' class='lab'>"+                "<lable class='lab'>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</lable>"+                "<input type='text' class='lab'>"+                "<input type='submit' value='提交' class='lab' style='color: black'>";        }    </script></body></html>
0 0