當我們訪問一個網站時，我們通常需要先輸入用戶名和密碼才能登錄。這個過程需要一個登入頁面，而登入頁面中的css代碼則是用來控制頁面外觀的。以下是登入頁面的css代碼：

/* 設置頁面的背景顏色 */
body {
background-color: #f0f0f0;
}
/* 將頁面分為兩部分，一部分是登錄框，一部分是背景 */
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
width: 400px;
height: 400px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* 設置登錄框的樣式 */
.form {
width: 80%;
}
/* 設置輸入框的樣式 */
.input {
display: block;
margin-bottom: 20px;
width: 100%;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
/* 設置登錄按鈕的樣式 */
.button {
display: block;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s ease;
}
/* 當鼠標移動到按鈕上時，改變按鈕的顏色 */
.button:hover {
background-color: #3e8e41;
}

以上代碼的作用是設置頁面的背景顏色、分割頁面為兩部分、設置登錄框和其中的輸入框和登錄按鈕的樣式。使用這些css代碼，我們可以使登錄頁面看起來更加漂亮，并且讓用戶更愿意使用我們的網站。