在網站開發中，登錄模塊是一項非常基礎的功能，而今天我們就來學習如何使用純CSS來制作登錄模塊。

首先，我們需要一個包含用戶名和密碼輸入框的登錄界面。這里我們設置一個寬度為400px的容器，內部分別設置用戶名和密碼輸入框、登錄按鈕以及“記住密碼”和“忘記密碼”的選項。

<div class="login-box">
<input type="text" placeholder="請輸入用戶名"/>
<input type="password" placeholder="請輸入密碼">
<div class="remember-box">
<input type="checkbox" id="remember" />
<label for="remember">記住密碼</label>
</div>
<div class="forget-box">
<label><a href="#">忘記密碼</a></label>
</div>
<button>登錄</button>
</div>

接下來，我們需要對輸入框和按鈕進行樣式的設置。我們可以用CSS3的漸變效果來為輸入框和按鈕添加背景色，使整個登錄框看起來更具有現代感。

.login-box input[type="text"], .login-box input[type="password"] {
width: 100%;
height: 40px;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
}
.login-box button {
width: 100%;
height: 40px;
margin-top: 20px;
background-image: linear-gradient(to bottom, #4CAF50, #3E8E41);
color: #ffffff;
border-radius: 5px;
border: none;
box-shadow: 0px 5px 0px #388E3C;
cursor: pointer;
}

最后，我們還需要設計整個登錄框的外觀，可以為容器添加背景圖和陰影效果，以及設置圓角等。

.login-box {
width: 400px;
margin: auto;
margin-top: 100px;
text-align: center;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
padding: 40px;
}
.login-box label a {
color: #2196F3;
}

通過上述步驟，我們已經成功地用純CSS制作了一個基本的登錄框。是不是很簡單呢？當然，如果你想讓登錄框更美觀，也可以根據需要來調整樣式。