当前位置： 首页 > news >正文

六款高颜值注册页面（可复制源码）

news 2024/11/5 1:27:47

和昨天的一样，带来了六款注册界面，可复制源码（需要定制请加微信）

第一款–简约风格

在这里插入图片描述

HTML

<!DOCTYPE html>  
<html lang="zh">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="styles.css">  <title>注册界面</title>  
</head>  
<body>  <div class="registration-container">  <h1>创建账户</h1>  <form id="registrationForm" onsubmit="return handleRegister()">  <div class="input-group">  <label for="username">用户名</label>  <input type="text" id="username" placeholder="输入用户名" required>  </div>  <div class="input-group">  <label for="email">邮箱</label>  <input type="email" id="email" placeholder="输入邮箱" required>  </div>  <div class="input-group">  <label for="password">密码</label>  <input type="password" id="password" placeholder="输入密码" required>  </div>  <div class="input-group">  <label for="confirm-password">确认密码</label>  <input type="password" id="confirm-password" placeholder="确认密码" required>  </div>  <button type="submit">注册</button>  </form>  <div id="message"></div>  <div class="footer">  <p>已经有账户？<a href="#">登录</a></p>  </div>  </div>  <script src="script.js"></script>  
</body>  
</html>

CSS (styles.css)

body {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background: linear-gradient(135deg, #f9f9f9, #ebeff2);  font-family: 'Arial', sans-serif;  
}  .registration-container {  background: white;  padding: 30px;  border-radius: 10px;  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  max-width: 400px;  width: 100%;  
}  h1 {  text-align: center;  color: #333;  
}  .input-group {  margin-bottom: 20px;  
}  label {  display: block;  margin-bottom: 5px;  font-weight: bold;  color: #555;  
}  input {  width: 100%;  padding: 12px;  border: 1px solid #ccc;  border-radius: 5px;  transition: border-color 0.3s;  box-sizing: border-box; /* 确保padding不超出宽度 */  
}  input:focus {  border-color: #007bff;  outline: none;  
}  button {  width: 100%;  padding: 12px;  background-color: #007bff;  color: white;  border: none;  border-radius: 5px;  font-weight: bold;  cursor: pointer;  transition: background-color 0.3s;  
}  button:hover {  background-color: #0056b3;  
}  #message {  text-align: center;  margin-top: 15px;  color: red;  
}  .footer {  text-align: center;  margin-top: 20px;  
}  .footer a {  color: #007bff;  text-decoration: none;  
}  .footer a:hover {  text-decoration: underline;  
}

JavaScript (script.js)

function handleRegister() {const username = document.getElementById('username').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;const confirmPassword = document.getElementById('confirm-password').value;const messageElement = document.getElementById('message');// 简单的验证if (password !== confirmPassword) {messageElement.textContent = '密码和确认密码不匹配！';messageElement.style.color = 'red';return false;}// 在这里可以进行进一步的处理，例如发送数据到服务器messageElement.textContent = '注册成功！';messageElement.style.color = 'green';// 阻止表单的默认提交行为return false;
}

第二款–商务风格

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>注册界面</title>
</head>
<body><div class="registration-container"><h1>创建账户</h1><p class="subtitle">加入我们，开始您的旅程</p><form id="registrationForm" onsubmit="return handleRegister()"><div class="input-group"><label for="username">用户名</label><input type="text" id="username" placeholder="输入用户名" required></div><div class="input-group"><label for="email">邮箱</label><input type="email" id="email" placeholder="输入邮箱" required></div><div class="input-group"><label for="password">密码</label><input type="password" id="password" placeholder="输入密码" required></div><div class="input-group"><label for="confirm-password">确认密码</label><input type="password" id="confirm-password" placeholder="确认密码" required></div><button type="submit">注册</button></form><div id="message"></div><div class="footer"><p>已经有账户？<a href="#">登录</a></p></div></div><script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background: linear-gradient(135deg, #e3f2fd, #bbdefb);  font-family: 'Arial', sans-serif;  
}  .registration-container {  background: white;  padding: 40px;  border-radius: 15px;  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);  max-width: 450px;  width: 100%;  text-align: center;   
}  h1 {  margin-bottom: 10px;  color: #1e88e5;  
}  .subtitle {  margin-bottom: 20px;  color: #555;  font-size: 14px;  
}  .input-group {  margin-bottom: 20px;  text-align: left;   
}  label {  display: block;  margin-bottom: 5px;  font-weight: bold;  color: #333;  
}  input {  width: 100%;  padding: 12px;  border: 1px solid #ccc;  border-radius: 5px;  transition: border-color 0.3s;  font-size: 14px;   box-sizing: border-box; /* 确保padding不超出宽度 */  }  input:focus {  border-color: #1e88e5;  outline: none;  box-shadow: 0 0 5px rgba(30, 136, 229, 0.5);  
}  button {  width: 100%;  padding: 12px;  background-color: #1e88e5;  color: white;  border: none;  border-radius: 5px;  font-weight: bold;  cursor: pointer;  transition: background-color 0.3s;  font-size: 16px;   
}  button:hover {  background-color: #1976d2;  
}  #message {  text-align: center;  margin-top: 15px;  color: red;  
}  .footer {  text-align: center;  margin-top: 20px;  
}  .footer a {  color: #1e88e5;  text-decoration: none;  
}  .footer a:hover {  text-decoration: underline;  
}

