从零开始做个人网站（4）

已于 2023-07-27 23:15:14 修改
阅读量93 收藏
点赞数
分类专栏： 从零开始做个人网站 文章标签： python django html5 css3 javascript bootstrap 编辑器
于 2023-07-26 21:12:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzl20220405/article/details/131945179
版权

写在前面：

由于作者仅仅是自学，且是独自做这个项目，代码中出现不少漏洞、错误、累赘或常识问题是难免的，作者也在不断努力学习中，请各位看官多提意见，轻喷~

基本信息

1. 项目环境

Python 3.10.7

Django 4.2

编辑器：VSCode

操作系统：Windows 10

2. 项目背景

正好近一段时间在自学 Django，突发奇想不妨试着做个个人网站练练手吧~

3. 项目构思

暂定为：登录系统 + 个人主页 + 个人博客 + 个人作品

项目代码

今天的任务是做一半登录系统的前端模板~

1. 创建模板文件夹与资源文件夹

1. 首先，进入 /LZLBlog/login/，创建一个名为 templates 的文件夹（名字不能变）

2. 在刚创建的 templates 文件夹内，再创建一个名为 login 的文件夹（名字为所属 APP 的名字）

3. 回到 /LZLBlog/login/，再创建一个名为 static 的文件夹（名字不能变）

4. 在刚创建的 static 文件夹内，再创建一个名为 login 的文件夹（名字为所属 APP 的名字）

此时的项目结构如下：

接着，在 /LZLBlog/login/static/login/ 中继续细分（这里就是个人习惯了）

这里我习惯在此目录下创建三个文件夹，/css、/js 和 /image

此时的项目结构如下：

接下来的所有 .html 文件，均在 /LZLBlog/login/templates/login 中

接下来的所有 .css 文件，均在 /LZLBlog/login/static/login/css 中

接下来的所有 .js 文件，均在 /LZLBlog/login/static/login/js 中

2. 用到的外部资源

1. bootstrap 4.3.1

介绍：这个应该无人不知，无人不晓吧~

 可以直接通过 cdn 方式在前端引入，如下：

<!-- JS -->

<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- CSS -->

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

我自己是 CSS 在前端引入，JS 复制了一份代码到本地，使用本地的

本地 JS 代码路径：/LZLBlog/login/static/login/js/bootstrap.js

2. JQuery 3.3.1

介绍：bootstrap 的依赖

可以直接通过 cdn 方式在前端引入，如下：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

我自己仍然是 复制了一份代码到本地，使用本地的

本地 JS 代码路径：/LZLBlog/login/static/login/js/jquery.js

3. popper.js

介绍：bootstrap 的依赖

依然可以直接通过 cdn 方式在前端引入，如下：

<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>

我自己仍然仍然是 复制了一份代码到本地，使用本地的

本地 JS 代码路径：/LZLBlog/login/static/login/js/popper.js

4. sweetalert

介绍：用于前端美化弹窗

emmm…… 由于是从之前的一个项目摘来的，时间过于久远，已经忘记在哪里下载了

（或许可以试试在 SweetAlert 官网 中找一找）

路径在 /LZLBlog/login/static/login/js，名称是 "sweetalert"，包含四个文件

angular-SweetAlert.min.js、angular.min.js、sweetalert.min.css 和 sweetalert.min.js

5. verify.js

介绍：用于前端验证是否是真人

同样由于是从之前的一个项目摘来的，时间过于久远，已经忘记在哪里下载了

（或许可以试试在 GitHub - Hibear/verify 中找一找）

路径在 /LZLBlog/login/static/login/js，文件夹名称是 "verify"，包含一个JS 文件 verify.js ，

与 js 文件在同一个目录下有一个文件夹 fonts，包含字体文件

在目录 /LZLBlog/login/static/login/css 下也有一个文件 verify.css

6. tinymce

介绍：用于前端富文本编辑器

又又又……忘记在哪里下载了……

（或许可以试试在 Trusted Rich Text Editor | TinyMCE 中找一找）

