HTML，CSS注册页面

最新推荐文章于 2023-02-17 11:51:14 发布

神秘的博主

最新推荐文章于 2023-02-17 11:51:14 发布

阅读量230

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_62701594/article/details/127690049

版权

学前端已经有一段时间了，也从刚开始的不理解以及只是比葫芦画瓢变得开始有自己的想法，逐渐理解，逐渐主动。

就先说HTML与CSS吧！给我的感觉是，HTML给出要有的内容，而CSS就进行装饰，进行设计。刚开始写的时候我是选择写在一个文件里，不过确实也可以，用上<style>,不过发现，当东西多的时候，这样就比较麻烦，写的东西也不好找。现在就是把它们分开在两个文件里。

当然，要想装饰，当然也要一一对应，分先后，就像装修房子一样，不可能一步到位，总有要先做这个，先做那个。我比较喜欢的方式是一次解决一部分，同时，也有很多工作都是类似的，如果发现的话，会省很多力，不同的内容要有不同的工具，但最终要什么就给什么，比如要让图片居中，就对图片进行局中的操作，从效果出发去找所需要做的，而不是从毫无头绪的那一边出发。

接下来分享一下我的注册页面（非完全原创，有参考）。泡泡是动态的，

代码块如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <div class="box">
        <h2>Login</h2>
        <div class="input-box">
            <label>账号</label>
            <input type="text"/>
        </div>
        <div class="input-box">
            <label>密码</label>
            <input type="password"/>
        </div>
        <div class="btn-box">
            <a href="#">忘记密码？</a>
            <div>
                <button>登录</button>
                <button>注册</button>
            </div>
        </div>
        <div class="wrap">
            
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    
</body>
</html>

CSS

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    background: url(bg.jpg) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    width: 350px;
    height: 350px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    background: rgba(50,50,50,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.box > h2 {
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;
}

.box .input-box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.box .input-box label {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 5px;
}

.box .input-box input {
    letter-spacing: 1px;
    font-size: 14px;
    box-sizing: border-box;
    width: 250px;
    height: 35px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.2);
    outline: none;
    padding: 0 12px;
    color: rgba(255,255,255,0.9);
    transition: 0.2s;
}

.box .input-box input:focus {
    border: 1px solid rgba(255,255,255,0.8);
}

.box .btn-box {
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.box .btn-box > a {
    outline: none;
    display: block;
    width: 250px;
    text-align: end;
    text-decoration: none;
    font-size: 13px;
    color: rgba(255,255,255,0.9);
}

.box .btn-box > a:hover {
    color: rgb(70, 61, 152);
}

.box .btn-box > div {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box .btn-box > div > button {
    outline: none;
    margin-top: 10px;
    display: block;
    font-size: 14px;
    border-radius: 5px;
    transition: 0.2s;
}

.box .btn-box > div > button:nth-of-type(1) {
    width: 120px;
    height: 35px;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(231, 236, 238, 0.7);
    background: rgba(21, 34, 228, 0.5);
}

.box .btn-box > div > button:nth-of-type(2) {
    width: 120px;
    height: 35px;
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(207, 203, 210, 0.7);
    background: rgba(22, 33, 199, 0.5);
}

.box .btn-box > div > button:hover {
    border: 1px solid rgba(131, 75, 177, 0.7);
    background: rgba(19, 31, 202, 0.5);
}

 .wrap ul {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -20;
    }
    .wrap ul li {
        list-style-type: none;
        display: block;
        position: absolute;
        bottom: -120px;
        width: 15px;
        height: 15px;
        z-index: -8;
        border-radius: 50%;
        background-color:rgba(255, 255, 255, 0.2);
        animotion: square 25s infinite;
        -webkit-animation: square 25s infinite;
    }
    .wrap ul li:nth-child(1) {
        left: 0;
        animation-duration: 10s;
        -moz-animation-duration: 10s;
        -o-animation-duration: 10s;
        -webkit-animation-duration: 10s;
    }
    .wrap ul li:nth-child(2) {
        width: 40px;
        height: 40px;
        left: 10%;
        animation-duration: 15s;
        -moz-animation-duration: 15s;
        -o-animation-duration: 15s;
        -webkit-animation-duration: 11s;
    }
    .wrap ul li:nth-child(3) {
        left: 20%;
        width: 25px;
        height: 25px;
        animation-duration: 12s;
        -moz-animation-duration: 12s;
        -o-animation-duration: 12s;
        -webkit-animation-duration: 12s;
    }
    .wrap ul li:nth-child(4) {
        width: 50px;
        height: 50px;
        left: 30%;
        -webkit-animation-delay: 3s;
        -moz-animation-delay: 3s;
        -o-animation-delay: 3s;
        animation-delay: 3s;
        animation-duration: 12s;
        -moz-animation-duration: 12s;
        -o-animation-duration: 12s;
        -webkit-animation-duration: 12s;
    }
    .wrap ul li:nth-child(5) {
        width: 60px;
        height: 60px;
        left: 40%;
        animation-duration: 10s;
        -moz-animation-duration: 10s;
        -o-animation-duration: 10s;
        -webkit-animation-duration: 10s;
    }
    .wrap ul li:nth-child(6) {
        width: 75px;
        height: 75px;
        left: 50%;
        -webkit-animation-delay: 7s;
        -moz-animation-delay: 7s;
        -o-animation-delay: 7s;
        animation-delay: 7s;
    }
    .wrap ul li:nth-child(7) {
        left: 60%;
        width: 30px;
        height: 30px;
        animation-duration: 8s;
        -moz-animation-duration: 8s;
        -o-animation-duration: 8s;
        -webkit-animation-duration: 8s;
    }
    .wrap ul li:nth-child(8) {
        width: 90px;
        height: 90px;
        left: 70%;
        -webkit-animation-delay: 4s;
        -moz-animation-delay: 4s;
        -o-animation-delay: 4s;
        animation-delay: 4s;
    }
    .wrap ul li:nth-child(9) {
        width: 50px;
        height: 50px;
        left: 80%;
        animation-duration: 20s;
        -moz-animation-duration: 20s;
        -o-animation-duration: 20s;
        -webkit-animation-duration: 20s;
    }
    .wrap ul li:nth-child(10) {
        width: 75px;
        height: 75px;
        left: 90%;
        -webkit-animation-delay: 6s;
        -moz-animation-delay: 6s;
        -o-animation-delay: 6s;
        animation-delay: 6s;
        animation-duration: 30s;
        -moz-animation-duration: 30s;
        -o-animation-duration: 30s;
        -webkit-animation-duration: 30s;
    }
    @keyframes square {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
        100% {
            bottom: 400px;
            -webkit-transform: translateY(-500);
            transform: translateY(-500)
        }
    }
    @-webkit-keyframes square {
        0% {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
        100% {
            bottom: 400px;
            -webkit-transform: translateY(-500);
            transform: translateY(-500)
        }
    }