写在前面:
由于作者仅仅是自学,且是独自做这个项目,代码中出现不少漏洞、错误、累赘或常识问题是难免的,作者也在不断努力学习中,请各位看官多提意见,轻喷~
基本信息
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
大致结构:
- 如果有错误提示信息,那么先弹出错误提示信息
- 显示网站 logo 图片
- 显示用户名输入框
- 显示密码输入框
- 显示验证码(在连续访问超过 4 次时)
- 显示 “记住我” 与 “忘记密码”
- 显示登录按钮(在连续访问超过 4 次时禁用)
- 显示注册链接
登录页面前端代码:
/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">×</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
大致结构:
- 如果有错误提示信息,那么先弹出错误提示信息
- 显示网站 logo 图片
- 显示验证码
- 显示邮箱输入框
- 显示用户名输入框
- 显示密码输入框
- 显示密码确认输入框
- 显示注册按钮
- 显示登录链接
注册页面前端代码:
/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">×</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
大致结构:
- 如果有错误提示信息,那么先弹出错误提示信息
- 显示网站 logo 图片
- 显示验证码
- 显示邮件验证码输入框
- 显示提交按钮
邮箱验证页面前端代码:
/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">×</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)~