路径在 /LZLBlog/login/static/login/js，文件夹名称是 "tinymce"

7. 图片资源

共有 6 张图片，分别是：

404.gif，bg.png，default_avatar.png，favicon.ico，favicon.png，upload_avatar_image.png

404.gif （1280 * 720）

bg.png（1920 * 1080）

 default_avatar.png（1024 * 1024）

 favicon.ico

favicon.png（354 * 175）

 upload_avatar_image.png（100 * 100）

8. 总体结构

结构图如下：

3. 登录页面前端代码

准备工作：

1. 在 /LZLBlog/login/templates/login/ 新建 login.html

2. 在 /LZLBlog/login/static/login/css 新建 login.css

3. 在 /LZLBlog/login/static/login/js 新建 login_show_verify.js

大致结构：

  1. 如果有错误提示信息，那么先弹出错误提示信息
  2. 显示网站 logo 图片
  3. 显示用户名输入框
  4. 显示密码输入框
  5. 显示验证码（在连续访问超过 4 次时）
  6. 显示 “记住我” 与 “忘记密码”
  7. 显示登录按钮（在连续访问超过 4 次时禁用）
  8. 显示注册链接

登录页面前端代码：

/LZLBlog/login/templates/login/login.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static 'login/css/login.css' %}" rel="stylesheet"/> 
    <link href="{% static 'login/css/verify.css' %}" rel="stylesheet"/> 
    <link href="{% static 'login/image/favicon.ico' %}" rel="shortcut icon"/>
    <title>LZLSite | 登录</title>
</head>

{% if message %}
<div class="alert alert-warning alert-dismissible fade show" style="width:1000px;padding-left: 50px;margin:0 auto">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>{{ message }}</strong>
</div>
{% endif %}

<body>
    <div class="container">
        <div class="login-group">
            <form class="form-login" action="/login/login/" method="post">
                {% csrf_token %}
                <!-- 网站 logo 图片 -->
                <div class="logo-image"></div>
                
                <!-- 用户名输入框 -->
                <div class="username-group">
                    <input type="text" name="username" class="username-input" id="username-input" placeholder="用户名或邮件">
                </div>
                
                <!-- 密码输入框 -->
                <div class="password-group">
                    <input type="password" name="password" class="password-input" id="password-input" placeholder="密码">
                </div>

                <!-- 验证码，在访问超过 4 次时出现 -->
                {% if request.session.visit_num >= 4 %}
                <div class="captcha-group">
                    <div id="mpanel1"></div>
                </div>
                {% endif %}

                <!-- 记住我与忘记密码功能 -->
                <div class="other-function">
                    <input type="checkbox" name="remember" class="remember-box" id="remember-box">
                    <label for="remember-box" class="remember-box-label">记住我</label>
                    <a href="/login/reset/" class="forgot-password">忘记密码？</a>
                </div>

                <!-- 登录按钮，如果访问超过 4 次则暂时禁用按钮，验证码通过后解除禁用 -->
                {% if request.session.visit_num >= 4 %}
                <div class="submit-button-container">
                    <button type="submit" class="submit-button" id="submit-button" disabled="disabled">登录</button>
                </div>
                {% else %}
                <div class="submit-button-container">
                    <button type="submit" class="submit-button" id="submit-button">登录</button>
                </div>
                {% endif %}

                <!-- 注册链接 -->
                <div class="register-href">
                    <p class="register-font-before">新用户？</p>
                    <a href="/login/register/" class="register-font">点击注册！</a>
                </div>
            </form>
        </div>
    </div>
    
    <script type="text/javascript" src="{% static 'login/js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/popper.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/bootstrap.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/verify/verify.js' %}"></script>

    {% if request.session.visit_num >= 4 %}
    <script type="text/javascript" src="{% static 'login/js/login_show_verify.js' %}"></script>
    {% endif %}
  
</body>
</html>

/LZLBlog/login/static/login/css/login.css

body {
    height: 100%;
    background-image: url('../image/bg.png');
    background-repeat: no-repeat;
    background-attachment: fixed;   
}


