【HTML+CSS+JS】登录注册页面大合集

前言

学JS也学了一段时间，正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别，于是便萌生了用人脸来进行注册和登录的想法，这样的话就需要开发一个登录注册页面，然后用JS绑定注册事件调用人脸识别接口进行登录注册

饭要一口一口吃，路要一步一步走，于是便在开发登录注册页面便卡壳儿了（原因是当初学的HTML和CSS并不扎实，再加上很长时间没使用），于是乎，便打算走模仿创新之路

思路

先收集网络上共享的登录注册页面源码，然后运行看其效果，觉得符合自己的审美，便先仿照源码进行模拟理解，然后在进一步改造风格，最后争取集大成进行创新

非常感谢这些无私分享源码的朋友

效果展示

演示视频

在CSDN上上传视频太糊了，于是...

过程

简单登录注册页面

感谢 哔哩哔哩up主@丿Ares丶-倾城 分享的源码

成品效果

<!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>简单登录注册页面</title>
    <link rel="stylesheet" href="../CSS/innovate/one.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="javascript:void(0)">忘记密码?</a>
            <div>
                <button>登录</button>
                <button>注册</button>
            </div>
        </div>
    </div>
</body>
</html>
/* 仿哔哩哔哩up主@丿Ares丶-倾城  */

@charset "utf-8";

* {
    margin: 0;
    top: 0;
}

body {
    height: 100vh;
    background: url(/第三阶段/images/One/background.png) 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(1px);
    background: rgba(50, 50, 50, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

.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.3);
    background: rgba(50, 50, 50, 0.3);
    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;
}

.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.8);
}

.box .btn-box > a:hover {
    color: rgba(255,255,255,1);
}

.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(00, 96, 96, 0.7);
    background: rgba(00, 96, 96, 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(00, 96, 96, 0.7);
    background: rgba(00, 96, 96, 0.5);
}

.box .btn-box > div > button:hover {
    border: 1px solid rgba(00, 96, 96);
    background: rgba(00, 96, 96);
}

简洁美观的登录注册页面

感谢 CSDN博主@News777 分享的源码

成品效果

<!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>简洁美观的登录注册页面</title>
    <link rel="stylesheet" href="../CSS/innovate/two.css">
</head>
<body>
    <div class="container">
        <div class="main_left active">
            <h2>登录</h2>
            <form action="#" class="form_login">
                <input type="text" placeholder="请输入账号">
                <input type="password" placeholder="请输入密码">
                <p><a href="javascript:void(0)" class="forget_pwd">忘记密码?</a></p>
            </form>
            <div class="card">
                <button class="btn_login">登录</button>
            </div>
            <div class="dotted">
                <div class="Dot"></div>
                <div class="dFont">其他方式登录</div>
                <div class="Dot"></div>
            </div>
            <div class="other">
                <div class="icoD"><a href="javascript:void(0)" class="icoQ">QQ</a></div>
                <div class="icoD"><a href="javascript:void(0)" class="icoW">微信</a></div>
                <div class="icoD"><a href="javascript:void(0)" class="icoF">人脸识别</a></div>
            </div>
        </div>
        <div class="way">
            <div class="change_way">
                <button class="click" onclick="dclick(this)">注册</button>
            </div>
        </div>
        <div class="main_right active">
            <h2>注册</h2>
            <form action="#" class="form_register">
                <input type="text" placeholder="请输入邮箱/手机号">
                <input type="password" placeholder="请输入密码">
                <input type="password" placeholder="确认密码">
            </form>
            <div class="songhuashu">
                <button class="btn_register">注册</button>
            </div>
        </div>
    </div>
    <script>
         /* 鼠标点击切换按钮特效 */
        var middlePart = document.querySelector('.way');
        var leftPart = document.querySelector('.main_left');
        var rightPart = document.querySelector('.main_right');

        function dclick(e) {
            if (e.textContent == '注册') {
                middlePart.classList.add('pull');
                leftPart.classList.add('hid');
                rightPart.classList.add('dis');
                e.textContent = '登录';
            } else {
                e.textContent = '注册';
                middlePart.classList.remove('pull');
                leftPart.classList.remove('hid');
                rightPart.classList.remove('dis');
            }
        }

        /* 鼠标点击登录按钮波纹特效 */
        var card = document.querySelector('.card');
        card.addEventListener('click',function(e){
            
            let x = e.clientX - this.offsetLeft - 360;
            let y = e.clientY - this.offsetTop - 155;

            let circle = document.createElement('span');
            circle.style.left = x + 'px';
            circle.style.top = y + 'px';
            
            this.appendChild(circle);

            setInterval(function(){
                circle.remove();
            },1000)
        }) 

        /* 鼠标点击注册按钮波纹特效 */ 
        var shs = document.querySelector('.songhuashu');
        shs.addEventListener('click', function(e) {
            let x = e.clientX - this.offsetLeft - 760;
            let y = e.clientY - this.offsetTop - 155;

            let circle = document.createElement('span');
            circle.style.left = x + 'px';
            circle.style.top = y + 'px';
            
            this.appendChild(circle);

            setInterval(function(){
                circle.remove();
            },1000)
        })
    </script>
