简单注册页面

最新推荐文章于 2022-12-10 00:25:10 发布

Bessry

最新推荐文章于 2022-12-10 00:25:10 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/fsw930924/article/details/53535876

版权

<!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" οnclick="phone()">手机注册</span>
        <span class="span2" οnclick="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>