在前端開發中，登陸頁面是一個非常重要的頁面，因為它是用戶進入網站或應用程序的第一步。為了讓登陸頁面更加美觀和易于使用，可以使用CSS來設置登陸頁面的樣式。下面，我們就通過一些CSS技巧來創建一個簡單的登陸頁面。

/*設置整個頁面的背景顏色*/ 
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 14px;
}
/*登錄框的樣式*/
.login {
background-color: #fff;
border: 1px solid #ccc;
margin: 50px auto;
padding: 10px;
width: 300px;
}
/*設置表單的輸入框樣式*/
.form {
margin-top: 10px;
font-size:0;
}
.form label{
font-size:14px;
display:inline-block;
width:40%;
margin-right: 10px;
margin-bottom:10px;
box-sizing: border-box;
}
.form input[type="text"], .form input[type="password"] {
width: 56%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.form button {
background-color: #007FFF;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px;
margin-top: 20px;
cursor: pointer;
width:100%;
font-size:14px;
}
/*設置輸入框的hover效果*/
.form input[type="text"]:hover, .form input[type="password"]:hover {
border: 1px solid #007FFF;
}

上述代碼中，我們設置了整個頁面的背景色和字體大小，然后定義了登錄框的樣式，包括背景顏色、邊框、內邊距、寬度、邊距等。接著，我們通過設置表單的輸入框樣式，使表單元素排版更加緊湊，方便用戶輸入。我們還設置了提交按鈕的樣式，包括背景顏色、顏色、邊框、內邊距、外邊距和寬度等。最后，我們設置了輸入框的hover效果，當鼠標懸停在輸入框上時，邊框顏色改變，以提高用戶體驗。