使用 CSS 可以輕松地設計和美化網站頁面。其中，登錄頁面是網站常見的一個頁面，本文將介紹如何使用 CSS 來完成登錄頁面的設計。

/* 先設計登錄框的樣式 */
.login-box {
width: 400px;
height: 300px;
margin: 100px auto;
padding: 20px;
background-color: #f7f7f7;
box-shadow: 1px 1px 10px #cdcdcd;
}
/* 輸入框的樣式 */
input[type="text"], input[type="password"] {
width: 100%;
height: 30px;
padding: 5px;
margin: 10px 0;
border-radius: 3px;
border: 1px solid #ccc;
}
/* 登錄按鈕的樣式 */
.login-btn {
width: 100%;
height: 40px;
background-color: #4080ff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
/* 添加一個文章頭部，用于網站地址和登錄頁面標題 */
header {
width: 100%;
height: 60px;
background-color: #4080ff;
color: #fff;
text-align: center;
line-height: 60px;
}
/* 在 HTML 中添加對應的標簽，構建我們的登錄頁面 */
<header>我的網站 - 登錄頁</header>
<div class="login-box">
<input type="text" placeholder="請輸入用戶名">
<input type="password" placeholder="請輸入密碼">
<button class="login-btn">登錄</button>
</div>

在完成以上步驟后，你就可以擁有一個簡潔、美觀的登錄頁面了。當然，你還可以加入更多的 CSS 樣式來進一步美化頁面，比如更改背景色、字體顏色、字體大小等。