登錄頁面是網站中極其重要的一個頁面，它是用戶進入網站的第一步。在這個頁面中，我們可以使用HTML和CSS來實現一個用戶友好并且漂亮的登錄界面。
首先，我們需要編寫HTML代碼來搭建我們的登錄頁面。我們可以使用form標簽來創建一個表單，這個表單中包含輸入框和提交按鈕。下面是一個簡單的HTML代碼片段：
<form> <label>用戶名: </label> <input type="text" name="username"> <br><br> <label>密碼: </label> <input type="password" name="password"> <br><br> <input type="submit" value="提交"> </form>
上面的代碼片段中，我們創建了一個簡單的表單，并在表單中添加了一個用戶名輸入框和一個密碼輸入框。為了讓頁面更加易讀，在文本標簽中添加了相應的標簽。
接下來，我們需要使用CSS來美化我們的登錄頁面。我們可以使用CSS來更改輸入框的大小、顏色、邊框等屬性。下面是一個簡單的CSS代碼片段：
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}在上述CSS代碼片段中，我們使用了input選擇器來選擇所有輸入框，并根據需要更改它們的屬性。例如，我們更改了輸入框的寬度、內邊距、外邊距、邊框樣式，以及輸入框的框盒模型。我們還改變了提交按鈕的顏色，并添加了鼠標懸停效果。
最后，我們需要將HTML代碼和CSS代碼結合起來，以實現我們的登錄頁面。下面是完整的HTML和CSS代碼：
<html>
<head>
<title>登錄頁面</title>
<style>
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form>
<label>用戶名: </label>
<input type="text" name="username">
<br><br>
<label>密碼: </label>
<input type="password" name="password">
<br><br>
<input type="submit" value="提交">
</form>
</body>
</html>下一篇通知欄css