CSS（層疊樣式表）是一種標記語言，用于描述網頁的外觀和格式。在編寫網頁時，CSS可以用來控制網頁的背景，字體，布局等。在網頁登錄界面的設計中，CSS也發揮了重要的作用。

/* 下面是一個用CSS設計的登錄頁面的樣式文件 */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
margin: auto;
width: 400px;
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
h1 {
text-align: center;
color: #333333;
}
input[type=text], input[type=password] {
padding: 10px;
border-radius: 5px;
width: 100%;
border: none;
margin-bottom: 20px;
}
input[type=submit] {
background-color: #333333;
color: #ffffff;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #222222;
}
a {
color: #333333;
text-decoration: none;
}

上述代碼是一個使用CSS設計的簡單登錄頁面。其中，container類表示登錄框的樣式，內部包括了一個標題和兩個輸入框（分別用于輸入用戶名和密碼），以及一個登錄按鈕。在CSS中，可以通過類選擇器（以.開頭），來對特定的元素進行樣式設計。

我們對上述代碼進行簡單解釋：背景顏色為 #f2f2f2，在container的樣式中，通過margin屬性實現了水平居中，padding屬性表示登錄框與邊框之間的距離，background-color表示登錄框的背景顏色，border-radius表示登錄框的邊框圓角，box-shadow為登錄框增加了一個簡單的陰影效果。在輸入框和登錄按鈕的樣式中，使用了不同的CSS屬性，包括padding、width、border-radius、border、margin-bottom等等。其中，hover偽類表示鼠標懸停在登錄按鈕上時的樣式變化。

通過CSS樣式的設計，我們可以很容易地實現一個簡潔美觀的登錄界面，提升用戶的使用體驗。