注册登录界面模板

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"> <!-- 注意：这个容器默认隐藏，可以通过CSS或JS显示 -->

<h2>注册</h2> <!-- 注册表单代码与登录类似，包括用户名、密码等输入字段和提交按钮 -->

</div> <!-- 结束注册容器 -->

</div> <!-- 结束容器 -->

CSS样式表（styles.css）示例：

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

.container {

width: 300px;

padding: 16px; } .login-container, .register-container { } 还可以添加JavaScript来增强交互功能，例如表单验证、动态显示注册表单等，这个模板只是一个基本的起点，您可以根据您的需求进行扩展和改进。