.container {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    width: 450px;
    height: 690px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -330px 0 0 -225px;
}

/*
.container::before{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid rgba(252, 208, 13, 0.8);
    animation: clippath 5s infinite linear;
}

@keyframes clippath{
    0%,
    100%{
        clip-path: inset(0 0 98% 0);
    }
    25%{
        clip-path: inset(0 98% 0 0);
    }
    50%{
        clip-path: inset(98% 0 0 0);
    }
    75%{
        clip-path: inset(0 0 0 98%);
    }
}
*/

.logo-image {
    width: 354px;
    height: 175px;
    background-image: url("../image/favicon.png");
    display: block;
    margin: auto;
    margin-top: 40px;
}

.username-group {
    margin-top: 30px;
}

input.username-input {
    position: relative;
    box-shadow: 0 1px 4px 1px #999999;
    font-size: 18px;
    width: 360px;
    height: 48px;
    padding-left: 20px;
    border: 1px solid darkgrey;
    border-radius: 3px;
}

input.username-input:focus, input.username-input:hover {
    outline: 0;
    border: 2px solid rgb(0,172,194); 
    box-shadow: 0 1px 4px 1px #b1fff8;
}

.password-group {
    margin-top: 30px;
}

input.password-input {
    font-size: 18px;
    box-shadow: 0 1px 4px 1px #999999;
    width: 360px;
    height: 48px;
    padding-left: 20px;
    border: 1px solid darkgrey;
    border-radius: 3px;
}

input.password-input:focus, input.password-input:hover {
    outline: 0;
    border: 2px solid rgb(0,172,194); 
    box-shadow: 0 1px 4px 1px #b1fff8;
}

.other-function {
    margin-top: 30px;
    font-size: 18px;
}

input.remember-box {
    float: left;
    margin-left: 45px;
    width: 16px;
    height: 16px;
}

label.remember-box-label {
    float: left;
    margin-left: 15px;
    margin-top: -5px;
    color: rgb(82, 81, 81);
}

a.forgot-password:link, a.forgot-password:visited {
    float: right;
    margin-right: 45px;
    margin-top: -5px;
    text-decoration: none;
    color:rgb(71, 164, 207);
}

a.forgot-password:hover, a.forgot-password:active {
    color:rgb(51, 133, 172);    
}

.submit-button-container {
    display: block;
    margin-top: 80px;
}

button.submit-button {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(2, 180, 204);
    box-shadow: 0px 5px 1px rgb(0, 116, 131);
    border: 0px;
}

button.submit-button[disabled] {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(150, 150, 150);
    box-shadow: 0px 5px 1px rgb(85, 85, 85);
    border: 0px;
}

button.submit-button[disabled]:hover, button.submit-button[disabled]:active {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(150, 150, 150);
    box-shadow: 0px 5px 1px rgb(85, 85, 85);
    border: 0px;
}

button.submit-button:hover, .submit-button:active {
    outline: 0;
    background-color: rgb(2, 200, 226);
    box-shadow: 0px 5px 1px rgb(0, 134, 151);
}

.register-href {
    margin-top: 30px;
    margin-bottom: 50px;
}

.register-font-before {
    display: inline;
    font-size: 20px;
    font-weight: bold;
    color:grey;
}

.register-font:link, .register-font:visited {
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    color:rgb(71, 164, 207);
}

.register-font:hover, .register-font:active {
    color:rgb(51, 133, 172);
}

.captcha-group {
    margin-top: 30px;
    margin-left: 30px;
}

/LZLBlog/login/static/login/js/login_show_verify.js

