登錄表單是網站中常見的功能之一，用戶需要輸入用戶名和密碼進行身份驗證。在創建登錄表單時，選擇合適的 CSS 樣式可以讓表單更具可讀性和美觀性，以下是一個簡單的登錄表單的 CSS 樣式教程。
1. 表單元素
要創建登錄表單，我們需要使用 HTML 和 CSS 來創建表單元素。表單元素通常包含兩個部分：標題和文本框。
```html
2. CSS 樣式設計
在 CSS 樣式設計中，我們可以使用以下樣式來美化表單元素：
```css
color: #f00;
font-size: 24px;
text-align: center;
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
color: #fff;
text-align: center;
input[type="text"], input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
以上樣式設計可以讓表單元素更加美觀，包括 h2 標題，label 標簽，input 文本框，input 密碼框，input 提交按鈕等元素。其中，CSS 樣式還包括了顏色、邊框、字體等設置。
3. 實際使用
通過上述 CSS 樣式設計，我們可以將登錄表單美化后，使其更具可讀性和美觀性。當用戶輸入用戶名和密碼后，可以通過輸入框的樣式設置和提交按鈕的樣式設置，讓表單看起來更加友好和易于使用。
例如，我們可以使用以下樣式來美化輸入框：
```css
input[type="text"], input[type="password"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
這樣，當用戶輸入完用戶名和密碼后，輸入框就會變得更加美觀，同時也更加易于使用。
通過 CSS 樣式的設計，我們可以讓登錄表單更具可讀性和美觀性，從而提高用戶的體驗和滿意度。