HTML部分。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册/登录页面</title>
<link rel="stylesheet" href="styles.css"> <!-- 链接到您的CSS文件 -->
</head>
<body>
<div class="container">
<h2>注册/登录</h2>
<form id="loginForm" class="form">
<!-- 登录表单 -->
<div class="form-group">
<label for="loginUsername">用户名:</label>
<input type="text" id="loginUsername" name="username">
</div>
<div class="form-group">
<label for="loginPassword">密码:</label>
<input type="password" id="loginPassword" name="password">
</div>
<button type="submit">登录</button>
</form>
<!-- 注册表单 -->
<form id="registerForm" class="form hidden"> <!-- 使用CSS隐藏表单 -->
<div class="form-group">
<label for="registerUsername">用户名:</label>
<input type="text" id="registerUsername" name="username">
</div>
<div class="form-group">
<label for="registerEmail">邮箱:</label>
<input type="email" id="registerEmail" name="email">
</div>
<div class="form-group">
<label for="registerPassword">密码:</label>
<input type="password" id="registerPassword" name="password">
</div>
<button type="submit">注册</button> <!-- 使用JavaScript处理表单提交 -->
</form>
</div> <!-- 结束容器 -->
</body>
</html>CSS部分（styles.css）：
这是一个简单的样式表，用于美化页面和布局，您可以根据需要调整样式，此样式表假设您使用了一个容器（container）来包裹整个表单内容，这个容器用于居中表单并添加一些边距，您可以根据需要调整这些样式，我们使用了.hidden类来隐藏注册表单，直到用户点击注册按钮时才显示，这可以通过JavaScript实现，以下是一个基本的样式表示例：
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 30%; 您可以根据需要调整这个值 */ 宽度 */ margin: auto; padding: 20px; background-color: #f4f4f4; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .form { padding: 20px; border: 1px solid #ccc; border-radius: 5px; } .form-group { margin-bottom: 15px; } .hidden { display: none; } input[type=text], input[type=email], input[type=password] { padding: 10px; border: 1px solid #ccc; border-radius: 5px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } button:
