CSS 是網站設計中非常重要的一部分。在網站中，登陸框是必不可少的一個功能模塊。下面我們來講一下如何使用 CSS 來寫出一個漂亮的登陸框。

.login {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 0 auto;
padding-top: 30px;
position: relative;
}
.login h2 {
font-size: 28px;
font-weight: 500;
text-align: center;
margin-bottom: 30px;
}
.login input[type="text"],
.login input[type="password"] {
width: 300px;
height: 40px;
border: 1px solid #ccc;
margin: 0 auto;
display: block;
margin-bottom: 20px;
padding-left: 10px;
font-size: 18px;
}
.login button {
width: 140px;
height: 40px;
border: none;
border-radius: 20px;
font-size: 20px;
color: #fff;
background: #0099ff;
cursor: pointer;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -70px;
}
.login button:hover {
background: #4078c0;
}
.login input:focus {
outline: none;
border-color: #0099ff;
box-shadow: 0px 0px 4px #0099ff;
}

如上面的代碼所示，登陸框的樣式主要用了盒模型布局、定位和表單元素樣式等 CSS 屬性。其中，width控制寬度，height控制高度，border控制外邊框，position控制定位，font-size控制字體大小等。最關鍵的是其中使用了偽類選擇器:focus來控制元素獲得焦點時的樣式，讓整個登陸框看起來更為美觀。

通過以上的 CSS 樣式，網站管理員就可以制作出一個簡單、美觀而富有交互性的登陸框，進而提升用戶體驗和安全性，對網站運營與推廣有著重要的意義。