CSS和HTML是現代Web開發中必不可少的技術。在很多網站中，登錄功能是必備的，需要使用CSS和HTML開發相應的頁面元素。下面我們將為大家介紹如何使用CSS和HTML編寫登錄頁面的代碼。
<!DOCTYPE html>
<html>
<head>
<title>登錄頁面</title>
<style>
.container {
margin-top: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
text-align: left;
margin-bottom: 5px;
}
.input-group input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
font-size: 16px;
background-color: #f2f2f2;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn {
background-color: #4CAF50;
color: white;
padding: 15px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
.btn:hover {
background-color: #3e8e41;
}
.error {
color: #f00;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>登錄頁面</h1>
<form action="" method="post">
<div class="input-group">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" placeholder="請輸入用戶名">
</div>
<div class="input-group">
<label for="password">密碼:</label>
<input type="password" id="password" name="password" placeholder="請輸入密碼">
</div>
<div class="error"></div>
<button type="submit" class="btn">登錄</button>
</form>
</div>
</body>
</html>上面的代碼中，我們首先定義了一個.container類，使用flex布局來讓頁面垂直居中顯示登錄表單。接下來，我們定義了.input-group類，用于包含表單中的每個輸入框和標簽。使用label元素來關聯輸入框和標簽，使得用戶可以點擊標簽來聚焦到相應的輸入框。
我們還定義了.btn類，用于顯示登錄按鈕。這個按鈕在鼠標懸停時會改變背景顏色，增加一點視覺效果。
代碼中還包含一個.error類，在用戶輸入錯誤的用戶名或密碼時會顯示相關提示信息。這個類只需要在表單后面添加一個空的div元素即可。
通過這些CSS和HTML代碼，我們可以輕松地創建一個美觀、易用的登錄頁面。希望這篇文章對正在學習Web開發的朋友有所幫助。