设计一个HTML登录页面,有LOGO图片,用户ID,密码,记住账号。用BOOTSTRAP样式。label用中文
时间: 2023-05-21 17:04:46 浏览: 159
HTML登录页面设计步骤如下:
1. 首先导入Bootstrap框架及相关CSS样式文件,可以选择CDN引入或者下载本地文件。
2. 在HTML中添加一个form表单元素,设置表单的class属性为form-horizontal,方便水平布局。
3. 在表单中添加一个div元素,设置其class属性为form-group,用于包裹输入框及label,方便样式设置。
4. 在div元素中添加label标签,设置label标签的class属性为control-label,用于显示表单的提示信息,同时设置for属性指向对应的输入框。
5. 在div元素中添加一个input元素,设置其type属性为text或password,class属性为form-control,用于输入用户ID和密码。
6. 在表单中添加一个checkbox元素,用于记住账号,同时给checkbox添加label标签,方便用户点击。
7. 在表单中添加一个button元素,设置其type属性为submit,class属性为btn btn-primary,用于提交用户登录信息。
8. 最后,添加LOGO图片即可。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h2>Login Page</h2>
<hr>
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-md-3">用户名</label>
<div class="col-md-9">
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-md-3">密码</label>
<div class="col-md-9">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<div class="checkbox">
<label>
<input type="checkbox">记住账号
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn btn-primary">登录</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
希望我的回答对您有帮助!
相关推荐
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)