隨著互聯網的發展，登錄界面已經成為很多網站必不可少的一個元素。在網頁開發中，CSS是一個非常重要的工具，也可以幫助我們制作出漂亮的登錄界面。下面我們將通過代碼示例演示如何使用CSS來制作一個簡單的登錄界面。

//HTML代碼
<div class="login">
<h2>登錄</h2>
<form>
<label>用戶名</label>
<input type="text" name="username">
<label>密碼</label>
<input type="password" name="password">
<button type="submit">登錄</button>
</form>
</div>
//CSS樣式
.login {
width: 300px;
margin: 0 auto;
text-align: center;
}
h2 {
font-size: 24px;
padding: 10px 0;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}
form {
text-align: left;
}
label {
display: inline-block;
width: 60px;
font-size: 16px;
}
input {
width: 200px;
padding: 5px;
margin-bottom: 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
button {
width: 100%;
padding: 10px;
border-radius: 3px;
border: none;
color: #fff;
background-color: #007bff;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0062cc;
}

我們首先定義了一個class為“login”的div來包裹登錄框，并設置該div居中顯示。然后使用h2標簽來設置登錄框的標題，并樣式化該標簽。接著使用form標簽來包裹輸入框和登錄按鈕，并設置標簽內元素的樣式，包括標簽間距、字體大小、輸入框寬度和邊框等。最后定義了登錄按鈕的hover效果。

以上代碼示例是一個簡單的登錄框，但通過CSS的樣式化處理，已經變得簡潔美觀，同時也具備了基本的功能。實際上，登錄框的樣式化還有很多種方法，開發者可以根據實際需要靈活運用多種CSS屬性和技巧，來制作出各種各樣的登錄框。