登錄頁面是網站或應用程序中的關鍵頁面之一。在這個頁面上，用戶可以輸入他們的用戶名和密碼來訪問各自的賬戶。這篇文章將討論如何使用CSS來設計一個漂亮，易于使用的登錄頁面。

/* CSS代碼 */
/* 為登錄頁面添加樣式，包括背景顏色和字體 */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
/* 確定登錄頁面的容器大小 */
.container {
max-width: 400px;
margin: auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.3);
}
/* 設置登錄頁面的表單樣式 */
form {
display: flex;
flex-direction: column;
}
/* 添加輸入框的樣式 */
input[type=text], input[type=password] {
padding: 10px;
margin: 10px 0px;
border-radius: 5px;
border: none;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
/* 定義提交按鈕的樣式 */
button[type=submit] {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
/* 鼠標懸停時修改提交按鈕的樣式 */
button[type=submit]:hover {
background-color: #3e8e41;
}
/* 添加標題的樣式 */
h2 {
text-align: center;
font-size: 28px;
margin-bottom: 20px;
}
/* 定義錯誤提示的樣式 */
.error {
color: red;
font-size: 14px;
margin-top: 5px;
}

通過以上CSS代碼，我們可以定義登錄頁面的容器大小、背景顏色、輸入框、提交按鈕、錯誤提示等元素的樣式。諸如此類的樣式可讓登錄頁面看起來更加漂亮且易于使用，同時提高了用戶體驗。