html做一個登錄註冊頁面，用 HTML 和 CSS 實現

Cloud computing and code 2023年05月15日 19:08 961 visitor

html做一個登錄註冊頁面，下面是一個簡單的登錄註冊頁面示例代碼，使用 HTML 和 CSS 實現頁面樣式和布局。

html做一個登錄註冊頁面，用 HTML 和 CSS 實現第1张

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>登錄/註冊</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
    }
    form {
      background-color: #fff;
      padding: 20px;
      margin: 10px;
      width: 400px;
      border-radius: 10px;
    }
    h1 {
      margin-top: 0;
    }
    label {
      display: block;
      margin-top: 10px;
    }
    input[type="text"],
    input[type="password"] {
      padding: 5px;
      border-radius: 2px;
      border: none;
      width: 100%;
      margin-top: 5px;
    }
    button[type="submit"] {
      background-color: #333;
      color: #fff;
      padding: 10px;
      border: none;
      border-radius: 2px;
      width: 100%;
      margin-top: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form>
    <h1>登錄</h1>
    <label>用戶名:</label>
    <input type="text" placeholder="請輸入用戶名">
    <label>密碼:</label>
    <input type="password" placeholder="請輸入密碼">
    <button type="submit">登錄</button>
  </form>
  <form>
    <h1>註冊</h1>
    <label>用戶名:</label>
    <input type="text" placeholder="請輸入用戶名">
    <label>密碼:</label>
    <input type="password" placeholder="請輸入密碼">
    <label>確認密碼:</label>
    <input type="password" placeholder="請再次輸入密碼">
    <button type="submit">註冊</button>
  </form>
</body>
</html>

代碼元素解釋：

- `<!DOCTYPE html>`：文檔類型聲明，告訴瀏覽器當前文檔使用的是 HTML5 規範。

- `<html>`：HTML 頁面的根元素，包含整個頁面的內容。

- `<head>`：頁面頭部，包含元數據和其他引用信息。

- `<meta>`：用於設置頁面的元數據，如字符集、關鍵詞等。

- `<title>`：頁面標題，顯示在瀏覽器的標簽欄上。

- `<style>`：用於設置頁面的樣式和布局。

- `<body>`：頁面的主要內容部分。

- `<form>`：頁面表單元素，用於收集用戶信息。

- `<h1>`：標頭元素，用於顯示標題文本。

- `<label>`：表單標註元素，用於標註表單項。

- `<input>`：表單輸入元素，提供給用戶輸入。