先上预览图

 

 

login页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" type="text/css" href="change.css" />
    <script src="change.js"></script>
</head>
<body>
<div class="control">
    <div class="item">
        <div class="active">登录</div><div>注册</div>
    </div>
    <div class="content">
        <div style="display: block;">
            <p>账号</p>
            <input type="text" placeholder="username" />
            <p>密码</p>
            <input type="password" placeholder="password"/>
            <br/>
            <input type="submit" value="登录"/>
        </div>
    </div>
</div>
</body>
</html>

register页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <link rel="stylesheet" type="text/css" href="change.css" />
    <script src="change.js"></script>
</head>
<body>
<div class="control">
    <div class="item">
        <div>登录</div><div class="active">注册</div>
    </div>
    <div class="content">
        <div style="display: block;">
            <p>用户名</p>
            <input type="text" placeholder="username" />
            <p>密码</p>
            <input type="password" placeholder="password"/>
            <p>邮箱</p>
            <input type="text" placeholder="email" />
            <br/>
            <input type="submit" value="登录"/>
        </div>
    </div>
</div>
</body>
</html>

CSS代码

*{
    margin: 0;
    padding: 0;
}
body{
    background: #f3f3f3;
}
.control{
    width: 340px;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}
.item{
    width: 340px;
    height: 60px;
    background: #eeeeee;
}
.item div{
    width: 170px;
    height: 60px;
    display: inline-block;
    color: black;
    font-size: 18px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
}
.content{
    width: 100%;
}
.content div{
    margin: 20px 30px;
    display: none;
    text-align: left;
}
p{
    color: #4a4a4a;
    margin-top: 30px;
    margin-bottom: 6px;
    font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{
    width: 100%;
    height: 40px;
    border-radius: 3px;
    border: 1px solid #adadad;
    padding: 0 10px;
    box-sizing: border-box;
}
.content input[type="submit"]{
    margin-top: 40px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    color: white;
    border: 1px solid #adadad;
    background: #00dd60;
    cursor: pointer;
    letter-spacing: 4px;
    margin-bottom: 40px;
}
.active{
    background: white;
}
.item div:hover{
    background: #f6f6f6;
}

js代码

window.onload = function (){
    var item = document.getElementsByClassName("item");
    var it = item[0].getElementsByTagName("div");

    var content = document.getElementsByClassName("content");
    var con = content[0].getElementsByTagName("div");

    for (let i=0;i<it.length;i++){
        it[i].onclick = function(){
            // for(let j=0;j<it.length;j++){
            //     it[j].className = '';
            //     con[j].style.display = 'none'
            // }
            // this.className = "active";
            // it[i].index=i;
            // con[i].style.display = "block";
            switch (i){
                case 0:
                    window.location.href='login.html';
                    break;
                case 1:
                    window.location.href='register.html';
                    break;
                default:
                    break;
            }

        }
    }
}window.onload = function (){
    var item = document.getElementsByClassName("item");
    var it = item[0].getElementsByTagName("div");

    var content = document.getElementsByClassName("content");
    var con = content[0].getElementsByTagName("div");

    for (let i=0;i<it.length;i++){
        it[i].onclick = function(){
            // for(let j=0;j<it.length;j++){
            //     it[j].className = '';
            //     con[j].style.display = 'none'
            // }
            // this.className = "active";
            // it[i].index=i;
            // con[i].style.display = "block";
            switch (i){
                case 0:
                    window.location.href='login.html';
                    break;
                case 1:
                    window.location.href='register.html';
                    break;
                default:
                    break;
            }

        }
    }
}

# html # css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