设计一个HTML登录页面,有LOGO图片,用户ID,密码,记住账号。用BOOTSTRAP样式。label用中文。
时间: 2023-05-21 10:04:48 浏览: 91
好的,以下是一个简单的 HTML 登录页面的代码,使用了 Bootstrap 样式:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" integrity="...">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="text-center my-5"><img src="logo.png" alt="LOGO"></h1> <!-- LOGO 图片 -->
<form>
<div class="form-group">
<label for="username">用户名</label> <!-- 用户ID -->
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="password">密码</label> <!-- 密码 -->
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember" name="remember">
<label class="form-check-label" for="remember">记住账号</label> <!-- 记住账号 -->
</div>
<button type="submit" class="btn btn-primary mt-3">登录</button>
</form>
</div>
</div>
</div>
</body>
</html>
```
希望可以帮助你实现一个简单的登录页面!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)