django学习入门系列之第四点《案例登录》

铁匠匠匠

已于 2024-07-11 10:59:54 修改

阅读量946

点赞数 37

分类专栏： django 文章标签： django python 学习笔记开源

于 2024-07-06 03:01:42 首次发布

本文链接：https://blog.csdn.net/qq_62548908/article/details/140203640

版权

django 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章目录

前期准备：
步骤
整体代码
往期回顾

前期准备：

宽度 + 居中
内边距
表单

步骤

先准备一个框，作为登录界面的容器

.frame{
            height: 380px;
            width: 600px;
            margin: 150px auto 0;
            border: 1px solid black;
        }

将里面输入登录样式内容（表单）

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

修改上诉内容，改成自己需要的

<div class="frame">
    <div>
        <h1 class="text">登录</h1>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
            </div>

            <div>
            <button type="submit" class="btn btn-primary button">登录</button>
            </div>
        </form>
    </div>
</div>

<style>
    .frame {
        height: 380px;
        width: 500px;
        margin: 150px auto 0;
        border: 1px solid black;

        padding-top: 50px;
        padding-left: 100px;
        padding-right: 100px;
        box-shadow: 5px 5px 5px #aaa;
    }

    .text {
        text-align: center;
    }

    .button{
        margin-left:123px;
        margin-top: 10px;

    }

</style>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发版本  -->
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

    <!-- 生产版本（压缩版）   -->
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">


    <style>
        .frame {
            height: 380px;
            width: 500px;
            margin: 150px auto 0;
            border: 1px solid black;

            padding-top: 50px;
            padding-left: 100px;
            padding-right: 100px;
            box-shadow: 5px 5px 5px #aaa;
        }

        .text {
            text-align: center;
        }

        .button{
            margin-left:123px;
            margin-top: 10px;

        }

    </style>
</head>
<body>

<div class="frame">
    <div>
        <h1 class="text">登录</h1>
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
            </div>

            <div>
            <button type="submit" class="btn btn-primary button">登录</button>
            </div>
        </form>
    </div>
</div>

</body>
</html>