CSS是前端開(kāi)發(fā)中重要的一環(huán)，它可以讓網(wǎng)站看起來(lái)更加美觀、有吸引力。登錄注冊(cè)頁(yè)面是一個(gè)網(wǎng)站不可或缺的組成部分，也是用戶第一次接觸網(wǎng)站的重要頁(yè)面，因此需要美化。

// 登錄框美化
.login-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px #888888;
padding: 30px;
max-width: 400px;
margin: auto;
}
.input-field {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
}
.input-field:focus {
outline: none;
}
.btn {
background-color: #1abc9c;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.btn:hover {
background-color: #16a085;
}
// 注冊(cè)框美化
.register-form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px #888888;
padding: 30px;
max-width: 400px;
margin: auto;
}
.register-form h2 {
font-size: 28px;
margin-bottom: 20px;
text-align: center;
}
.register-form label {
font-size: 16px;
display: block;
margin-bottom: 10px;
}
.register-form .form-group {
margin-bottom: 20px;
}
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-bottom: 1px solid #ccc;
font-size: 16px;
}
.register-form input[type="text"]:focus,
.register-form input[type="email"]:focus,
.register-form input[type="password"]:focus {
outline: none;
}
.register-form input[type="submit"] {
background-color: #1abc9c;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
}
.register-form input[type="submit"]:hover {
background-color: #16a085;
}

以上是登錄注冊(cè)頁(yè)面CSS美化的代碼示例，通過(guò)CSS樣式可以讓登錄注冊(cè)頁(yè)面更加美觀和易于交互，給用戶留下好印象，提高用戶粘性。