在现代网页设计中，创建一个功能齐全且用户友好的登录页面是至关重要的。本文将介绍如何使用 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 代码来处理页面上的交互。例如，显示和隐藏注册表单的功能：
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>实现效果
总结
通过上述步骤，你可以创建一个功能齐全且美观的登录页面。HTML 提供了结构，CSS 美化了样式，JavaScript 处理交互。这种页面设计有助于提升用户体验，并且可以很容易地扩展和定制以满足具体需求。
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
