這里介紹一個簡單而實用的用戶登錄窗口CSS模板。

body {
background-image: url('bg.jpg');
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 20px;
background-color: #f1f1f1;
}
.title {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
font-size: 18px;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.btn {
background-color: #4CAF50;
color: #fff;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.btn:hover {
background-color: #45a049;
}

這個模板使用了一個背景圖片作為背景，采用了常用的Arial字體。

其中.container為整個登錄框的容器，使用position:absolute定位至瀏覽器中央。.title為登錄框的標題，使用text-align:center使其居中對齊，使用margin-bottom屬性為下方留出一定的空白。

使用.input-group為每一組表單項包裝了一下，使用label標簽展示表單項的名稱，使用input標簽展示表單項的輸入框。

.btn為登錄按鈕，使用cursor:pointer使鼠標在按鈕上移動時呈現手形圖標，使用:hover偽類對按鈕進行了一定的交互效果。

使用這個模板可以快速搭建一個簡單、美觀、易用的用戶登錄窗口。只需填寫表單項的名稱與輸入框的類型即可輕松實現登錄界面。