html
<title>注册登录界面</title>
<!-- 添加CSS样式表链接 -->
<link rel="stylesheet" type="text/css" href="styles.css">
<div class="container">
<div class="login-container">
<h2>登录</h2>
<!-- 登录表单 -->
<form action="/login" method="post">
<div class="input-container">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-container">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<!-- 登录按钮 -->
<button type="submit">登录</button>
</form>
</div> <!-- 结束登录容器 -->
<!-- 注册链接 -->
<p><a href="/register">还没有账号?立即注册</a></p>
<!-- 注册表单容器 -->
<div class="register-container"> <!-- 注意:这个容器默认隐藏,可以通过点击注册链接显示 -->
<h2>注册</h2> <!-- 注册表单内容同上,包括用户名、密码等输入字段和提交按钮 -->
</div> <!-- 结束注册容器 -->
</div> <!-- 结束容器 -->
对应的CSS样式表(styles.css)可能如下:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
.container { 宽度、边距等 */ }
.login-container, .register-container { 包括宽度、边距等 */ }
form { 包括边距等 */ }
input[type=text], input[type=password] { 包括边框、大小等 */ }
button { 包括背景色、字体颜色等 */ }