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

李木子木子

已于 2022-05-18 23:16:25 修改

阅读量1.5k

点赞数 2

文章标签： django html css

于 2022-05-13 14:00:16 首次发布

本文链接：https://blog.csdn.net/qq_43504837/article/details/124750273

版权

本文展示了如何使用Bootstrap样式创建包含用户名、密码和验证码的Django用户登录界面。通过引入外部样式链接，设置了包括全局CSS样式、登录标题、背景图片、输入框样式以及错误信息显示等细节。同时，代码中还包含了Django的CSRF保护机制。

摘要由CSDN通过智能技术生成

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>

包含用户名，密码和验证码

在这里插入图片描述

<!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: 400px;
        width: 600px;
        /*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 h3 {
        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" >
        <!-- <h3>用户登录</h3> -->
        <!-- 表单 -->
        <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="用户名" required style="border-radius: 50px; ">
                </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="密码" required style="border-radius: 50px; ">
                </div>
            </div>


            <div class="form-group">
                <label for="id_code" class="col-sm-2 control-label" style="color: #1ff">验证码</label>
                <div >
                    <div class="col-sm-3">
                            <img id="image_code" src="/image/code/">
                    </div>
                    <div class="col-sm-7">
                        <input type="text" name="code" class="form-control" placeholder="请输入验证码" required id="id_code" style="border-radius: 50px; ">
                        <span style="color: red;">{{error_code}}</span>
                    </div>

                </div>
            </div>


            <div class="form-group">
                <!-- 错误信息 -->
                <!-- col-sm-offset-2 col-sm-10 表示一行有12个格,div 占10格，并向右偏移两个（左面空两格，右边占满） -->
                <div class="col-sm-offset-2 col-sm-10">
                    <span style="color: red;">{{error_msg}}</span>
                </div>

                <div class="col-sm-offset-2 col-sm-10">
                    <button class="col-sm-2 btn btn-primary btn-lg">登录</button>
                    <!-- <a class="col-sm-offset-6 col-sm-4" href="###" style="color: #1ff">忘记密码?</a> -->
                </div>
                      
            </div>




        </form>
    </div>
</body>
</html>