1

学前端也有一段时间，整一个最常用的登录注册页面。认为后面往里面加form，用action能接下来servlet处理数据。不过这个就是一个页面而已。

2

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <div class="form-box">
            <div class="regester-box hidden">
                <h1>register</h1>
                <input type="text" placeholder="用户名">
                <input type="email" placeholder="邮箱">
                <input type="password" placeholder="密码">
                <input type="password" placeholder="确认密码">
                <button>注册</button>
            </div>
            <div class="login-box">
                <h1>login</h1>
                <input type="text" placeholder="用户名">
                <input type="password" placeholder="密码">
                <button>登录</button>
            </div>

        </div>



        <div class="con-box left">
            <h2>欢迎来到<span>aaa</span></h2>
            <p>快来看看你的<span>abc</span></p>
            <img src="./pic/pic1.jpg" alt="">
            <p>
                没有账号？
            </p>
            <button id="regester">去注册→</button>
        </div>

        <div class="con-box right">
            <h2>欢迎来到<span>aaa</span></h2>
            <p>快来领取你的<span>abc</span></p>
            <img src="./pic/pic2.jpg" alt="">
            <p>
                已有账号？
            </p>
            <button id="login">去登录→</button>
        </div>
    </div>
    <script>
        let login = document.getElementById("login");
        let regester = document.getElementById('regester');
        let form_box = document.getElementsByClassName("form-box")[0];
        let login_box = document.getElementsByClassName("login-box")[0];
        let regester_box = document.getElementsByClassName("regester-box")[0];

        login.addEventListener('click', function () {
            form_box.style.transform = 'translateX(80%)';
            login_box.classList.toggle('hidden');
            regester_box.classList.toggle('hidden');
        });


        regester.addEventListener('click', function () {
            form_box.style.transform = 'translateX(0)';
            login_box.classList.toggle('hidden');
            regester_box.classList.toggle('hidden');
        });
    </script>
</body>

</html>

3

* {
    /* 初始化 */
    margin: 0;
    padding: 0;

}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #f3e7e9, #e3eeff);

}
.container {
    background-color: #fff;
    width: 650px;
    height: 415px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
    position: relative;
}

.form-box {
    position: absolute;
    top: -10%;
    left: 5%;
    background-color: #b3d7d8;
    width: 320px;
    height: 500px;
    border-radius: 5px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    /* 弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* 动画平滑效果 */
    transition: 0.5s ease-in-out;
}


.regester-box, .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.hidden {
    display: none;
    /* transition: 1s; */
}

h1 {
    text-align: center;
    margin-bottom: 25px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 5px;
}

input {
    background-color: transparent;
    width: 70%;
    color: #fff;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding: 10px 0;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing: 2px;
}


input::placeholder {

    color: #fff;
}

input:focus {
    color: #a262ad;
    /* 去除了边框 */
    outline: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.9);
    transition: 0.5s;
}


input:focus::placeholder {
    opacity: 0;
}

.form-box button {
    width: 70%;
    margin-top: 35px;
    background-color: #f6f6f6;
    border: none;
    border-radius: 5px;
    padding: 13px;
    color: #a262ad;
    letter-spacing: 2px;
    cursor: pointer;
}

.form-box button:hover {
    background-color: #a262ad;
    color:#f6f6f6;
    transition: 0.5s;
}

.con-box {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.con-box.left{
    left: 2%;
}

.con-box.right{
    right: 2%;
}

.con-box h2{
    color: #8e9aaf;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 3px;
}

.con-box h2 span {
    color: #d3b7d8;
}
.con-box p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #8e9aaf;
    text-align: center;
}
.con-box img {
    width: 150px;
    height: 150px;
    opacity: 0.9;
    margin: 40px 0;
}

.con-box button{
    margin-top: 10px;
    background-color: #fff;
    color: #a262ad;
    border: 1px solid #d3b7d8;
    padding: 6px 10px;
    border-radius: 5px;
    letter-spacing: 1px;
    outline: none;
    cursor: pointer;
}
.con-box button:hover {
    background-color:#a262ad ;
    color: #fff;
}

4

image-20240117174440545

image-20240117174448291