在網站制作中，登錄頁面是一個必不可少的頁面。而為了讓網站的登錄界面更加美觀，我們需要運用 CSS 技術來優化其樣式。接下來，我們將為您介紹如何使用 CSS 制作一個簡單的登錄頁面。

<form>
<div class="form-input">
<label for="username">用戶名</label>
<input type="text" id="username">
</div>
<div class="form-input">
<label for="password">密碼</label>
<input type="password" id="password">
</div>
<input type="submit" value="登錄">
</form>

首先，我們需要添加一個表單，并添加一些表單輸入框。在這個例子中，我們添加了一個用于輸入用戶名的文本框以及一個用于輸入密碼的密碼框，還有一個用于提交的登錄按鈕。

下一步，我們需要使用 CSS 來優化這個頁面。我們將為表單添加一個類名“form-input”，以使其樣式更加清晰。

form {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #eee;
border-radius: 5px;
}
.form-input {
margin-bottom: 20px;
}
.form-input label {
display: block;
margin-bottom: 5px;
}
.form-input input[type="text"],
.form-input input[type="password"] {
width: 100%;
padding: 10px;
border: none;
border-bottom: 2px solid #888;
outline: none;
}
input[type="submit"] {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #555;
}

通過上面的樣式，我們可以將表單的寬度設置為400像素，使其居中；設置樣式填充及背景顏色，使其更加美觀；設置前景色和背景色之間的圓角，使其更加和諧。我們還可以改變文本框的樣式，使其外觀更加整齊，并在提交按鈕周圍添加一定的空間，以使其更加獨立。此外，我們還可以設置提交按鈕的顏色以及在鼠標懸停時的顏色，使其更加有吸引力。

至此，使用 CSS 制作簡單的登錄頁面的過程就結束了。希望這個例子能夠幫助您實現自己的網站登錄頁面，同時將其樣式優化至更高的水平。