</body>
</html>

/* 仿CSDN博主News777 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 两个并排的带边框的框 */
}

body {
    background: url(/第三阶段/images/Two/bg.jpg) no-repeat;
    background-size: cover;
    height: 100vh;
}

.container {
    position: relative;
    border-radius: 14px;
    width: 760px;
    height: 435px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.container .main_left,
.container .main_right,
.container .way {
    width: 380px;
    height: 435px;
    padding: 50px 30px;
    position: absolute;
    text-align: center;
}

.container h2 {
    letter-spacing: 20px;
    text-indent: 20px;
    color: #1e647b;
    font-family: "仿宋";
}

.container form {
    padding-top: 25px;
    padding-bottom: 25px;
}

.container form input {
    display: inline-block;
    height: 40px;
    width: 100%;
    padding: 0 8px;
    margin-bottom: 25px;
    font-size: 16px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    transition: 0.2s;
}

.container form input::placeholder {
    font-size: 0.9em;
    color: #6e6969;
}

/* 输入框聚焦效果 */
.container form input:focus {
    border: 1px solid rgba(0, 0, 0, 0.9);
}

.container .form_login p a {
    text-decoration: none;
    font-size: 0.9em;
    color: rgb(2, 174, 174);
}

.container .card {
    width: 160px;
    height: 40px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.container .songhuashu {
    width: 160px;
    height: 40px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

button {
    position: absolute;
    left: 0;
    width: 160px;
    height: 40px;
    letter-spacing: 16px;
    text-indent: 16px;
    border-radius: 5px;
    border: 0;
    color: #fff;
    font-size: 16px;
    background: linear-gradient(to right, #5d9960, #0b5e2e);
    cursor: pointer;
}

/* 按钮特效参考稀土掘金博主@北极光之夜 */
.container .card span {
    position: absolute;
    transform: translate(-50%,-50%);
    background-color: rgb(255, 255, 254);
    border-radius: 50%;
    animation: big 1.5s;
}

.container .songhuashu span {
    position: absolute;
    transform: translate(-50%,-50%);
    background-color: rgb(255, 255, 254);
    border-radius: 50%;
    animation: big 1.5s;
}

@keyframes big {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
}

.container .main_left .dotted {
    min-width: 0;
    display: flex;
    margin: 20px 14px;
    align-items: center;
}

.container .main_left .dotted .Dot {
    margin: 0;
    min-width: 0;
    border-top: 1px solid;
    border-color: #969999;
    width: 124px;
}

.container .main_left .dotted .dFont {
    margin: 0;
    min-width: 0;
    color: #999999;
    font-size: 0.8em;
    margin-left: 5px;
    margin-right: 15px;
    line-height: 17px;
    white-space: nowrap;
}


.active {
    background-color: rgba(249, 249 , 249, 0.8);
    border-radius: 6px;
}

.container .main_left {
    transition: all 0.6S ease-in-out;
}

.container .other {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
}

.container .other .icoD {
    position: relative;
    width: 100%;
    padding: 0 15px;
}

.container .other .icoD .icoQ {
    margin-top: 9px;
    text-align: center;
    background-image: url(/第三阶段/images/Two/QQ.png);
    background-size: 34px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 38px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    background-color: transparent;
    color: #16181d;
    font-size: 0.8em;
}

.container .other .icoD .icoW {
    margin-top: 9px;
    text-align: center;
    background-image: url(/第三阶段/images/Two/微信.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 38px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    background-color: transparent;
    color: #16181d;
    font-size: 0.8em;
}

.container .other .icoD .icoF {
    margin-top: 9px;
    text-align: center;
    background-image: url(/第三阶段/images/Two/人脸识别.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 36px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    background-color: transparent;
    color: #16181d;
    white-space: nowrap;
    font-size: 0.8em;
}

.container .way {
    position: absolute;
    left: 50%;
    transition: all 0.6s ease-in-out;
}

.container .way .change_way {
    margin: 115px 80px 140px;
    position: relative;
    white-space: nowrap;
    border-radius: 14px;
}

.container .main_right {
    left: 50%;
    display: none;
}

.container .main_right .btn_register {
    margin-bottom: 10px;
}

.container .pull {
    left: 0;
}

.container .dis {
    display: block;
}

.container .hid {
    display: none;
}

实用美观的登录注册页面

感谢 哔哩哔哩up主@艾恩小灰灰 分享的源码

成品效果

<!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>实用美观的登录注册页面</title>
    <link rel="stylesheet" href="./css/three.css">
</head>
<body>
    <div class="container">
        <div class="rl-box">
            <!-- 注册 -->
            <div class="register-box-content hidden">
                <div class="box login-box">
                    <div class="login-logo">
                        <img src="./img/3-img/logo.png">
                    </div>
                    <form id="my-form-1">
                        <div class="login-box-in">
                            <div class="login-title">
                                <span>注册</span>
                            </div>
                            <label class="login-form-item">
                                <input type="text" name="username" tabindex="1" spellcheck="false" autocomplete="off">
                                <span>
                                    <b>用户名</b>
                                </span>    
                            </label>
                            <label class="login-form-item">
                                <input type="text" name="email" tabindex="2" spellcheck="false" autocomplete="off">
                                <span>
                                    <b>邮箱</b>
                                </span>
                            </label>
                            <label class="login-form-item" id="switch-1">
                                <input type="password" name="password" tabindex="3" spellcheck="false" autocomplete="off">
                                <span>
                                    <b>密码</b>
                                </span>
                                <div class="login-eye">
                                    <img src="./img/3-img/password.png">
                                </div>
                            </label>
                            <div class="login-bottom">
                                <button type="submit">快速注册</button>
                            </div>
                        </div>
                    </form>    
                </div>
            </div>                           
            <!-- 登录 -->
            <div class="login-box-content">
                <div class="box login-box">
                    <div class="login-logo">
                        <img src="./img/3-img/logo.png">
                    </div>
                    <form id="my-form-2">
                        <div class="login-box-in">
                            <div class="login-title">
                                <span>登录</span>
                            </div>
                            <label class="login-form-item">
                                <input type="text" name="username" tabindex="1" spellcheck="false" autocomplete="off">
                                <span>
                                    <b>登录邮箱</b>
                                </span>    
                            </label>
                            <label class="login-form-item" id="switch-2">
                                <input type="password" name="password" tabindex="2" spellcheck="false" autocomplete="off">
                                <span>
                                    <b>密码</b>
                                </span>
                                <div class="login-eye">
                                    <img src="./img/3-img/password.png">
                                </div>
                            </label>
                            <div class="login-bottom">
                                <button type="submit">快速登录</button>
                            </div>
                        </div>
                        <div class="dotted">
                            <div class="Dot"></div>
                            <div class="dFont">其他方式登录</div>
                            <div class="Dot"></div>
                        </div>
                        <div class="other">
                            <div class="icoD"><a href="javascript:void(0)" class="icoQ">QQ</a></div>
                            <div class="icoD"><a href="javascript:void(0)" class="icoW">微信</a></div>
                            <div class="icoD"><a href="javascript:void(0)" class="icoF">人脸识别</a></div>
                        </div>
                    </form>
                </div>
            </div>        
        </div>
        <div class="display-box left">
            <h2>专业<span>视角</span>展示专业<span>素养</span></h2>
            <p>投身<span>开源</span>，分享<span>学习</span></p>
            <img src="./img/3-img/GitHub_CSDN.png">
            <p>已有账号</p>
            <button id="login" class="btn light">去登录</button>
        </div>
        <div class="display-box right">
            <h2><span>科技</span>浪花流入<span>日常</span>点滴</h2>
            <p>网上<span>冲浪</span>，细致<span>归纳</span></p>
            <img src="./img/3-img/GZH.png">
            <p>没有账号</p>
            <button id="register" class="btn light">去注册</button>
        </div>
    </div>   
    <script>
        // 获取元素
        var login = document.getElementById("login");
        var register = document.getElementById("register");
        var rl_box = document.querySelector(".rl-box");
        var register_box = document.getElementsByClassName("register-box-content")[0];
        var login_box = document.getElementsByClassName("login-box-content")[0];

        var input_1 = document.getElementById('switch-1').querySelector('input');
        var img_1 = document.getElementById('switch-1').querySelector('img');
        var flag = 0; // 不可见

        var input_2 = document.getElementById('switch-2').querySelector('input');
        var img_2 = document.getElementById('switch-2').querySelector('img');

        // 注册事件
        register.addEventListener('click', function() {
            rl_box.style.transform = 'translateX(110%)';
            login_box.classList.add('hidden');
            register_box.classList.remove('hidden');
        })

        login.addEventListener('click', function() {
            rl_box.style.transform = 'translateX(0%)';
            register_box.classList.add('hidden');
            login_box.classList.remove('hidden');
        })

        img_1.onclick = function() {
            if (flag == 0) {
                input_1.type = 'text';
                img_1.src = './img/3-img/text.png';
                flag = 1;
            } else {
                input_1.type = 'password';
                img_1.src = './img/3-img/password.png';
                flag = 0;
            }
        }

        img_2.onclick = function() {
            if (flag == 0) {
                input_2.type = 'text';
                img_2.src = './img/3-img/text.png';
                flag = 1;
            } else {
                input_2.type = 'password';
                img_2.src = './img/3-img/password.png';
                flag = 0;
            }
        }

        // 监听表单提交事件
        document.getElementById("my-form-1").addEventListener("submit", function(event) {
            // 阻止默认的表单提交行为
            event.preventDefault();

            // 处理表单数据
            var formData = new FormData(this);
            // TODO: 处理表单数据

            // 更新页面结果
            var result = "表单提交成功！";
            // TODO: 更新结果

            // 清空表单
            this.reset(); 
        });  

        document.getElementById("my-form-2").addEventListener("submit", function(event) {
            // 阻止默认的表单提交行为
            event.preventDefault();

            // 处理表单数据
            var formData = new FormData(this);
            // TODO: 处理表单数据

            // 更新页面结果
            var result = "表单提交成功！";
            // TODO: 更新结果

            // 清空表单
            this.reset(); 
        });          
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    outline: none;
}

body {
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 渐变背景 https://webgradients.com */
    background-image: linear-gradient(120deg, #dfd2eb 0%, #b1cfed 95%);
}

.container{
    background-color: #fff;
    width: 780px;
    height: 415px;
    /* 阴影 */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    /* 相对定位 */
    position: relative;
}

/* 表单 */
.rl-box {
    position: absolute;
    top: -5%;
    left: 5%;
    width: 336px;
    height: 450px;
    border-radius: 8px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    display: flex;
    z-index: 2;
    transition: 0.5s ease-in-out;
}

.hidden {
    display: none;
    transition: 0.5s;
}

/* 注册 */
.register-box-content {
    width: 21rem;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 8px;
    background-image: url(../img/3-img/bcg_content.jpg);
}

/* 登录注册相同体 */
.login-box {
    padding: 26px 24px 25px;
    background-image: url(../img/3-img/decoration.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.login-logo {
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 27px;
}

.login-logo img {
    display: block;
    height: 60px;
    max-width: 100%;
    border: 0;
    object-fit: cover;
}

form {
    margin-top: 20px;
}

.login-box-in .login-title {
    color: #b2bac2;
    font-size: 15px;
    margin-bottom: 20px;
    text-align: center;
    font-family: "楷体";
    font-weight: bold;
}

.login-box-in .login-title span {
    display: inline-block;
    padding: 10px;
}

.login-box-in .login-form-item {
    display: flex;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.login-box-in .login-form-item input {
    font-size: 15px;
    border-radius: 8px;
    width: 100%;
    padding: 10px;
    transition: .3s;
    border: 1px solid #e8e8e8;
    height: 28px;
    padding-right: 46px;
}


.login-box-in .login-form-item input:valid + span {
    left: 10px;
    cursor: default;
}

.login-box-in .login-form-item span {
    position: absolute;
    top: -8px;
    font-size: 15px;
    color: #b2bac2;
    display: block;
    line-height: 1;
    padding: 0 7px;
}

.login-box-in .login-form-item span b {
    position: relative;
    z-index: 1;
    font-weight: normal;
}

.login-box-in .login-form-item input:valid + span:after {
    content: '';
    width: 100%;
    height: 3px;
    background: #fff;
    top:6px;
    position: absolute;
    left: 0;
    z-index: 0;
    opacity: 1;
}

/* 输入框聚焦效果 */
.login-box-in .login-form-item input:focus {
    border-color: #7bbed8;
}

.login-box-in .login-form-item input:focus + span {
    color: #7bbed8;
}

.login-box-in .login-form-item .login-eye {
    float: right;
}

.login-box-in .login-form-item .login-eye img {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 5px;
    top: 15px;
}

.login-box-in .login-bottom {
    margin-top: 10px;
}

.login-bottom button {
    width: 100%;
    padding: 12px;
    color: white;
    font-size: 14px;
    font-weight: 400;
    display: block;
    border-radius: 8px;
    background: #7bbed8;
    border: 1px solid #7bbed8;
    overflow: hidden;
    position: relative;
}

.login-bottom button:active {
    box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
    top: 1px;      
}

.login-bottom button::before {
    content: '';
    position: absolute;
    left: -100%;
    top: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(247, 250, 250, 0.6),
        transparent
    );
    transition: all 650ms;
}

.login-bottom button:hover::before {
    left: 100%;
}

/* 登录 */
.login-box-content {
    width: 21rem;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 8px;
    background-image: url(../img/3-img/bcg_content.jpg);
}

/* 其他方式 */
form .dotted {
    min-width: 0;
    display: flex;
    margin: 15px 14px 5px;
    align-items: center;
}

form .dotted .Dot {
    margin: 0;
    min-width: 0;
    border-top: 1px solid;
    border-color: #969999;
    width: 95px;
}

form .dotted .dFont {
    margin: 0;
    min-width: 0;
    color: #999999;
    font-size: 0.8em;
    margin-left: 5px;
    margin-right: 15px;
    line-height: 17px;
    white-space: nowrap;
}

form .other {
    text-align: center;
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
}

form .other .icoD {
    position: relative;
    width: 100%;
    padding: 0 15px;
}

form .other .icoD .icoQ {
    margin-top: 9px;
    text-align: center;
    background-image: url(../img/3-img/QQ.png);
    background-size: 34px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 38px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    background-color: transparent;
    color: #16181d;
    font-size: 0.8em;
}

form .other .icoD .icoW {
    margin-top: 9px;
    text-align: center;
    background-image: url(../img/3-img/微信.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 38px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    background-color: transparent;
    color: #16181d;
    font-size: 0.8em;
}

form .other .icoD .icoF {
    margin-top: 9px;
    text-align: center;
    background-image: url(../img/3-img/人脸识别.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 36px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    background-color: transparent;
    color: #16181d;
    white-space: nowrap;
    font-size: 0.8em;
}


/* 主体 */
.container .display-box {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.container .left {
    left: 2%;
}

.container .right {
    right: 2%;
}


.container .display-box h2 {
    color: #8e9aaf;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 4px;
}

.container .display-box p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #8e9aaf;
    text-align: center;
}

.container .display-box span {
    color: #B6CFED;
}

.container .display-box img {
    width: 384px;
    height: 216px;
    opacity: 0.9;
    margin: 20px 0;
}

.container .display-box .btn {
    margin-top: 3%;
    border: 1px solid;
    background-color: transparent;
    text-transform: uppercase;
    font-size: 16px;
    padding: 5px 20px;
    font-weight: bold;
    font-family: "楷体";
}

.container .display-box .light {
    color: #4cc9f0;
}

.container .display-box .btn:hover {
    color: white;
}

.container .display-box .light:hover {
    background-color: #4cc9f0;
    -webkit-box-shadow: 3px 2px 35px 5px rgba(76, 201, 240, 0.5);
    -moz-box-shadow: 3px 2px 35px 3px rgba(76, 201, 240, 0.5);
    box-shadow: 3px 2px 35px 3px rgba(76, 201, 240, 0.5);
    transition: all ease-in 0.5s;
}

题外话

为了获得自己想要的登录注册页面，花了好几个星期来完善

期间经历过代码误删，遭遇过卡壳儿不前，简言之，是花了番心思做出来的

常言道：取之于民，用之于民。既然是取之于开源，那就用之于开源吧

希望有用到的，自己日后也可以在开源事业上贡献自己的一份力。同时反对抵制拿着他人的劳动成果去二次售卖的，网上有很多这般无底线的

资源获取

仓库地址：https://github.com/lion-no-back/RL_BS

如果对你有帮助又或者你支持我这种行为，可以点个star

我相信大部分人访问GitHub是没有问题的，但可能也有小伙伴儿卡在这儿了没关系，可以看看我这篇文章（顺道推广下自己所写文章嘛）

GitHub加速访问与高速下载...

结语

老师曾说：不忘初心，方得始终。那么下一站还是人脸识别，对，还是它，没得跑...

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/17009.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

网络安全之密码学

网络安全之密码学

目录 密码学 定义 密码的分类 对称加密 非对称加密 对称算法与非对称算法的优缺点 最佳解决办法 --- 用非对称加密算法加密对称加密算法的密钥 非对称加密如何解决对称加密的困境 密钥传输风险 密码管理难 常见算法 对称算法 非对称算法 完整性与身份认证最佳解决…
阅读更多...
PAVC100R4222 PARKER轴向柱塞泵

PAVC100R4222 PARKER轴向柱塞泵

PAVC100R4222 PARKER轴向柱塞泵特点&#xff1a; 1、壳体为高强度铸铁 2、两段设计便于维护 3、全密封的轴用轴承 4、内置增压器***高转速性能&#xff0c;可达3000 RPM( PAVC100为2600 RPM) 5、控制器为插装形式&#xff0c;易于现场更换 6、配流盘为可替换的青铜复合 10、过滤…
阅读更多...
2016 ICPC合肥站 传递 HDU-5961（拓扑排序 / bitset / 暴力（可hack））

2016 ICPC合肥站 传递 HDU-5961（拓扑排序 / bitset / 暴力（可hack））

题目链接&#xff1a;HDU-5961 传递 中文题面就不解释题目意思&#xff0c;解释一下名词的意思 完全图&#xff1a;对于一个无向图 G G G 而言&#xff0c;设点集为 V V V&#xff0c;点集中任意不相同两点 u , v u, v u,v 间都有且仅有一条边叫做完全图。 竞赛图&#xff1…
阅读更多...
刚转岗做项目经理，无从下手，怎么办？

刚转岗做项目经理，无从下手，怎么办？

01 背景 最近在知乎平台看到一个问题是这么说的&#xff1a; 或许很多人都不是从工作开始就是项目专员再到项目经理这里一步一步过来&#xff0c;而是从其他岗位比如售前、销售、产品经理、程序员等转到项目经理岗位的。 那么对于这些人来说&#xff0c;做项目经理会有什么问…
阅读更多...
Packet Tracer - 静态路由故障排除

Packet Tracer - 静态路由故障排除

Packet Tracer - 静态路由故障排除 地址分配表 设备 接口 IPv4 地址 子网掩码 默认网关 R1 G0/0 172.31.1.1 255.255.255.128 不适用 S0/0/0 172.31.1.194 255.255.255.252 不适用 R2 G0/0 172.31.0.1 255.255.255.0 不适用 S0/0/0 172.31.1.193 255.255…
阅读更多...
什么是http代理504网关超时错误，要如何修复？

什么是http代理504网关超时错误，要如何修复？

当你在使用 HTTP 代理时&#xff0c;有时候会遇到"504 网关超时"错误&#xff0c;这个错误看起来非常可怕&#xff0c;但实际上它并不是一个很难解决的问题。在本文中&#xff0c;我将向你介绍 504 错误的定义&#xff0c;以及为什么我们会遇到这个错误&#xff0c;同…
阅读更多...
论文笔记——chatgpt评估+

论文笔记——chatgpt评估+

文章目录 1. chatgpt 效果评估:Evaluating ChatGPT’s Information Extraction Capabilities: An Assessment of Performance, Explainability, Calibration, and Faithfulness文章简介文章结论 2. 事件抽取&#xff1a; OneEE: A One-Stage Framework for Fast Overlapping an…
阅读更多...
UAD142A01 3BHE012551R0001使用以太网交叉电缆，您也可以直接连接。

UAD142A01 3BHE012551R0001使用以太网交叉电缆，您也可以直接连接。

​ UAD142A01 3BHE012551R0001使用以太网交叉电缆&#xff0c;您也可以直接连接。 如何将 MicroLogix PLC 连接到计算机并将程序下载到 MicroLogix 1100 MicroLogix PLC由美国罗克韦尔自动化旗下知名工业自动化厂商Allen-Bradley设计。MicroLogix 1100 主要用于小型工业。我们在…
阅读更多...
山东专升本计算机第一章-计算机信息技术与计算机文化

山东专升本计算机第一章-计算机信息技术与计算机文化

计算机信息技术与计算机文化 计算机中的信息表示 数制及其转换 数制&#xff1a;用进位的原则进行计数数码&#xff1a;数制中表示基本数值大小的不同数字符号基数&#xff1a;一种数制所使用的数码个数位权&#xff1a;数码在不同位置的权值 数制的转换 • R进制转化为十进…
阅读更多...
【五一创作】【远程工具】- Tabby 下载、安装、使用、配置【ssh/Serial】-免安装、解压即用

【五一创作】【远程工具】- Tabby 下载、安装、使用、配置【ssh/Serial】-免安装、解压即用

目录 一、Tabby 概述 二、Tabby 下载、安装 三、Tabby 的使用  &#x1f449;3.1 使用SSH协议连接Linux开发主机  &#x1f449;3.2 使用Serial(串口)协议连接开发板 一、Tabby 概述 在远程终端工具中&#xff0c;secureCrt 和 XShell 是两款比较有名的远程工具&#xff0c;但…
阅读更多...
【计算机图形学】图形变换（以任意直线为对称轴的对称变换）

【计算机图形学】图形变换（以任意直线为对称轴的对称变换）

模块3-2 图形变换 一 实验目的 编写图形各种变换的算法 二 实验内容 1&#xff1a;任意直线的对称变换。要求将变换矩阵写在实验报告中&#xff0c;并与代码匹配。求对任意直线AxByC0的对称变换矩阵。 实验结果如下图所示&#xff1a; 1&#xff1a;预设图形初始化 2&#…
阅读更多...
数据结构——链表（python版）

数据结构——链表（python版）

一、链表简介 链表是一种在存储单元上非连续、非顺序的存储结构。数据元素的逻辑顺序是通过链表中的指针链接次序实现。链表是由一系列的结点组成&#xff0c;结点可以在运行时动态生成。每个结点包含两部分&#xff1a;数据域与指针域。数据域存储数据元素&#xff0c;指针域…
阅读更多...
TCP的三次握手和四次挥手

TCP的三次握手和四次挥手

三次握手 既然我们文章要说的是TCP的三次握手&#xff0c;和四次挥手&#xff0c;那么肯定是说的连接&#xff0c;也不是说的不其他的。那么它这个连接的过程说的是什么呢&#xff1f; 我们还是从图中理解&#xff0c;这样比较好理解&#xff0c; TCP第一次握手&#xff1a;服…
阅读更多...
gradle Task 详解

gradle Task 详解

目录 Task定义和配置 Task的执行阶段 Task 的依赖 Task 指定执行顺序 Task 主gradle引入其他的gradle文件 将某一个task挂载到指定的task之后执行 gradle task官网&#xff1a;Task - Gradle DSL Task定义和配置 查看工程下所有的task&#xff0c;使用如下命令 gradle …
阅读更多...
【Linux】浅谈eloop机制

【Linux】浅谈eloop机制

目录 1.eloop 机制 2.eloop结构体 2.1.eloop_data结构体 2.2 Socket事件结构体 2.3 Timeout事件结构体 2.4 Signal事件结构体 3.eloop_init 4.eloop_run 4.1 signal事件 4.2 socket事件 4.3 timeout事件 1.eloop 机制 主线程中启动事件监听机制&#xff0c;对不同的…
阅读更多...
深度学习模型压缩与优化加速

深度学习模型压缩与优化加速

1. 简介 深度学习&#xff08;Deep Learning&#xff09;因其计算复杂度或参数冗余&#xff0c;在一些场景和设备上限制了相应的模型部署&#xff0c;需要借助模型压缩、系统优化加速、异构计算等方法突破瓶颈&#xff0c;即分别在算法模型、计算图或算子优化以及硬件加速等层…
阅读更多...
如何优雅地停掉线程？

如何优雅地停掉线程？

很久很久以前&#xff0c;在一个名为“Springboot”的村庄中&#xff0c;住着一群热爱编程的程序员。他们喜欢探索新技术、优化自己的代码&#xff0c;为了打造更好的软件而不断努力着。 在这个村庄中&#xff0c;有一个名叫小明的程序员&#xff0c;他是村庄中最优秀的程序员…
阅读更多...
一文打通java中内存泄露

一文打通java中内存泄露

目录 前置知识 内存泄漏&#xff08;memory leak&#xff09; 内存溢出&#xff08;out of memory&#xff09; Java中内存泄露的8种情况 静态集合类 单例模式 内部类持有外部类 各种连接&#xff0c;如数据库连接、网络连接和IO连接等 变量不合理的作用域 改变哈希值 …
阅读更多...
第二十八章 React脚手架配置代理

第二十八章 React脚手架配置代理

为了更好地理解如何在React应用程序中配置代理&#xff0c;我们需要先了解什么是代理。 代理是一种充当客户端和服务器之间中间人的服务器。当客户端向服务器发送请求时&#xff0c;代理服务器将接收请求并将其转发到服务器。服务器将响应发送回代理服务器&#xff0c;代理服务…
阅读更多...
机器视觉工程师职场四点“心态＞交流=思路＞知行合一”

机器视觉工程师职场四点“心态＞交流=思路＞知行合一”

视觉人机器视觉团队，他们热爱机器视觉行业，爱学习，爱分享。这一路上，首先感谢粉丝们805天一如既往的支持。我想团队拥有这些粉丝，是富有的，也是我们一直创作的动力。 是否记得毕业季，自己的豪言壮语。希望你毕业三年后，无论结果如何，不忘初心，继续前行。 机器视觉工程…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站