flask登录界面Html及好看的样式,具体代码
时间: 2023-12-08 22:02:50 浏览: 15
以下是一个简单的 Flask 登录页面的 HTML 代码,包含 Bootstrap 样式:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<style>
body {
background-color: #f5f5f5;
}
.login-container {
margin-top: 10%;
margin-bottom: 10%;
}
.login-form-1 {
padding: 5%;
background: #f5f5f5;
border-radius: 10px;
}
.login-form-1 h3 {
text-align: center;
color: #333;
}
.login-form-2 {
padding: 5%;
background: #0062cc;
border-radius: 10px;
color: #fff;
}
.login-form-2 h3 {
text-align: center;
color: #fff;
}
.login-container form {
padding: 10%;
}
.btnSubmit {
width: 50%;
border-radius: 1rem;
padding: 1.5%;
border: none;
cursor: pointer;
}
.btnSubmit:hover {
background-color: #0062cc;
color: #fff;
}
.login-form-1 .btnSubmit {
font-weight: 600;
color: #0062cc;
background-color: #fff;
}
.login-form-2 .btnSubmit {
font-weight: 600;
color: #fff;
background-color: #0062cc;
}
</style>
</head>
<body>
<div class="container login-container">
<div class="row">
<div class="col-md-6 login-form-1">
<h3>Login</h3>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Email *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Your Password *" value="" />
</div>
<div class="form-group">
<input type="submit" class="btnSubmit" value="Login" />
</div>
<div class="form-group">
<a href="#" class="ForgetPwd">Forget Password?</a>
</div>
</form>
</div>
<div class="col-md-6 login-form-2">
<h3>Register</h3>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name *" value="" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Your Password *" value="" />
</div>
<div class="form-group">
<input type="submit" class="btnSubmit" value="Register" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>
```
这个 HTML 代码包含了登录和注册两个部分,登录部分在左边,注册部分在右边。使用 Bootstrap 样式,整个登录页面看起来比较美观。