注册登录页面模板_拼多多_资讯

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; 
}
.container { 
    width: 300px;  您可以根据需要调整宽度 */  margin: auto;  padding: 20px;  border: 1px solid #ccc;  border-radius: 5px;  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);   } .form {  padding: 20px;  border: none;  border-radius: 5px;  box-shadow: none;  } .form-group {  margin-bottom: 15px;  } label {  display: block;  margin-bottom: 5px;  } input[type=’text’], input[type=’email’], input[type=’password’] {  width: 100%;  padding: 12px;  border: none;  border-radius: 5px;  box-shadow: none;  } button {  padding: 12px 20px;  border: none;  border-radius: 5px;  background-color: #4CAF50;  color: white;  cursor: pointer