CSS中的登錄代碼怎么寫

在CSS中編寫登錄代碼，主要涉及到的是HTML和CSS的結(jié)合使用，我們需要使用HTML來創(chuàng)建登錄表單的結(jié)構(gòu)，然后使用CSS來美化這個(gè)表單。

以下是一個(gè)簡單的登錄代碼示例：

HTML部分：

<div class="login-container">
  <h2>登錄</h2>
  <form action="/login" method="post">
    <div class="input-group">
      <label for="username">用戶名</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div class="input-group">
      <label for="password">密碼</label>
      <input type="password" id="password" name="password" required>
    </div>
    <div class="input-group">
      <label for="remember">記住我</label>
      <input type="checkbox" id="remember" name="remember">
    </div>
    <div class="input-group">
      <button type="submit" class="login-btn">登錄</button>
    </div>
  </form>
  <p class="forgot-password">忘記密碼？</p>
  <p class="register-link">注冊新用戶</p>
</div>

CSS部分：

.login-container {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.input-group {
  margin-bottom: 10px;
}
.login-btn {
  width: 100%;
  height: 30px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.forgot-password, .register-link {
  text-align: center;
  margin-top: 10px;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)登錄表單，包含用戶名、密碼和記住我三個(gè)輸入字段，以及一個(gè)登錄按鈕，我們還提供了忘記密碼和注冊新用戶的鏈接，通過CSS，我們美化了這個(gè)表單，使其更加符合用戶體驗(yàn)。