JavaScript (script.js)

function handleRegister() {const username = document.getElementById('username').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;const confirmPassword = document.getElementById('confirm-password').value;const messageElement = document.getElementById('message');// 简单的验证if (password !== confirmPassword) {messageElement.textContent = '密码和确认密码不匹配！';messageElement.style.color = 'red';return false;}// 进行进一步处理，例如发送数据到服务器messageElement.textContent = '注册成功！';messageElement.style.color = 'green';// 阻止表单的默认提交行为return false;
}

第三款–中国水墨丹青风格

在这里插入图片描述
在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>注册界面</title>
</head>
<body><div class="registration-container"><h1>创建账户</h1><p class="subtitle">与万物共生，踏上新的旅程</p><form id="registrationForm" onsubmit="return handleRegister()"><div class="input-group"><label for="username">用户名</label><input type="text" id="username" placeholder="输入用户名" required></div><div class="input-group"><label for="email">邮箱</label><input type="email" id="email" placeholder="输入邮箱" required></div><div class="input-group"><label for="password">密码</label><input type="password" id="password" placeholder="输入密码" required></div><div class="input-group"><label for="confirm-password">确认密码</label><input type="password" id="confirm-password" placeholder="确认密码" required></div><button type="submit">注册</button></form><div id="message"></div><div class="footer"><p>已经有账户？<a href="#">登录</a></p></div></div><script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background: url('../../loginBig/login3/img/2.png') no-repeat center center fixed; background-size: cover;  font-family: 'SimSun', serif;  color: #333; 
}  .registration-container {  background: rgba(255, 255, 255, 0.8);  padding: 40px;  border-radius: 15px;  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);  max-width: 450px;  width: 100%;  text-align: center;   
}  h1 {  margin-bottom: 10px;  color: #000;  font-size: 24px;  
}  .subtitle {  margin-bottom: 20px;  color: #555;  font-size: 14px;  
}  .input-group {  margin-bottom: 20px;  text-align: left;   
}  label {  display: block;  margin-bottom: 5px;  font-weight: bold;  color: #333;  
}  input {  width: 100%;  padding: 12px;  border: 1px solid #ccc;  border-radius: 5px;  transition: border-color 0.3s;  font-size: 14px;   box-sizing: border-box;  
}  input:focus {  border-color: #d192d3;  outline: none;  
}  button {  width: 100%;  padding: 12px;  background-color: #b872d2c5;  color: white;  border: none;  border-radius: 5px;  font-weight: bold;  cursor: pointer;  transition: background-color 0.3s;  font-size: 16px;   
}  button:hover {  background-color: #6d4a64;  
}  #message {  text-align: center;  margin-top: 15px;  color: red;  
}  .footer {  text-align: center;  margin-top: 20px;  
}  .footer a {  color: #cd58cd;  text-decoration: none;  
}  .footer a:hover {  text-decoration: underline;  
}

JavaScript (script.js)

function handleRegister() {const username = document.getElementById('username').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;const confirmPassword = document.getElementById('confirm-password').value;const messageElement = document.getElementById('message');// 简单的验证if (password !== confirmPassword) {messageElement.textContent = '密码和确认密码不匹配！';messageElement.style.color = 'red';return false;}// 进行进一步处理，例如发送数据到服务器messageElement.textContent = '注册成功！';messageElement.style.color = 'green';// 阻止表单的默认提交行为return false;
}

