html+css+js实现登录界面设计

在现代网页设计中，创建一个功能齐全且用户友好的登录页面是至关重要的。本文将介绍如何使用 HTML 和 CSS 创建一个简单而有效的登录页面，包括验证码、记住密码选项及忘记密码链接。

1. HTML 结构

我们将从 HTML 代码开始，构建一个包含登录表单的页面。以下是代码示例：

<canvas id="myCanvas"></canvas><div class="box"><div style=" width: 100%;height: 100%;"><div style="display: block;" id="myLogin" style="width: 100%;height: 100%;"><div class="left"><button class="register" type="submit" onclick="toggleDivRegister()">去注册</button></div><div class="right" style="margin-left: 300px;"><h2>登 录</h2><form method="post" novalidate>{% csrf_token %}<div style="width: 400px;"><div class="form-group"><label>用户名</label>{{ form.username }}<span style="color: red;position:absolute">{{ form.username.errors.0 }}</span></div><div class="form-group"><label>密码</label>{{ form.password }}<span style="color: red;position:absolute">{{ form.password.errors.0 }}</span></div><div class="form-group"><label for="id_code">图片验证码</label><div class="row"><div class="col-xs-8">{{ form.code }}<span style="color: red;position:absolute">{{ form.code.errors.0 }}</span></div><div class="col-xs-4"><img id="image_code" src="/image/code/" style="width: 100%;height: 33px"></div></div></div><div style="padding: 10px;"><span style="float: left;display: flex;justify-content: center;align-content: center;"><input type="checkbox" style="vertical-align:top;" /><span style="font-size: 14px;vertical-align:top;padding-left: 5px;margin-top:4px">记住密码</span></span><span style="float: right;font-size: 15px;color: rgb(74, 159, 244);margin-top:4px">忘记密码？</span></div></div><button class="submit" type="submit">登录</button></form></div></div><div style="display: none;" id="myRegister" style="width: 100%;height: 100%;"><div class="left"><button class="register" type="submit" onclick="toggleDivLogin()">去登录</button></div><div class="right" style="margin-left: 300px;"><h2 style="color: rgb(1, 59, 100);font-size: 50px;margin-top: 40px;">注 册</h2><form action=""><div style="width: 400px;"><div><div style="display: flex;"><i class="iconPhone distant2"></i><input class="content" type="phone" placeholder="请输入手机号"style="height: 30px; padding-bottom: 10px;" required></div><div style="display: flex;"><i class="iconUser distant2"></i><input class="content" type="username" placeholder="请输入用户名"style="height: 30px; padding-bottom: 10px;" required></div><div style="display: flex;"><i class="iconPassword distant2"></i><input class="content" type="password" placeholder="请输入密码"style="height: 30px; padding-bottom: 10px;" required></div><div style="display: flex;"><i class="iconPassword distant2"></i><input class="content" type="password_reset" placeholder="请再次输入密码"style="height: 30px; padding-bottom: 10px;" required></div></div></div><button class="submit" type="submit" onclick="submitRegister()">立即注册</button></form></div></div></div></div>

2. CSS 样式

为了使页面看起来更美观，我们可以添加一些 CSS 样式。将以下样式添加到 styles.css 文件中：

