bootstrap样式

Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。一般是把该css样式下载下来放在static文件夹中引用，但是我们为了演示方便直接用bootstrap样式链接 bootstrap样式链接

样式代码

<!DOCTYPE html>
<html>
<head>
    <title>Japan_is_shit</title>
    <!-- <link rel="stylesheet" href="\static\plugins\bootstrap-3.4.1\css\bootstrap.min.css" > -->
    <!-- 样式链接 -->
    <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">
            <!-- django默认在post请求加一个csrf_token值，不加{% csrf_token %}会报错 -->
            {% 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的样式做一个补充。

python+django搭建页面 (login.html 的css样式)

bootstrap样式

样式代码

总结