$('#mpanel1').slideVerify({
    type: 1,
    vOffset: 5,
    vSpace: 5,
    imgSize: {
        width: '100%',
        height: '200px',
    },
    blockSize: {
        width: '40px',
        height: '40px',
    },
    barSize: {
        width: '360px',
        height: '40px',
    },
    ready: function(){
    },
    success: function(){
        /* 验证成功后取消按钮禁用，同时更改访问页面次数 */
        document.getElementById('submit-button').disabled = false;
        var temp = document.createElement('form');
        temp.action = '/login/login/';
        temp.method = 'POST';
        temp.style.display = 'none';
        var opt = document.createElement('textarea');
        opt.name = 'turn_visit_num';
        opt.value = 1;
        temp.appendChild(opt);
        document.body.appendChild(temp);

        var opt1 = document.createElement('textarea');
        opt1.name = 'username';
        var username = document.getElementById("username-input").value
        opt1.value = username;
        temp.appendChild(opt1);

        var opt2 = document.createElement('textarea');
        opt2.name = 'password';
        var password = document.getElementById("password-input").value
        opt2.value = password;
        temp.appendChild(opt2);

        var csrftoken = document.createElement("input");
        csrftoken.type= "hidden";
        csrftoken.name = "csrfmiddlewaretoken";
        csrftoken.value = document.getElementsByName('csrfmiddlewaretoken')[0].value;
        temp.appendChild(csrftoken);

        temp.submit();
    },
    error: function(){
    },
});

4. 注册页面前端代码

准备工作：

1. 在 /LZLBlog/login/templates/login/ 新建 register.html

2. 在 /LZLBlog/login/static/login/css 新建 register.css

3. 在 /LZLBlog/login/static/login/js 新建 show_verify.css

大致结构：

  1. 如果有错误提示信息，那么先弹出错误提示信息
  2. 显示网站 logo 图片
  3. 显示验证码
  4. 显示邮箱输入框
  5. 显示用户名输入框
  6. 显示密码输入框
  7. 显示密码确认输入框
  8. 显示注册按钮
  9. 显示登录链接

注册页面前端代码：

/LZLBlog/login/templates/login/register.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static 'login/css/register.css' %}" rel="stylesheet"/> 
    <link href="{% static 'login/css/verify.css' %}" rel="stylesheet"/> 
    <link href="{% static 'login/image/favicon.ico' %}" rel="shortcut icon"/>
    <title>LZLSite | 注册</title>
</head>

{% if message %}
<div class="alert alert-warning alert-dismissible fade show" style="width:1000px;padding-left: 50px;margin:0 auto">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>{{ message }}</strong>
</div>
{% endif %}

<body>
    <div class="container">
        <div class="register-group">
            <form class="form-register" action="/login/register/" method="POST">
                {% csrf_token %}
                
                <!-- 网站 logo 图片 -->
                <div class="logo-image"></div>

                <!-- 滑块拖动验证 -->
                <div class="captcha-group">
                    <div id="mpanel1"></div>
                </div>

                <!-- 邮箱 -->
                <div class="email-group"> 
                    <input type="text" name="email" class="email-input" id="email-input" placeholder="请输入邮件">
                </div>

                <!-- 用户名 -->
                <div class="username-group">
                    <input type="text" name="username" class="username-input" id="username-input" placeholder="请输入用户名">
                </div>

                <!-- 密码 -->
                <div class="password-group">
                    <input type="password" name="password" class="password-input" id="password-input" placeholder="请输入密码">
                </div>

                <!-- 再次输入密码 -->
                <div class="password-again-group">
                    <input type="password" name="password_again" class="password-again-input" id="password-again-input" placeholder="请再次输入密码">
                </div>

                <!-- 提交按钮 -->
                <div class="submit-button-container">
                    <button type="submit" class="submit-button" id="submit-button" disabled="disabled">前往邮箱验证</button>
                </div>

                <!-- 登录链接 -->
                <div class="login-href">
                    <p class="login-font-before">已有账号？</p>
                    <a href="/login/login/" class="login-font">点击登录</a>
                </div>
            </form>
        </div>
    </div>

    <script type="text/javascript" src="{% static 'login/js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/popper.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/bootstrap.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/verify/verify.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/show_verify.js' %}"></script>

</body>
</html>

/LZLBlog/login/static/login/css/register.css

