HTML5登錄簡單的界面代碼下載
歡迎大家來到本篇文章，本文將為大家提供一個HTML5簡單的登錄界面代碼下載。該代碼適用于初學者，界面簡潔明了，操作簡單，適用于各種網(wǎng)站的登錄頁面。
下面將為大家提供該代碼的詳細內(nèi)容：
<!DOCTYPE html><html><head><title>HTML5簡單的登錄界面</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="style.css"></head><body><form action="/" method="post"><h2>請輸入賬號密碼</h2><input type="text" id="username" name="username" placeholder="請輸入賬號"><input type="password" id="password" name="password" placeholder="請輸入密碼"><input type="submit" value="登錄"></form></body></html>
body {
background-color: #f5f5f5;
font-family: "Merriweather", Georgia, serif;
}
form {
max-width: 500px;
margin: auto;
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
}
form h2 {
text-align: center;
margin-top: 0px;
margin-bottom: 20px;
}
form input[type="text"], form input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
}
form input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
margin-top: 20px;
margin-bottom: 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
form input[type="submit"]:hover {
background-color: #45a049;
}
@media screen and (max-width: 480px) {
form input[type="text"], form input[type="password"], form input[type="submit"] {
width: 100%;
margin-top: 0px;
}
}以上就是我們?yōu)榇蠹姨峁┑腍TML5簡單的登錄界面代碼，希望對大家有所幫助。大家只需要將上述代碼復制到自己的網(wǎng)站項目中即可，祝愿大家實現(xiàn)美麗的登錄界面！上一篇html5登陸代碼
下一篇html5登陸框代碼