登陸注冊是很多網(wǎng)站必須要有的功能，而一個美觀又符合用戶體驗的登陸注冊頁面更是非常重要。在這里，我們將介紹如何使用純CSS來創(chuàng)建一個簡單的登陸注冊頁面。

首先，我們需要在HTML文檔中創(chuàng)建一個登陸和注冊的表單。可以按照以下代碼創(chuàng)建：

<form class="login-form">
<h2>登陸</h2>
<input type="text" placeholder="用戶名">
<input type="password" placeholder="密碼">
<button class="btn">登陸</button>
</form>
<form class="signup-form">
<h2>注冊</h2>
<input type="text" placeholder="用戶名">
<input type="password" placeholder="密碼">
<input type="password" placeholder="確認密碼">
<button class="btn">注冊</button>
</form>

接下來，我們可以使用CSS來為表單添加樣式。我們可以使用CSS3中的漸變效果，為表單添加簡單而美觀的背景。可以按照以下代碼實現(xiàn)：

.login-form, .signup-form {
width: 400px;
margin: 0 auto;
background: linear-gradient(#5e5e5e, #c9c9c9);
padding: 20px;
border-radius: 10px;
}
.login-form h2, .signup-form h2 {
text-align: center;
margin-bottom: 20px;
color: #fff;
}
.login-form input[type="text"], .login-form input[type="password"], .signup-form input[type="text"], .signup-form input[type="password"], .signup-form input[type="password"]:focus{
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
outline: none;
}
.login-form input[type="submit"], .signup-form input[type="submit"]{
display: block;
width: 50%;
margin: 0 auto;
padding: 10px;
border-radius: 5px;
border: none;
background: #4E9CAF;
color: #fff;
}
.btn:hover {
cursor: pointer;
background: #4691A4;
}

通過添加CSS樣式，我們可以輕松地創(chuàng)建一個簡單的登陸注冊頁面。接下來，還可以根據(jù)需求、設(shè)計、場景等不同的要求進一步優(yōu)化和擴展。