CSS小案例：登錄表

今天我們來看一個簡單的CSS案例——登錄表。如何利用CSS樣式美化表單，讓表單看起來更加美觀、整潔。

<form>
<label>用戶名: <input type="text" name="username"></label>
<br>
<label>密碼: <input type="password" name="password"></label>
<br>
<button type="submit">登錄</button>
</form>

上述代碼是一個簡單的登錄表單，接下來我們就可以加上我們自己的CSS樣式，讓這個表單看起來更具有吸引力。

/* 設置輸入框的樣式 */
input[type="text"], input[type="password"] {
padding: 6px 10px;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 16px;
}
input[type="text"]:focus, input[type="password"]:focus {
outline: none;
border: 1px solid #3EB4FA;
box-shadow: 0 0 5px #3EB4FA;
}
/* 按鈕的樣式 */
button[type="submit"] {
padding: 6px 20px;
border-radius: 3px;
background-color: #3EB4FA;
color: #fff;
font-size: 16px;
border: none;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #2795D1;
}

上述代碼是我們自己添加的CSS樣式，讓表單看起來更加美觀、整潔。在這個例子中，我們使用了通過input[type="text"]和input[type="password"]來選擇文本輸入框，然后為其設置了樣式，包括圓角、邊框、字體大小等。當輸入框獲得焦點時，通過:focus偽類選擇器來調整其樣式。

對于按鈕，我們使用button[type="submit"]來選擇登錄按鈕并設置其樣式。按鈕會在懸停時更改為不同的顏色。

完成這個設計之后，你會發現，盡管這只是一個簡單的登錄表單，但是利用CSS樣式制作的表單還是會給人眼前一亮的感覺。