html优美登录界面
时间: 2023-08-26 13:17:34 浏览: 58
以下是一个优美的HTML登录界面的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
<link rel="stylesheet" href="login.css">
<style>
#login {
background-image: url(//ku.shouce.ren/files/images/201601/56a31fe190c02.png);
padding: 20px;
margin: 0 auto;
width: 247px;
border-radius: 4px;
}
#login form {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="login">
<h2>航空选座系统登录</h2>
<form>
<div class="inputBox">
<input type="text" name="" required>
<label>用户名</label>
</div>
<div class="inputBox">
<input type="password" name="" required>
<label>密码</label>
</div>
<input type="submit" name="" value="登录">
</form>
</div>
</body>
</html>
```
这个登录界面的HTML代码使用了CSS样式表来设置界面的背景图片和布局。登录框使用了圆角边框并居中显示在页面上。输入框和标签的样式也进行了设置,使界面更加美观。用户可以在输入框中输入用户名和密码,然后点击登录按钮进行登录操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [简单优美的登陆界面](https://blog.csdn.net/weixin_44196651/article/details/89737022)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [很漂亮的用户登录界面HTML模板](https://blog.csdn.net/weixin_33621208/article/details/117862322)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]