body {
    height: 100%;
    background-image: url('../image/bg.png');
    background-repeat: no-repeat;
    background-attachment: fixed;  
}

.container {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    width: 450px;
    height: 800px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -400px 0 0 -225px;
}

.logo-image {
    width: 354px;
    height: 175px;
    background-image: url("../image/favicon.png");
    display: block;
    margin: auto;
    margin-top: 40px;
}

.email-group {
    margin-top: 30px;
}

input.email-input {
    position: relative;
    box-shadow: 0 1px 4px 1px #999999;
    font-size: 18px;
    width: 360px;
    height: 48px;
    padding-left: 20px;
    border: 1px solid darkgrey;
    border-radius: 3px;
}

input.email-input:focus, input.email-input:hover {
    outline: 0;
    border: 2px solid rgb(0,172,194); 
    box-shadow: 0 1px 4px 1px #b1fff8;
}

.username-group {
    margin-top: 30px;
}

input.username-input {
    position: relative;
    box-shadow: 0 1px 4px 1px #999999;
    font-size: 18px;
    width: 360px;
    height: 48px;
    padding-left: 20px;
    border: 1px solid darkgrey;
    border-radius: 3px;
}

input.username-input:focus, input.username-input:hover {
    outline: 0;
    border: 2px solid rgb(0,172,194); 
    box-shadow: 0 1px 4px 1px #b1fff8;
}

.password-group {
    margin-top: 30px;
}

input.password-input {
    font-size: 18px;
    box-shadow: 0 1px 4px 1px #999999;
    width: 360px;
    height: 48px;
    padding-left: 20px;
    border: 1px solid darkgrey;
    border-radius: 3px;
}

input.password-input:focus, input.password-input:hover {
    outline: 0;
    border: 2px solid rgb(0,172,194); 
    box-shadow: 0 1px 4px 1px #b1fff8;
}

.password-again-group {
    margin-top: 30px;
}

input.password-again-input {
    font-size: 18px;
    box-shadow: 0 1px 4px 1px #999999;
    width: 360px;
    height: 48px;
    padding-left: 20px;
    border: 1px solid darkgrey;
    border-radius: 3px;
}

input.password-again-input:focus, input.password-again-input:hover {
    outline: 0;
    border: 2px solid rgb(0,172,194); 
    box-shadow: 0 1px 4px 1px #b1fff8;
}

.submit-button-container {
    display: block;
    margin-top: 50px;
}

button.submit-button {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(2, 180, 204);
    box-shadow: 0px 5px 1px rgb(0, 116, 131);
    border: 0px;
}

button.submit-button[disabled] {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(150, 150, 150);
    box-shadow: 0px 5px 1px rgb(85, 85, 85);
    border: 0px;
}

button.submit-button[disabled]:hover, button.submit-button[disabled]:active {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(150, 150, 150);
    box-shadow: 0px 5px 1px rgb(85, 85, 85);
    border: 0px;
}

button.submit-button:hover, .submit-button:active {
    outline: 0;
    background-color: rgb(2, 200, 226);
    box-shadow: 0px 5px 1px rgb(0, 134, 151);
}

.login-href {
    margin-top: 40px;
    margin-bottom: 40px;
}

.login-font-before {
    display: inline;
    font-size: 20px;
    font-weight: bold;
    color:grey;
}

.login-font:link, .login-font:visited {
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    color:rgb(71, 164, 207);
}

.login-font:hover, .login-font:active {
    color:rgb(51, 133, 172);
}


.captcha-group {
    margin-top: 30px;
    margin-left: 30px;
}

/LZLBlog/login/static/login/js/show_verify.js

$('#mpanel1').slideVerify({
    type: 1,
    vOffset: 5,
    vSpace: 5,
    imgSize: {
        width: '100%',
        height: '200px',
    },
    blockSize: {
        width: '40px',
        height: '40px',
    },
    barSize: {
        width: '360px',
        height: '40px',
    },
    ready: function(){
    },
    success: function(){
        document.getElementById('submit-button').disabled = false;
    },
    error: function(){
    },
});

