- bootstrap样式
- 样式代码
- 总结
bootstrap样式
Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。
一般是把该css样式下载下来放在static文件夹中引用，但是我们为了演示方便直接用bootstrap样式链接
bootstrap样式链接
DOCTYPE html>
<html>
<head>
<title>Japan_is_shittitle>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
/*最外面一个div的样式 */
.account {
height: 300px;
width: 550px;
border: 1px solid #000000;
border-radius: 50px;
margin-right: auto;
margin-left: auto;
margin-top: 200px;
padding: 20px 60px;
box-shadow: 5px 5px 5px 5px #233;
}
/*用户登录标题设置*/
.account h2 {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
color: #1ff;
}
/*背景图设置*/
body {
background-image: url("https://pic.netbian.com/uploads/allimg/220410/183556-1649586956409a.jpg");
background-size: cover;
background-attachment: fixed;
}
style>
head>
<body>
<div class="account" >
<h2>用户登录h2>
<form method="post" class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label class="col-sm-2 control-label" style="color: #1ff">用户名label>
<div class="col-sm-10">
<input type="username" type="text" class="form-control" name="user" placeholder="用户名">
div>
div>
<div class="form-group">
<label class="col-sm-2 control-label" style="color: #1ff">密码label>
<div class="col-sm-10">
<input type="password" type="text" class="form-control" name="pwd" placeholder="密码">
div>
div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10" style="color: red;">{{error_msg}}div>
<div class="col-sm-offset-2 col-sm-10"><button class="btn btn-primary btn-lg">登录button>div>
div>
form>
div>
body>
html>
本文只是对前一篇文章中的login.html的样式做一个补充。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）