HTML 界面是網(wǎng)站設(shè)計(jì)中非常重要的一部分，用戶登錄界面是用戶進(jìn)入網(wǎng)站的首要步驟之一。如何設(shè)計(jì)一款好看的用戶登錄界面呢？下面我們就為大家分享一份HTML用戶登錄界面的代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶登錄</title>
<style type="text/css">
body {
background-color: #f6f6f6;
}
.container {
margin: 80px auto;
max-width: 500px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
font-size: 18px;
margin-bottom: 10px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
height: 36px;
border-radius: 5px;
border: none;
padding: 8px;
font-size: 16px;
margin-bottom: 20px;
}
button {
background-color: #44c767;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
button:hover {
background-color: #3d8b5a;
}
</style>
</head>
<body>
<div class="container">
<h1>用戶登錄</h1>
<form>
<label>用戶名</label>
<input type="text" name="username" required>
<label>密碼</label>
<input type="password" name="password" required>
<button type="submit">登錄</button>
</form>
</div>
</body>
</html>上面的代碼定義了一個(gè)用戶登錄的界面，包括了一個(gè)輸入用戶名和密碼的表單以及一個(gè)登錄按鈕。通過 CSS 的樣式設(shè)置，整個(gè)界面看起來簡(jiǎn)潔、美觀，并且適合在不同設(shè)備上自適應(yīng)展示。
這份 HTML 用戶登錄界面代碼可以作為你自己網(wǎng)站的一部分進(jìn)行改動(dòng)，以適應(yīng)不同的需求。如果你是一名網(wǎng)站設(shè)計(jì)師，就可以在這份代碼的基礎(chǔ)上根據(jù)客戶的需求來設(shè)計(jì)屬于自己和客戶的用戶登錄界面。總之，本文所提供的 HTML 用戶登錄界面代碼是一個(gè)不錯(cuò)的起點(diǎn)，希望可以給你帶來幫助。