CSS是前端開發中的重要一環，它可以讓網頁更加美觀和易于維護。在Web開發中，登陸窗口是一個常見的組件之一，下面我們就來看一下如何使用CSS來制作一個簡單的登陸窗口。

/* CSS代碼開始 */
.login-box {
width: 400px;
height: 300px;
margin: 100px auto;
border: 2px solid #ccc;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
.login-box h2 {
text-align: center;
padding: 20px 0;
font-size: 24px;
font-weight: normal;
margin-bottom: 30px;
}
.login-box input {
display: block;
border: none;
border-bottom: 2px solid #ccc;
width: 80%;
margin: 25px auto;
padding: 15px;
font-size: 16px;
outline: none;
}
.login-box button {
display: block;
width: 60%;
margin: 30px auto;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
padding: 15px;
font-size: 16px;
cursor: pointer;
}
/* CSS代碼結束 */

首先我們創建一個容器，可以用一個div元素來實現，給它添加一個類名.login-box，用CSS屬性設置它的寬度、高度、邊框樣式、背景顏色和邊框圓角。同時為了讓容器內的內容不會溢出，我們還要設置超出容器的部分隱藏。

接下來我們在容器內添加一個h2元素，用于顯示登陸窗口的標題，給它的樣式設置居中顯示、文字大小、字重和下邊距。

在容器內添加兩個input元素，分別用于輸入用戶名和密碼，設置它們的樣式為顯示為塊級元素、無邊框、下邊框樣式為實線、寬度為80%、左右居中、內邊距等。同時我們還可以添加一個:focus偽類來更改獲得焦點的狀態下的樣式。

最后我們在容器內添加一個button元素，用于提交登陸信息，設置它的樣式為顯示為塊級元素、寬度為60%、居中、背景顏色、文字顏色、無邊框、邊框圓角、內邊距和光標類型等。

通過以上代碼，我們就可以快速地創建一個簡單的登陸窗口，讓用戶可以輕松地進行登陸操作。當然，我們還可以通過更加豐富的CSS樣式和交互效果來優化登陸窗口的用戶體驗。