5. 邮箱验证页面前端代码

准备工作：

1. 在 /LZLBlog/login/templates/login/ 新建 confirm.html

2. 在 /LZLBlog/login/static/login/css 新建 confirm.css

大致结构：

  1. 如果有错误提示信息，那么先弹出错误提示信息
  2. 显示网站 logo 图片
  3. 显示验证码
  4. 显示邮件验证码输入框
  5. 显示提交按钮

邮箱验证页面前端代码：

/LZLBlog/login/templates/login/confirm.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="{% static 'login/css/confirm.css' %}" rel="stylesheet"/> 
    <link href="{% static 'login/css/verify.css' %}" rel="stylesheet"/> 
    <link href="{% static 'login/image/favicon.ico' %}" rel="shortcut icon"/>
    <title>LZLSite | 邮箱确认</title>
</head>

{% if message %}
<div class="alert alert-warning alert-dismissible fade show" style="width:1000px;padding-left: 50px;margin:0 auto">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>{{ message }}</strong>
</div>
{% endif %}

<body>
    <div class="container">
        <div class="confirm-group">
            <form class="form-confirm" action="/login/confirm/" method="POST">
                {% csrf_token %}

                <!-- 网站 logo 图片 -->
                <div class="logo-image"></div>

                <!-- 拖动滑块验证码 -->
                <div class="captcha-group">
                    <div id="mpanel1"></div>
                </div>

                <!-- 邮件验证码 -->
                <div class="email-password-group"> 
                    <input type="text" name="email_password" class="email-password-input" id="email-password-input" placeholder="请输入邮件验证码">
                </div>

                <!-- 提交按钮 -->
                <div class="submit-button-container">
                    <button type="submit" class="submit-button" id="submit-button" disabled="disabled">注册</button>
                </div>
            </form>
        </div>
    </div>

    <script type="text/javascript" src="{% static 'login/js/jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/popper.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/bootstrap.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/verify/verify.js' %}"></script>
    <script type="text/javascript" src="{% static 'login/js/show_verify.js' %}"></script>

</body>
</html>

/LZLBlog/login/static/login/css/confirm.css

body {
    height: 100%;
    background-image: url('../image/bg.png');
    background-repeat: no-repeat;
    background-attachment: fixed;  
}

.container {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    width: 450px;
    height: 550px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -275px 0 0 -225px;
}

.logo-image {
    width: 354px;
    height: 175px;
    background-image: url("../image/favicon.png");
    display: block;
    margin: auto;
    margin-top: 40px;
}

.email-password-group {
    margin-top: 30px;
}

input.email-password-input {
    position: relative;
    box-shadow: 0 1px 4px 1px #999999;
    font-size: 18px;
    width: 360px;
    height: 48px;
    padding-left: 20px;
    border: 1px solid darkgrey;
    border-radius: 3px;
}

input.email-password-input:focus, input.email-password-input:hover {
    outline: 0;
    border: 2px solid rgb(0,172,194); 
    box-shadow: 0 1px 4px 1px #b1fff8;
}

.submit-button-container {
    display: block;
    margin-top: 50px;
}

button.submit-button {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(2, 180, 204);
    box-shadow: 0px 5px 1px rgb(0, 116, 131);
    border: 0px;
}

button.submit-button[disabled] {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(150, 150, 150);
    box-shadow: 0px 5px 1px rgb(85, 85, 85);
    border: 0px;
}

button.submit-button[disabled]:hover, button.submit-button[disabled]:active {
    width: 320px;
    height: 50px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    background-color: rgb(150, 150, 150);
    box-shadow: 0px 5px 1px rgb(85, 85, 85);
    border: 0px;
}

button.submit-button:hover, .submit-button:active {
    outline: 0;
    background-color: rgb(2, 200, 226);
    box-shadow: 0px 5px 1px rgb(0, 134, 151);
}

.captcha-group {
    margin-top: 30px;
    margin-left: 30px;
}

至此，本篇的内容就完结啦~   

