使用html+css+js实现完整的登录注册页面

在这篇博客中，我们将讨论如何使用简单的 HTML 和 CSS 构建一个登录与注册页面。这个页面包含两个主要部分：登录界面和注册界面。我们还会展示如何通过 JavaScript 切换这两个部分的显示状态。

页面结构

我们将创建一个页面，其中包含两个主要的 div 元素：一个用于登录，另一个用于注册。默认情况下，登录部分会显示，注册部分会隐藏。用户可以通过点击按钮在这两个部分之间切换。

HTML 代码

以下是页面的 HTML 结构：

<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 action=""><div style="width: 400px;"><div><div style="display: flex;"><i class="iconPhone distant1"></i><input class="content" type="phone" placeholder="手机号" required></div><div style="display: flex;"><i class="iconPassword distant1"></i><input class="content" type="password" placeholder="密码" required></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;" /><spanstyle="font-size: 14px;vertical-align:top;padding-left: 5px;">记住密码</span></span><span style="float: right;font-size: 15px;color: rgb(74, 159, 244);">忘记密码？</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: #74b9ff;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>

JavaScript 代码

为了实现登录和注册界面的切换，我们需要一些 JavaScript 代码。以下是实现这些功能的 JavaScript 函数：

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("注册成功！")}

 CSS 样式

接下来，我们需要为页面添加样式，以确保它在视觉上是吸引人的。将以下 CSS 代码保存在 styles.css 文件中：

* {margin: 0;padding: 0;box-sizing: border-box;}.box {width: 900px;height: 500px;background-color: rgba(255, 255, 255, 0.7);border-radius: 10px;margin: 10% auto;box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1);position: relative;z-index: 1;}.box .left {width: 35%;height: 100%;position: absolute;z-index: 2;background-image: url(1.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: #74b9ff;font-size: 50px;margin-top: 70px;}.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 #74b9ff;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, #0984e3, #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(img/phone.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.iconPassword {display: inline-block;height: 20px;width: 20px;background-image: url(img/password.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.iconUser {display: inline-block;height: 20px;width: 20px;background-image: url(img/user.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.distant2 {margin-top: 35px;}.distant1 {margin-top: 50px;}

 完整代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页面</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.box {width: 900px;height: 500px;background-color: rgba(255, 255, 255, 0.7);border-radius: 10px;margin: 10% auto;box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1);position: relative;z-index: 1;}.box .left {width: 35%;height: 100%;position: absolute;z-index: 2;background-image: url(1.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: #74b9ff;font-size: 50px;margin-top: 70px;}.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 #74b9ff;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, #0984e3, #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(img/phone.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.iconPassword {display: inline-block;height: 20px;width: 20px;background-image: url(img/password.svg);background-size: cover;/*这里放置图标的绝对路径*/background-repeat: no-repeat;}.iconUser {display: inline-block;height: 20px;width: 20px;background-image: url(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><link rel="icon" href="man.png">
</head><body><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 action=""><div style="width: 400px;"><div><div style="display: flex;"><i class="iconPhone distant1"></i><input class="content" type="phone" placeholder="手机号" required></div><div style="display: flex;"><i class="iconPassword distant1"></i><input class="content" type="password" placeholder="密码" required></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;" /><spanstyle="font-size: 14px;vertical-align:top;padding-left: 5px;">记住密码</span></span><span style="float: right;font-size: 15px;color: rgb(74, 159, 244);">忘记密码？</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: #74b9ff;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>
</body></html>

实现效果

总结

在本教程中，我们创建了一个包含登录和注册功能的基本页面。通过 HTML 定义页面结构，使用 CSS 进行样式设计，并通过 JavaScript 实现页面功能，我们构建了一个功能完备的用户界面。这种基础的设计可以根据需要进一步扩展，例如添加表单验证、与后端 API 集成等。

希望这个详细的教程对您有所帮助！如果您有任何问题或建议，请在评论区留言，我们将尽快回复。