用BOOTSTRAP样式布一个HTML登录页面,LOGO图片,有用户名,密码,记住我,要在一行显示。label用中文。
时间: 2023-05-23 09:01:56 浏览: 96
可以通过以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- 自定义样式 -->
<style type="text/css">
/* 改变body的背景颜色 */
body {
background-color: #F4F4F4;
}
/* 将表单居中 */
.login-form {
margin: 0 auto;
width: 400px;
margin-top: 50px;
background-color: #FFFFFF;
border: 1px solid #DDD;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 10px #DDD;
}
/* 标题文字样式 */
.title {
font-size: 28px;
font-weight: bold;
margin-bottom: 30px;
color: #333;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="login-form">
<h2 class="title">登录</h2>
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rememberMe">
<label class="form-check-label" for="rememberMe">记住我</label>
</div>
<button type="submit" class="btn btn-primary btn-block">登录</button>
</form>
</div>
</div>
</body>
</html>
```
以上代码能够绘制出一个简单的登录页面,其中包括 LOGO 图片,用户名、密码、记住我等表单项,样式使用了 Bootstrap,可以通过自定义样式文件覆盖原有样式。
相关推荐
![](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)