下篇继续做前端模板 （HTML5 + CSS3 + JavaScript）~

lzlqwq2024
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从零开始建设个人网页
Meditator_hkx的博客
08-06 1万+
前一段时间突然心血来潮，想建立一个自己的个人网页，打造自己的互联网明信片，于是Google查了许多教程和博客分析，但是无奈的是没有一个排名靠前的搜索结果能够详实地介绍给新手该如何一步步建立网站。是的，或者流于讲道理的层次说你该看些书看些网页模板学学HTML，或者整体流程给了但是说得很模糊，或者是指在某一个节点上讲得比较细但是其他方面一概不关心。在这个信息爆炸的时代，还是要靠自己成事才行！
从零开始布置你的个人网站（一）
匆匆忙忙
07-13 1620
准备之前用腾讯云的学生购买了一个1元服务器，但是一直没有用起来，最近项目不太忙，准备自己搭建一个线上环境。安装ubuntu环境 安装ubuntu的16.04.1的32环境 登录ubuntu系统，可以直接使用腾讯云的登录，也可以通过各种ssh工具登录。 在Ubuntu中输入密码是不可见，直接输入之前设置的密码就行 登录成功就是下图的样子 安装各类软件 首先我们先切换到root 用户，获得管理员权限
从零开始搭建自己的个人博客网站
亮出锋芒，剑指苍穹
01-06 1万+
大家好，我是机灵鹤。 最近群里有朋友问我能不能出个教程，教一下大家怎么建一个自己的个人网站。 安排！ 1. 购买服务器 首先网站运行需要服务器，所以我们需要准备一台服务器。 各大服务器厂商，阿里云，腾讯云，对于新用户的活动力度越来越大了，我记得几年前我买阿里云服务器的时候，1 核 2G 的配置价格还是 88 一年，没想到现在已经降到 38 一年了。 需要的购买服务器的朋友继续往下看，已经有服务器的朋友可以跳过本节。 第一次接触服务器的朋友，可能看到服务器配置的各种参数头都大了，不知道该怎么选。 各个配置
入门指南：从零开始学习ReactJS
努力是为了站在万人之中，成为别人的光
04-23 2万+
ReactJS是一个强大的JavaScript库，用于构建用户界面。它由Facebook开发，并于2013年首次发布。自那时以来，React已成为前端开发中最受欢迎的库之一，许多公司和开发者都在使用它来构建高性能、交互式的Web应用程序。本文将向您介绍ReactJS的基础知识，并通过实践示例来帮助您入门。我们将从React的核心概念开始，逐步深入，直到您能够构建简单的React应用为止。
【前端】从零开始读懂Web3
热门推荐
颜淡慕潇
04-17 2万+
Web的发展史可以看作是一个不断演化和发展的过程，不断地引入新的技术和概念，不断地提高用户体验和互动性。 随着Web技术的不断发展和演化，我们可以期待更加智能、便捷和个性化的Web应用程序和服务的到来。
【干货】从零开始做运营
03-03
第一次发现《从零开始做运营》是在百度阅读(参加活动的免费兑换码，感谢百度，感谢群主vince)里看到的，看了一眼之后就欲罢不能的把(进阶篇)也给看完了，后来工作中也不时的拿出案例来和书中的概念做比对，想整理出...
从零开始做运营-运营人必读
01-30
第一次发现《从零开始做运营》是在百度阅读(参加活动的免费兑换码，感谢百度，感谢群主vince)里看到的，看了一眼之后就欲罢不能的把(进阶篇)也给看完了，后来工作中也不时的拿出案例来和书中的概念做比对，想整理出...
不懂技术，从零开始自己做网站，只需要简单的6个步骤.pdf
10-30
4、作为个人，不管你是自己创业还是帮老板打工，网站都能为你的营销工作指明方向，甚至是24小时的营业店铺，不间断地为访客展示你提供的产品或服务。 如果你现在还没有一个展示自己的平台，那么是时候考虑自己搭建...
【python计算机视觉编程——1.基本的图像操作和处理】
m0_53694086的博客
08-26 1万+
参数sigma为标准差（σ），是高斯滤波器的一个重要参数，它控制滤波器的平滑程度。标准差越大，高斯函数的曲线越宽，滤波器的影响范围就越大。标准差较大: 高斯滤波器会在更大范围内进行平滑，使得图像变得更加模糊，细节和边缘特征会被更强地平滑掉。标准差较小: 高斯滤波器会产生较小范围的平滑效果，图像的细节保留更多。还可以给定转换矩阵，将RGB图像转换为CIE XYZ色彩空间。图像像素值被分成128个区间，用于计算每个区间的像素值频率。可以返回目录中所有jpg图像的列表。
centos7 安装 superset4.0.2 教程
m0_37759590的博客
08-27 7672
centos7 安装 superset4.0.2 教程
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 8081
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
【python】关于判断空值None、判断len()=0，和 if not 的区别
Meggie35的博客
08-28 3837
python的“空”与“无”之辩，关于None，和空数值。在程序中，判断里面没有值和判断东西是不是为空，也是不一样的东西，我们可以往下看看具体的区别。
使用 DrissionPage 和 2Captcha 处理 Turnstile 验证并获取 Faucet 签名
最新发布
qq_41631913的博客
08-30 268
本教程介绍了两种获取 Cloudflare Turnstile 验证值并使用 faucet 签名 API 的方法。第一种方法通过 DrissionPage 模拟浏览器操作，手动获取验证码值。第二种方法则通过 2Captcha 服务，自动化解决验证码问题。
无法验证 Anaconda 仓库证书
qq_38332453的博客
08-28 127
无法验证 Anaconda 仓库的证书
并行计算的艺术：PyTorch中torch.cuda.nccl的多GPU通信精粹
2401_85763639的博客
08-27 576
是PyTorch提供的一个用于多GPU通信的API，它基于NCCL库，专门针对NVIDIA GPU优化，支持高效的多GPU并行操作。NCCL提供了如All-Reduce、Broadcast等集合通信原语，这些操作在多GPU训练中非常关键。
人工智能开发实战机器学习算法解析
sinat_30844883的博客
08-29 2057
机器学习算法是人工智能领域的重要组成部分，它们通过从数据中学习并自动改进，而无需进行显式的编程。机器学习算法可以分为多种类型，包括监督学习、无监督学习、半监督学习、迁移学习和强化学习。每种类型都有其特定的应用场景和优势。
Python | Leetcode Python题解之第384题打乱数组
Mopes__的博客
08-30 155
Python | Leetcode Python题解之第384题打乱数组
宝塔面板网站SSL证书到期如何手动和自动续签Let’s Encrypt
weixin_45734165的博客
08-27 1021
宝塔面板提供2种免费的SSL证书：宝塔SSL，Let’s Encrypt。前面第1，2步骤主要是手动续签，比较稳定可靠，唯一的缺点是需要进入后台进行操作，并且有时候可能忘记续签。实际上宝塔面板还提供了很多计划任务的脚本，可以自动续签Let’s Encrypt证书。不管是给网站部署SSL还是给网站SSL续签，利用宝塔后台来进行网站SSL证书的管理还是比较方便高效的。2.手动续签：网站设置后台点击【SSL】》【Let’s Encrypt】》【续签】1.手动续签：登录宝塔面板后台，点击【网站】》【设置】
yield：生成器
mohen_777的博客
08-28 726
作为生成器，因为每次迭代就会返回一个值，所以不能显示的在生成器函数中return 某个值，包括None值也不行，否则会抛出“SyntaxError”的异常，但是在函数中可以出现单独的return，表示结束该语句。使用yield，可以让函数生成一个序列，该函数返回的对象类型是"generator"，通过该对象连续调用next()方法返回序列值。另外一种说法：生成器就是一个返回迭代器的函数，与普通函数的区别是生成器包含yield语句，更简单点理解生成器就是一个迭代器。处为止，next()的返回值就是生成值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值