html
<title>注册登录页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
<div class="container">
<h2>注册登录</h2>
<form id="loginForm" action="/login" method="post"> <!-- 登录表单 -->
<div class="form-group">
<label for="username">用户名:</label> <!-- 可以添加占位符属性 --> <!-- <input type="text" id="username" placeholder="用户名"> --> <!-- 添加输入框 --> <!-- <input type="password" id="password" placeholder="密码"> --> <!-- 密码输入框 --> <!-- <input type="submit" value="登录"> --> <!-- 登录按钮 --> <!-- </form> --> <!-- 登录表单结束 --> <!-- 注册表单部分可以类似添加 --> <!-- </div> --> <!-- 结束容器 --> <!-- 添加注册按钮 --> <!-- <button onclick="toggleForm()">注册</button> --> <!-- 注册按钮点击事件可以切换显示注册表单或登录表单 --> <!-- 添加注册表单 --> <!-- <form id="registerForm" style="display:none;"> --> <!-- 注册表单样式设置为隐藏状态，通过JS切换显示状态 --> <!-- 注册表单内容同上，只是提交地址和表单名称不同 --> <!-- </form> --> <!-- 注册表单结束 --> </div> <!-- 结束容器 --> </body> <!-- 结束HTML主体部分 --> </html> <!-- 结束HTML文档 -->```html<!DOCTYPE html>n<html>n<head>n <title>注册登录页面</title>n <style>n n body {n font-family: Arial, sans-serif;n background-color: #f4f4f4;n }nntttttttttttttttttntt<!-- CSS样式可以根据需要进行自定义 -->ntt.container {ntt max-width: 400px;ntt margin: 0 auto;ntt padding: 20px;ntt background-color: #fff;ntt border-radius: 5px;ntt box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);nt}nntt<!-- 表头居中显示 -->ntth2 {ntt text-align: center;n}nnt<!-- 每个表单组之间有一定的间距 -->nt.form-group {nt margin-bottom: 20px;n}nn<!-- 标签居中显示并距离下方文本有一定间距 -->nlabel {n display: block;n margin-bottom:
