注册登录界面模板

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 { 包括背景色、字体颜色等 */ }