注册+登录二合一页面模板

没啥好讲的很简单复制粘贴用就是了,至于默认颜色css里有注释,自己去取色器选好想要的颜色进行修改,取色器百度一大堆,实在找不到去群里问JavaScript工程尸

html部分

<!-- 页面背景图,可自己去网上寻找,也可直接删除这个img -->
<img src="https://i.loli.net/2021/08/09/gN4wO9zHkiZTWos.jpg" id="bodybox">
<div id="login">
<form action="/login_register/" method="GET" >
    <input type="hidden" name="login" value="login"><!--隐藏,用于区分注册还是登陆提交-->
    <p class="small">账号</p><input  name="username" class="sr"><br/>
    <p class="small">密码</p><input  name="password" class="sr" type="password"><br/>
    <input name="submit" type="submit" title="确定登陆" value="登陆" class="btn"/>
</form>
<a onclick="tab()" class="tab">没有账号?去注册→</a>
</div>
<div id="reg">
<form action="/login_register/" method="GET">
    <input type="hidden" name="register" value="register"><!--隐藏,用于区分注册还是登陆提交-->
    <p class="small">账号</p><input  name="username_1" class="sr"><br/>
    <p class="small">密码</p><input  name="password_1" class="sr" type="password"><br/>
    <p class="small">确认密码</p><input  name="password_2" class="sr" type="password"><br/>
    <p class="small">手机号</p><input  name="number_1" class="sr"><br/>
    <p class="small">安全码(用于找回密码等,切勿遗忘)</p><input  name="security_1" class="sr"><br/>
    <input name="submit" type="submit" title="确定注册" value="确定注册" class="btn"/><br/>
</form>
</div>
<a href="/index/" class="returnMain">返回首页</a>
<!-- 为了生态不用管  欺骗浏览器的代码 -->
    <input type="text" style="display: none;">
    <input type="password" style="display: none;">
<!-- 为了生态不用管  欺骗浏览器的代码 -->

css部分

*{
    padding: 0;
    margin: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
form{
    width: 100%;
}
.sr{
    margin-top: 5px;
    text-indent: 2px;
    outline:none;
    font-size: 20px;
    background-color: #b9eee6f2; /*输入框的背景颜色*/
    border:5px solid #42e6ce; /*输入框的左侧边框颜色,前面那个5px是宽度,根据自己需求来定*/
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style:solid;
    width: 90%;
    color: #ffffff; /*在输入框里输入的内容颜色*/
}
.small{
    font-weight: bold;
    font-size: 15px;
    color: #42e6ce;
}
.btn{
    display: inline-block;
    border-radius: 2px;
    color: white; /* 按钮的字体颜色 */
    background-color: #42E6CE; /* 按钮的背景颜色 */
    width: 60px;
    height: 30px;
    border: none;
    margin-top: 10px;
}
.tab{
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: 14px;
    color: dodgerblue; /* 登录框右下角的字体颜色 */
}
.returnMain{
    /* 页面左上角那个返回首页的样式 */
    font-size: 14px;
    display: inline-block;
    padding: 0 4px 0 4px;
    width: auto;
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    color: white; /* 字体颜色 */
    background-color: dodgerblue; /* 背景颜色 */
    border-radius: 0 0 10px 0; /* 边框圆角不需要可删除 */
}
#bodybox{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color:#121415;
    object-fit:cover;
    }

#login{
    background-color: white; /* 登录框的背景颜色 */
    box-shadow: 1px 1px 5px black;
    border-radius: 4px;
    position: absolute;
    width: 80%;
    height: 200px;
    left: 10%;
    top: 30%;
    text-align: center;
    display: flex;
    align-items: center;
}

#reg{
    background-color: white; /* 注册框的背景颜色 */
    box-shadow: 1px 1px 5px black;
    border-radius: 4px;
    position: absolute;
    width: 80%;
    height: 300px;
    left: 10%;
    top: 30%;
    text-align: center;
    display: none;
    align-items: center;
}
@media screen and (min-width: 700px) {
    #login{
        width: 46%;
        left: 27%;
        height: 250px;
    }
}

script(JavaScript)部分

var tab = function(){
    if(document.getElementById("reg").style.display == ""){
        document.getElementById("login").style.display="none";
        document.getElementById("reg").style.display="flex";
    }
}