標題：使用 CSS 實現登錄頁面設計

登錄頁面是網站中非常重要的一個頁面，需要為用戶提供清晰的用戶名和密碼輸入框以及一個友好的登錄按鈕。本文將介紹如何使用 CSS 來設計一個登錄頁面，包括輸入框和按鈕的布局、樣式和響應式設計。

CSS 是一種用于設計和布局網頁的技術，可以幫助網站開發人員創建具有清晰、美觀和易于使用的用戶界面。在登錄頁面中，CSS 可以幫助實現以下功能：

1. 設計輸入框和按鈕的布局和樣式。

2. 響應式設計，使不同的設備都能正確地顯示頁面。

3. 為登錄按鈕添加樣式，使其看起來更加友好和易于使用。

下面是一個簡單的登錄頁面的 CSS 樣式設計：

HTML 代碼：

<div class="login-container">

<div class="form-group">

<label for="username">用戶名：</label>

<input type="text" id="username" class="form-control" required>

</div>

<div class="form-group">

<label for="password">密碼：</label>

<input type="password" id="password" class="form-control" required>

</div>

<div class="form-group">

<button type="submit" class="btn btn-primary btn-block">登錄</button>

</div>

</div>

CSS 代碼：

.login-container {

max-width: 400px;

margin: 0 auto;

padding: 20px;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0,0,0,0.3);

.form-control {

width: 100%;

display: block;

margin-bottom: 10px;

.btn {

background-color: #4CAF50;

color: #fff;

border: none;

border-radius: 5px;

padding: 10px 20px;

cursor: pointer;

transition: background-color 0.3s ease;

.btn:hover {

background-color: #3e8e41;

以上代碼中，使用 CSS 設計了一個具有清晰布局和樣式的登錄頁面。輸入框和按鈕都被賦予了類名，并使用 CSS 的偽類實現了不同的樣式效果。例如，輸入框使用了 `.form-control` 類名，按鈕使用了 `.btn` 類名，并添加了一些 CSS 動畫效果，使其看起來更加友好和易于使用。

CSS 還可以用于響應式設計，使登錄頁面在不同的設備上都能正確地顯示。例如，對于移動設備，可以使用 `@media screen and (max-width: 768px) { ... }` 語句來定義樣式，確保登錄按鈕和輸入框都能正確顯示。

總之，使用 CSS 可以設計出一個清晰、美觀和易于使用的登錄頁面，幫助網站開發人員為用戶提供一個更好的使用體驗。