HTML5簡易登陸界面代碼
<!DOCTYPE html>
<html>
<head>
<title>登陸界面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f2f2f2;
}
.container {
margin: 50px auto;
max-width: 350px;
border: 1px solid #ccc;
background-color: #fff;
padding: 20px;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
.btn {
display: block;
width: 100%;
padding: 10px;
background-color: #007bff;
border: none;
color: #fff;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" placeholder="請輸入用戶名">
</div>
<div class="form-group">
<label for="password">密碼:</label>
<input type="password" id="password" name="password" placeholder="請輸入密碼">
</div>
<button class="btn">登陸</button>
</form>
</div>
</body>
</html>以上是一個簡單的HTML5登陸界面代碼，包括了表單的制作和樣式的設置。頁面背景顏色為淺灰色，登陸框為深灰色，圓角和陰影效果增加了頁面的美感。表單中包括了用戶名和密碼兩個字段，以及提交按鈕。輸入框和按鈕都設置了一定的邊距和圓角，使得頁面更加整齊。此代碼可以作為網站登陸界面的參考，也可以根據實際需求進行修改和定制，更好地滿足用戶需求。