第四款–中国风

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>注册界面</title>
</head>
<body><div class="registration-container"><h1>创建账户</h1><form id="registrationForm" onsubmit="return handleRegister()"><div class="input-group"><label for="username">用户名</label><input type="text" id="username" placeholder="输入用户名" required></div><div class="input-group"><label for="email">邮箱</label><input type="email" id="email" placeholder="输入邮箱" required></div><div class="input-group"><label for="password">密码</label><input type="password" id="password" placeholder="输入密码" required></div><div class="input-group"><label for="confirm-password">确认密码</label><input type="password" id="confirm-password" placeholder="确认密码" required></div><button type="submit">注册</button></form><div id="message"></div><div class="footer"><p>已经有账户？<a href="#">登录</a></p></div></div><script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background: url('../../loginBig/login2/img/2.png') no-repeat center center fixed; background-size: cover;   font-family: 'SimSun', serif;color: #333; 
}  .registration-container {  background: rgba(255, 255, 255, 0.9);border: 2px solid #8B4513; padding: 40px;  border-radius: 15px;  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);  max-width: 450px;  width: 100%;  text-align: center;   
}  h1 {  margin-bottom: 10px;  color: #8B4513;  font-size: 28px;  
}  .subtitle {  margin-bottom: 20px;  color: #5B3A29;font-size: 14px;  
}  .input-group {  margin-bottom: 20px;  text-align: left;   
}  label {  display: block;  margin-bottom: 5px;  font-weight: bold;  color: #333;  
}  input {  width: 100%;  padding: 12px;  border: 1px solid #ccc;  border-radius: 5px;  transition: border-color 0.3s;  font-size: 14px;   box-sizing: border-box; 
}  input:focus {  border-color: #8B4513;  outline: none;  
}  button {  width: 100%;  padding: 12px;  background-color: #8B4513; color: white;  border: none;  border-radius: 5px;  font-weight: bold;  cursor: pointer;  transition: background-color 0.3s;  font-size: 16px;   
}  button:hover {  background-color: #6F3C2A; 
}  #message {  text-align: center;  margin-top: 15px;  color: red;  
}  .footer {  text-align: center;  margin-top: 20px;  
}  .footer a {  color: #8B4513; text-decoration: none;  
}  .footer a:hover {  text-decoration: underline;  
}

JavaScript (script.js)

function handleRegister() {const username = document.getElementById('username').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;const confirmPassword = document.getElementById('confirm-password').value;const messageElement = document.getElementById('message');// 简单的验证if (password !== confirmPassword) {messageElement.textContent = '密码和确认密码不匹配！';messageElement.style.color = 'red';return false;}// 在这里可以进行进一步的处理，例如发送数据到服务器messageElement.textContent = '注册成功！';messageElement.style.color = 'green';// 阻止表单的默认提交行为return false;
}

第五款–赛博朋克风格在这里插入图片描述

在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>赛博朋克注册界面</title>
</head>
<body><div class="background"></div><div class="registration-container"><h1>欢迎来到赛博世界</h1><p class="subtitle">加入我们，解锁新未来</p><form id="registrationForm" onsubmit="return handleRegister()"><div class="input-group"><label for="username">用户名</label><input type="text" id="username" placeholder="输入用户名" required></div><div class="input-group"><label for="email">邮箱</label><input type="email" id="email" placeholder="输入邮箱" required></div><div class="input-group"><label for="password">密码</label><input type="password" id="password" placeholder="输入密码" required></div><div class="input-group"><label for="confirm-password">确认密码</label><input type="password" id="confirm-password" placeholder="确认密码" required></div><button type="submit">注册</button></form><div id="message"></div><div class="footer"><p>已经有账户？<a href="#">登录</a></p></div></div><script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {  margin: 0;  font-family: 'Arial', sans-serif;  background: black;  color: #ffffff;  overflow: hidden;   
}  .background {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: url('../../loginBig/login4/img/2.png') no-repeat center center fixed; background-size: cover;  filter: blur(5px);  
}  .registration-container {  position: relative;  z-index: 1;  background: rgba(0, 0, 0, 0.7);  padding: 40px;  border-radius: 15px;  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);  backdrop-filter: blur(8px);  max-width: 450px;  margin: auto;  text-align: center;   
}  h1 {  margin-bottom: 10px;  color: #0ff;font-size: 28px;  
}  .subtitle {  margin-bottom: 20px;  color: #ff79c6; font-size: 14px;  
}  .input-group {  margin-bottom: 20px;  text-align: left;   
}  label {  display: block;  margin-bottom: 5px;  font-weight: bold;  color: #ffffff;  
}  input {  width: 100%;  padding: 12px;  border: 2px solid #0ff; border-radius: 5px;  background: rgba(255, 255, 255, 0.1);color: #ffffff;  transition: border-color 0.3s;  box-sizing: border-box; }  input:focus {  border-color: #ff79c6;outline: none;  
}  button {  width: 100%;  padding: 12px;  background-color: #ff79c6; color: white;  border: none;  border-radius: 5px;  font-weight: bold;  cursor: pointer;  transition: background-color 0.3s;  font-size: 16px;   
}  button:hover {  background-color: #0ff; 
}  #message {  text-align: center;  margin-top: 15px;  color: red;  
}  .footer {  text-align: center;  margin-top: 20px;  
}  .footer a {  color: #0ff; text-decoration: none;  
}  .footer a:hover {  text-decoration: underline;  
}

JavaScript (script.js)