* {margin: 0;padding: 0;box-sizing: border-box;}body {overflow: hidden;}canvas {display: block;position: absolute;z-index: 10;background-image: url("../../static/img/2.jpg");background-size: cover;}.box {width: 900px;height: 500px;background-color: rgba(255, 255, 255, 0.7);border-radius: 10px;box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1);position: absolute;left: 23%;top: 25%;z-index: 200;}.box .left {width: 35%;height: 100%;position: absolute;z-index: 999;background-image: url(../../static/img/2.jpg);background-size: cover;}.register {position: absolute;width: 60%;height: 60px;color: #080808;background-color: transparent;font-size: 20px;border-radius: 5ch;border: 2px dotted #0984e3;margin: 70% 0 0 50%;transform: translateX(-50%);}.register:hover {color: #0984e3;}.box .right {display: flex;width: 65%;flex-direction: column;align-items: center;}.box .right h2 {color: rgb(1, 59, 100);font-size: 50px;margin-top: 50px;}.box .right form {display: flex;flex-wrap: wrap;justify-content: center;}.box .right form .content {width: 100%;height: 50px;font-size: 20px;margin-top: 30px;padding: 10px 0 0 10px;border: none;border-bottom: 1px dotted rgb(1, 59, 100);color: #74b9ff;}.right form .content:focus {outline: none;color: #74b9ff;padding: 10px 0 0 20px;}.right .submit {width: 60%;height: 60px;color: #f6f6f6;background-image: linear-gradient(120deg, rgb(1, 59, 100), #b1d2f6 100%);font-size: 20px;border-radius: 5ch;border: none;margin: 30px 0 0 50%;transform: translateX(-50%);}.right .submit:hover {box-shadow: 0 0 5px 5px rgba(20, 20, 20, 0.15);}.iconPhone {display: inline-block;height: 20px;width: 20px;background-image: url(../../static/img/phone.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.iconPassword {display: inline-block;height: 20px;width: 20px;background-image: url(../../static/img/password.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.iconUser {display: inline-block;height: 20px;width: 20px;background-image: url(../../static/img/user.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.distant2 {margin-top: 35px;}.distant1 {margin-top: 50px;}

3. JavaScript 动态效果

为了增强用户体验，可以添加一些 JavaScript 代码来处理页面上的交互。例如，显示和隐藏注册表单的功能：

javascript">const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;const particles = [];const connections = [];const particleCount = 300;   // 粒子数量const particleSpeed = 1;     // 粒子移动速度const particleSize = 2;      // 粒子大小const maxDistance = 100;     // 粒子连线的最大距离const lightningColor = "#fff"; // 粒子连线的颜色// 创建粒子类class Particle {constructor() {this.x = Math.random() * width;this.y = Math.random() * height;this.color = "#fff";this.angle = Math.random() * 360;this.speed = Math.random() * particleSpeed;this.opacity = Math.random() * 0.5 + 0.5;}update() {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;// 如果粒子超出画布范围，则重新随机设置位置if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {this.x = Math.random() * width;this.y = Math.random() * height;}}draw() {ctx.beginPath();ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;ctx.fill();}}// 创建粒子数组function createParticles() {for (let i = 0; i < particleCount; i++) {particles.push(new Particle());}}// 绘制粒子之间的连线function drawConnections() {for (let i = 0; i < particles.length; i++) {for (let j = i + 1; j < particles.length; j++) {const dx = particles[i].x - particles[j].x;const dy = particles[i].y - particles[j].y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < maxDistance) {ctx.beginPath();ctx.moveTo(particles[i].x, particles[i].y);ctx.lineTo(particles[j].x, particles[j].y);ctx.strokeStyle = lightningColor;ctx.lineWidth = 0.2 * (1 - distance / maxDistance);ctx.stroke();ctx.closePath();}}}}// 动画循环function animate() {ctx.clearRect(0, 0, width, height);for (const particle of particles) {particle.update();particle.draw();}drawConnections();requestAnimationFrame(animate);}// 监听鼠标移动事件，根据鼠标位置更新粒子运动状态document.addEventListener("mousemove", (e) => {const mouseX = e.clientX;const mouseY = e.clientY;for (const particle of particles) {const dx = mouseX - particle.x;const dy = mouseY - particle.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < maxDistance) {particle.angle = Math.atan2(dy, dx);particle.speed = 5;} else {particle.speed = Math.random() * particleSpeed;}}});// 初始化粒子数组并启动动画createParticles();animate();

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/plugins/bootstrap-3.3.5/css/bootstrap.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {overflow: hidden;}canvas {display: block;position: absolute;z-index: 10;background-image: url("../../static/img/2.jpg");background-size: cover;}.box {width: 900px;height: 500px;background-color: rgba(255, 255, 255, 0.7);border-radius: 10px;box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1);position: absolute;left: 23%;top: 25%;z-index: 200;}.box .left {width: 35%;height: 100%;position: absolute;z-index: 999;background-image: url(../../static/img/2.jpg);background-size: cover;}.register {position: absolute;width: 60%;height: 60px;color: #080808;background-color: transparent;font-size: 20px;border-radius: 5ch;border: 2px dotted #0984e3;margin: 70% 0 0 50%;transform: translateX(-50%);}.register:hover {color: #0984e3;}.box .right {display: flex;width: 65%;flex-direction: column;align-items: center;}.box .right h2 {color: rgb(1, 59, 100);font-size: 50px;margin-top: 50px;}.box .right form {display: flex;flex-wrap: wrap;justify-content: center;}.box .right form .content {width: 100%;height: 50px;font-size: 20px;margin-top: 30px;padding: 10px 0 0 10px;border: none;border-bottom: 1px dotted rgb(1, 59, 100);color: #74b9ff;}.right form .content:focus {outline: none;color: #74b9ff;padding: 10px 0 0 20px;}.right .submit {width: 60%;height: 60px;color: #f6f6f6;background-image: linear-gradient(120deg, rgb(1, 59, 100), #b1d2f6 100%);font-size: 20px;border-radius: 5ch;border: none;margin: 30px 0 0 50%;transform: translateX(-50%);}.right .submit:hover {box-shadow: 0 0 5px 5px rgba(20, 20, 20, 0.15);}.iconPhone {display: inline-block;height: 20px;width: 20px;background-image: url(../../static/img/phone.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.iconPassword {display: inline-block;height: 20px;width: 20px;background-image: url(../../static/img/password.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.iconUser {display: inline-block;height: 20px;width: 20px;background-image: url(../../static/img/user.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.distant2 {margin-top: 35px;}.distant1 {margin-top: 50px;}</style><script>function toggleDivRegister() {var x = document.getElementById("myRegister");var y = document.getElementById("myLogin");x.style.display = "block";y.style.display = "none";}function toggleDivLogin() {var x = document.getElementById("myRegister");var y = document.getElementById("myLogin");x.style.display = "none";y.style.display = "block";}function submitRegister() {// alert("注册成功！")}</script>
</head>
<body><canvas id="myCanvas"></canvas><div class="box"><div style=" width: 100%;height: 100%;"><div style="display: block;" id="myLogin" style="width: 100%;height: 100%;"><div class="left"><button class="register" type="submit" onclick="toggleDivRegister()">去注册</button></div><div class="right" style="margin-left: 300px;"><h2>登 录</h2><form method="post" novalidate>{% csrf_token %}<div style="width: 400px;"><div class="form-group"><label>用户名</label>{{ form.username }}<span style="color: red;position:absolute">{{ form.username.errors.0 }}</span></div><div class="form-group"><label>密码</label>{{ form.password }}<span style="color: red;position:absolute">{{ form.password.errors.0 }}</span></div><div class="form-group"><label for="id_code">图片验证码</label><div class="row"><div class="col-xs-8">{{ form.code }}<span style="color: red;position:absolute">{{ form.code.errors.0 }}</span></div><div class="col-xs-4"><img id="image_code" src="/image/code/" style="width: 100%;height: 33px"></div></div></div><div style="padding: 10px;"><span style="float: left;display: flex;justify-content: center;align-content: center;"><input type="checkbox" style="vertical-align:top;" /><span style="font-size: 14px;vertical-align:top;padding-left: 5px;margin-top:4px">记住密码</span></span><span style="float: right;font-size: 15px;color: rgb(74, 159, 244);margin-top:4px">忘记密码？</span></div></div><button class="submit" type="submit">登录</button></form></div></div><div style="display: none;" id="myRegister" style="width: 100%;height: 100%;"><div class="left"><button class="register" type="submit" onclick="toggleDivLogin()">去登录</button></div><div class="right" style="margin-left: 300px;"><h2 style="color: rgb(1, 59, 100);font-size: 50px;margin-top: 40px;">注 册</h2><form action=""><div style="width: 400px;"><div><div style="display: flex;"><i class="iconPhone distant2"></i><input class="content" type="phone" placeholder="请输入手机号"style="height: 30px; padding-bottom: 10px;" required></div><div style="display: flex;"><i class="iconUser distant2"></i><input class="content" type="username" placeholder="请输入用户名"style="height: 30px; padding-bottom: 10px;" required></div><div style="display: flex;"><i class="iconPassword distant2"></i><input class="content" type="password" placeholder="请输入密码"style="height: 30px; padding-bottom: 10px;" required></div><div style="display: flex;"><i class="iconPassword distant2"></i><input class="content" type="password_reset" placeholder="请再次输入密码"style="height: 30px; padding-bottom: 10px;" required></div></div></div><button class="submit" type="submit" onclick="submitRegister()">立即注册</button></form></div></div></div></div><script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;const particles = [];const connections = [];const particleCount = 300;   // 粒子数量const particleSpeed = 1;     // 粒子移动速度const particleSize = 2;      // 粒子大小const maxDistance = 100;     // 粒子连线的最大距离const lightningColor = "#fff"; // 粒子连线的颜色// 创建粒子类class Particle {constructor() {this.x = Math.random() * width;this.y = Math.random() * height;this.color = "#fff";this.angle = Math.random() * 360;this.speed = Math.random() * particleSpeed;this.opacity = Math.random() * 0.5 + 0.5;}update() {this.x += Math.cos(this.angle) * this.speed;this.y += Math.sin(this.angle) * this.speed;// 如果粒子超出画布范围，则重新随机设置位置if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {this.x = Math.random() * width;this.y = Math.random() * height;}}draw() {ctx.beginPath();ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;ctx.fill();}}// 创建粒子数组function createParticles() {for (let i = 0; i < particleCount; i++) {particles.push(new Particle());}}// 绘制粒子之间的连线function drawConnections() {for (let i = 0; i < particles.length; i++) {for (let j = i + 1; j < particles.length; j++) {const dx = particles[i].x - particles[j].x;const dy = particles[i].y - particles[j].y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < maxDistance) {ctx.beginPath();ctx.moveTo(particles[i].x, particles[i].y);ctx.lineTo(particles[j].x, particles[j].y);ctx.strokeStyle = lightningColor;ctx.lineWidth = 0.2 * (1 - distance / maxDistance);ctx.stroke();ctx.closePath();}}}}// 动画循环function animate() {ctx.clearRect(0, 0, width, height);for (const particle of particles) {particle.update();particle.draw();}drawConnections();requestAnimationFrame(animate);}// 监听鼠标移动事件，根据鼠标位置更新粒子运动状态document.addEventListener("mousemove", (e) => {const mouseX = e.clientX;const mouseY = e.clientY;for (const particle of particles) {const dx = mouseX - particle.x;const dy = mouseY - particle.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < maxDistance) {particle.angle = Math.atan2(dy, dx);particle.speed = 5;} else {particle.speed = Math.random() * particleSpeed;}}});// 初始化粒子数组并启动动画createParticles();animate();</script>
</body>
</html>