在網站的開發過程中，用戶登錄和注冊功能是必不可少的。其中，美觀、易用和安全性是網站登錄和注冊頁面設計的重點。因此，CSS在實現這兩個功能時起到了關鍵的作用。

/*登錄頁面樣式*/
.login-container{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.login-box{
width: 400px;
height: 500px;
padding: 30px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
}
.login-box h2{
text-align: center;
margin-bottom: 30px;
font-size: 24px;
}
.login-box input{
width: 100%;
height: 40px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
padding-left: 10px;
font-size: 16px;
}
.login-box button{
width: 100%;
height: 40px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.login-box button:hover{
background-color: #0269d5;
}
.login-box .register-link{
text-align: center;
margin-top: 20px;
font-size: 14px;
}
.login-box .register-link a{
color: #007bff;
}
/*注冊頁面樣式*/
.register-container{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.register-box{
width: 400px;
height: 600px;
padding: 30px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
}
.register-box h2{
text-align: center;
margin-bottom: 30px;
font-size: 24px;
}
.register-box input{
width: 100%;
height: 40px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
padding-left: 10px;
font-size: 16px;
}
.register-box button{
width: 100%;
height: 40px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.register-box button:hover{
background-color: #0269d5;
}
.register-box .login-link{
text-align: center;
margin-top: 20px;
font-size: 14px;
}
.register-box .login-link a{
color: #007bff;
}

以上樣式代碼實現了一個簡單的登錄和注冊頁面。登錄頁面由一個登錄框組成，使用了flex布局使其水平垂直居中。注冊頁面同理，不同的是高度和內部元素不同。通過CSS樣式的優化，使其即美觀又易于使用。此外，在賬號密碼輸入框處加入了邊框，增加了網站登錄和注冊頁面的安全性，以確保用戶輸入信息的合法性。