function handleRegister() {const username = document.getElementById('username').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;const confirmPassword = document.getElementById('confirm-password').value;const messageElement = document.getElementById('message');// 简单的验证if (password !== confirmPassword) {messageElement.textContent = '密码和确认密码不匹配！';messageElement.style.color = 'red';return false;}// 进行进一步处理，例如发送数据到服务器messageElement.textContent = '注册成功！';messageElement.style.color = 'green';// 阻止表单的默认提交行为return false;
}

第六款–像素风格

在这里插入图片描述
在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>像素风格注册界面</title>
</head>
<body><div class="registration-container"><h1>像素世界</h1><p class="subtitle">加入我们，开始新的冒险</p><form id="registrationForm" onsubmit="return handleRegister()"><div class="input-group"><label for="username">用户名</label><input type="text" id="username" placeholder="输入用户名" required></div><div class="input-group"><label for="email">邮箱</label><input type="email" id="email" placeholder="输入邮箱" required></div><div class="input-group"><label for="password">密码</label><input type="password" id="password" placeholder="输入密码" required></div><div class="input-group"><label for="confirm-password">确认密码</label><input type="password" id="confirm-password" placeholder="确认密码" required></div><button type="submit">注册</button></form><div id="message"></div><div class="footer"><p>已经有账户？<a href="#">登录</a></p></div></div><script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background: radial-gradient(ellipse at bottom, #20ba84 0%, #e0e6df 100%) fixed;    font-family: 'Press Start 2P', cursive;
}  .registration-container {  background: #ffffff; /* 白色背景 */ background: url('../../loginBig/login5/img/2.png') no-repeat center center fixed;padding: 20px;  border: 5px solid #333; /* 深色边框 */  border-radius: 10px;  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  max-width: 400px;  width: 100%;  text-align: center;   
}  h1 {  margin-bottom: 10px;  color: #333; /* 字体颜色 */  font-size: 24px;  
}  .subtitle {  margin-bottom: 20px;  color: #555; /* 字体颜色 */  font-size: 14px;  
}  .input-group {  margin-bottom: 20px;  text-align: left;   
}  label {  display: block;  margin-bottom: 5px;  font-weight: bold;  color: #333;  
}  input {  width: 100%;  padding: 10px;  border: 3px solid #666; border-radius: 5px;  background: #fafafa; color: #333; font-size: 14px;  box-sizing: border-box;transition: border-color 0.3s;  
}  input:focus {  border-color: #459e54; outline: none;  
}  button {  width: 100%;  padding: 10px;  background-color: #528e64; color: rgb(0, 0, 0); border: none;  border-radius: 5px;  font-weight: bold;  cursor: pointer;  transition: background-color 0.3s;  font-size: 16px;   
}  button:hover {  background-color: #49b190; 
}  #message {  text-align: center;  margin-top: 15px;  color: red;  
}  .footer {  text-align: center;  margin-top: 20px;  
}  .footer a {  color: #000000; text-decoration: none;  
}  .footer a:hover {  text-decoration: underline;  
}

JavaScript (script.js)

function handleRegister() {const username = document.getElementById('username').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;const confirmPassword = document.getElementById('confirm-password').value;const messageElement = document.getElementById('message');// 简单的验证if (password !== confirmPassword) {messageElement.textContent = '密码和确认密码不匹配！';messageElement.style.color = 'red';return false;}// 进行进一步处理，例如发送数据到服务器messageElement.textContent = '注册成功！';messageElement.style.color = 'green';// 阻止表单的默认提交行为return false;
}

http://www.mrgr.cn/news/65706.html

相关文章：

  • Java之包，抽象类，接口
  • Python并发编程——threading
  • MathType在Word中的安装与配置记录
  • 数据库Redis篇
  • 分布式光伏是什么意思？如何高效管理？
  • 数据库_SQLite3
  • 数据仓库设计-分层
  • 【数学二】线性代数-矩阵-分块矩阵及方阵的行列式
  • C++ 内存对齐：alignas 与 alignof
  • 24/11/4 算法笔记 蛇形卷积
  • redis：list列表命令和内部编码
  • 11.4工作笔记
  • 【AI+教育】一些记录@2024.11.04
  • 数据结构---链表实现栈
  • 内置函数【MySQL】
  • Java环境下配置环境(jar包)并连接mysql数据库
  • VisionPro —— CogPatInspectTool对比工具
  • 优选算法精品——双指针
  • 慢SQL优化方向
  • 今日 AI 简报｜AI 提示词管理、端到端语音处理、会议助手、大模型集合平台等前沿技术集中亮相
  • LeetCode 0633.平方数之和：模拟
  • Linux之初体验
  • 四、 问题发现（性能测试）
  • java常用框架介绍
  • PCL 点云DEM网格图
  • 泛微开发修炼之旅--54ecology移动端配置自定义列表