現(xiàn)在的網(wǎng)站越來越重視用戶體驗(yàn)，登錄框的設(shè)計(jì)也成為了重點(diǎn)之一。在這里，我們將介紹如何使用CSS來設(shè)計(jì)一個(gè)簡單而美觀的登錄框。

html {
height: 100%;
}
body {
background-color: #f1f1f1;
font-family: Arial, sans-serif;
height: 100%;
}
.login-container {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
margin: auto;
max-width: 400px;
padding: 20px;
}
.login-header {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.login-form label {
display: block;
margin-bottom: 10px;
}
.login-form input[type="text"],
.login-form input[type="password"] {
border: 1px solid #ddd;
display: block;
font-size: 16px;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}
.login-form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px;
width: 100%;
}
.login-form input[type="submit"]:hover {
background-color: #3e8e41;
}
.login-form a {
color: #337ab7;
text-decoration: none;
}
.login-form a:hover {
text-decoration: underline;
}

以上就是一個(gè)簡單的登錄框的CSS代碼。使用這份代碼可以制作出一個(gè)美觀而實(shí)用的登錄框，提高用戶的體驗(yàn)。同時(shí)我們要注意到，在編寫CSS的時(shí)候，要注意各個(gè)元素之間的關(guān)系，為了保證網(wǎng)站整體的結(jié)構(gòu)布局的合理性。