設計HTML登錄頁面的代碼需要仔細考慮各個元素的排布和樣式，以下是一個基本的例子：
<html>
<head>
<title>登錄頁面</title>
<style>
/* 樣式表 */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#container {
margin: 0 auto;
padding: 20px;
background-color: #fff;
width: 400px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 16px;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #337ab7;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<h1>登錄</h1>
<form action="login.php" method="post">
<p>
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
</p>
<p>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
</p>
<p>
<input type="submit" value="登錄">
</p>
</form>
</div>
</body>
</html>以上的HTML代碼使用了CSS來控制樣式，包括對頁面背景的設置，容器的樣式，標簽和輸入框的排布和樣式，以及登錄按鈕的樣式和行為。需要注意的是，輸入框和登錄按鈕都使用了required屬性來確保用戶必須填寫完整才能提交登錄請求。在實際應用中，需要將form的action屬性設置為正確的服務器接口地址，并且在后臺進行用戶認證和處理。上一篇dockerntpd
下一篇dockerocean