最近在學習前端開發，想要練習一下CSS的布局和樣式，于是嘗試了一下模擬登錄的案例。

首先，需要一個HTML的基本結構，包括一個表單和用戶名、密碼的輸入框以及登錄按鈕，代碼如下：

<form>
<label>用戶名:</label>
<input type="text" name="username">
<br><br>
<label>密碼:</label>
<input type="password" name="password">
<br><br>
<button type="submit">登錄</button>
</form>

接下來，則需要使用CSS來進行樣式的設置。首先設置整個頁面的背景色為灰色，表單的寬度為350px，居中顯示，其次，對于輸入框和登錄按鈕的樣式也需要進行設置。代碼如下：

body {
background-color: #f2f2f2;
}
form {
width: 350px;
margin: 0 auto;
}
input[type="text"], input[type="password"], button[type="submit"] {
width: 100%;
height: 40px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
}
button[type="submit"] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}

最后，還需用CSS樣式設置輸入框獲得焦點時的描邊效果，同時還需要為錯誤提示信息設置樣式。代碼如下：

input[type="text"]:focus,
input[type="password"]:focus {
outline: 2px solid #4CAF50;
}
.error-msg {
color: red;
font-size: 14px;
margin-bottom: 10px;
}

通過以上的CSS設置，登錄界面已經完成。同時，如果進行表單驗證時，只需在表單的提交事件中進行驗證即可。

通過這個案例，我學習到了CSS的一些基本樣式和布局的知識，同時也理解了表單的基本結構和使用。