【HTML | CSS | JS】耗时一下午，整理出了一个精美的响应式登陆注册表单

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

以下是一个简化的响应式登录注册表单的HTML和CSS代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login/Register Form</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 24px;
    background-color: #F1F1F1;
  }
 
  .form-container {
    max-width: 300px;
    margin: auto;
    padding: 20px;
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
 
  input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #DDD;
    border-radius: 5px;
  }
 
  input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #509839;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
 
  input[type="submit"]:hover {
    background-color: #3B8020;
  }
 
  .tab {
    display: none;
  }
 
  #login:checked + .tab-content .login,
  #register:checked + .tab-content .register {
    display: block;
  }
</style>
</head>
<body>
 
<div class="form-container">
  <label for="login">Login</label>
  <input type="radio" name="tab" id="login" checked>
  <label for="register">Register</label>
  <input type="radio" name="tab" id="register">
  <div class="tab-content">
    <div class="login">
      <form action="/submit-login" method="post">
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <input type="submit" value="Login">
      </form>
    </div>
    <div class="register">
      <form action="/submit-register" method="post">
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <input type="email" placeholder="Email" required>
        <input type="submit" value="Register">
      </form>
    </div>
  </div>
</div>
 
</body>
</html>

这段代码提供了一个简单的登录注册表单，使用CSS的:checked伪类实现无JS的切换效果。表单采用响应式设计，在不同屏幕尺寸上都能良好显示。

【HTML | CSS | JS】耗时一下午，整理出了一个精美的响应式登陆注册表单

评论已关闭

推荐阅读