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

文章目录

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

前期准备：

宽度 + 居中
内边距
表单

步骤

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

.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>

[外链图片转存中…(img-KWx34OSG-1720206079524)]

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例小米商城头标】
15.【案例小米商城头标总结】
16.【案例小米商城二级菜单】
17.【案例商品推荐部分】
18.【伪类简单了解】
19.【position】
20.【案例小米商城中app图标代码】
21.【边框及总结】
22.【BootSrap初了解】
23.【BootSrap的目录栏】
24.【BootSrap的栅格系统】
25.【案例博客案例】