/* 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样式和交互效果来优化登陆窗口的用户体验。