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.【案例 博客案例】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Towards Deep Learning Models Resistant to Adversarial Attacks

这篇论文的主要内容是关于开发对抗攻击具有抗性的深度学习模型。对抗攻击是通过对输入数据进行微小且精心设计的扰动&#xff0c;诱使深度学习模型做出错误的预测。这种攻击在图像识别、语音识别和自然语言处理等任务中尤为突出。 这篇论文的主要内容是关于开发对抗攻击具有抗…

Redis---8---哨兵(sentinel)

Redis—8—哨兵&#xff08;sentinel&#xff09; 是什么 吹哨人巡查监控后台master主机是否故障&#xff0c;如果故障了根据*** 投票数 *** 自动将某一个从库转换为新主库&#xff0c;继续对外服务。 作用&#xff1a; 俗称&#xff0c;无人值守运维 ​ 1&#xff0c;监控…

基于深度学习的异常行为检测

基于深度学习的异常行为检测是一种通过分析视频或传感器数据自动检测异常行为的技术&#xff0c;广泛应用于公共安全、工业监控、金融欺诈检测等领域。异常行为检测旨在识别与正常行为模式不同的异常活动&#xff0c;从而及时预警和采取措施。以下是关于这一领域的系统介绍&…

layui-表单(输入框)

1.基本使用方法 先写一个表单元素块 form 加上layui-form 里面写行区块结构&#xff0c;如下&#xff1a; 2.输入框选项 placeholder默认文本 autocomplete自动填充 lay-verify required必填

社交媒体原生应用开发:Facebook的创新之路

摘要 在数字化时代&#xff0c;社交媒体的原生应用开发已成为连接用户与平台的桥梁。Facebook作为全球领先的社交媒体平台&#xff0c;其原生应用的开发经验为行业提供了宝贵的参考。 关键词 社交媒体&#xff0c;原生应用开发&#xff0c;Facebook&#xff0c;用户体验&…

报错:CodeArts部署Java/SpringBoot/SpringCloud项目报错:Deploy task execution failed.

背景&#xff1a; 目前想要部署SpringCloud服务&#xff0c;使用页面传参的方式。但是传参后&#xff0c;部署报错。错误如下&#xff1a; [2024/06/28 18:09:29.114 GMT08:00] ok: [1_***.***.***.226] > { [2024/06/28 18:09:29.114 GMT08:00] "msg": &quo…

芯片的PPA-笔记

写在前面&#xff1a;这个仅记录自己对芯片PPA的一些思考&#xff0c;不一定正确&#xff0c;还请各位网友思辨的看待&#xff0c;欢迎大家谈谈自己的想法。 1 此次笔记的起因 记录的原因&#xff1a;自己在整理这段时间的功耗总结&#xff0c;又看到工艺对功耗的影响&#x…

Spring AOP源码篇二之 代理工厂ProxyFactory学习

了解AspectJ表达式以及PointCut、Advice、Advisor后&#xff0c;继续学习Spring AOP代理工厂 AspectJ表达式参考&#xff1a;Spring AOP之AspectJ表达式-CSDN博客 PointCut、Advice、Advisor参考&#xff1a;Spring AOP源码篇一之 PointCut、Advice、Advisor学习-CSDN博客 简单…

H5 Canvas实现转盘效果,控制指定数字

效果图 实现思路&#xff1a; 用Canvas画圆&#xff0c;然后再画扇形&#xff0c;然后中奖的开始用一张图片代替&#xff0c;点击的时候触发转动效果。 实现代码&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><tit…

前端文件预览汇总

一、vue中预览word、excel、pdf&#xff1a; vue-office vue-office支持多种文件(docx、excel、pdf)预览的vue组件库&#xff0c;支持vue2/3&#xff0c;也支持非Vue框架的预览。 特点&#xff1a; 一站式&#xff1a;提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线…

C# 键值对的使用

在C#中&#xff0c;键值对&#xff08;Key-Value Pair&#xff09;通常在字典&#xff08;Dictionary<TKey, TValue>&#xff09;数据结构中使用&#xff0c;它允许你根据一个唯一的键&#xff08;Key&#xff09;来存储和检索一个值&#xff08;Value&#xff09;。下面…

MQ:RabbitMQ

同步和异步通讯 同步通讯: 需要实时响应,时效性强 耦合度高 每次增加功能都要修改两边的代码 性能下降 需要等待服务提供者的响应,如果调用链过长则每次响应时间需要等待所有调用完成 资源浪费 调用链中的每个服务在等待响应过程中,不能释放请求占用的资源,高并发场景下…

在Java项目中集成单元测试与覆盖率工具

在Java项目中集成单元测试与覆盖率工具 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 单元测试是软件开发中至关重要的一环&#xff0c;它用于验证代码在独立…

排序——交换类排序、插入类排序、选择类排序、归并类排序

排序 排序算法分为交换类排序、插入类排序、选择类排序、归并类排序。 交换类排序 冒泡排序 冒泡排序的基本思想是&#xff1a;从后往前&#xff08;或从前往后&#xff09;两两比较相邻元素的值。若A[ j - 1 ] > A[ j ]&#xff0c;则交换它们&#xff0c;直到序列比较…

commonjs、module 模块同时启动

怎样同时在一个项目中同时启动node服务和我们前端项目&#xff08;commonjs、module 模块同时启动&#xff09; 今天在使用node实现完增删改查的接口之后&#xff0c;将自己node代码嵌入到我们react项目中 启动完前端项目之后&#xff0c;当我使用node service.js的时候&#x…

Unity渲染管线介绍

Unity中的渲染管线渲染场景主要分为三个阶段 剔除&#xff08;Culling&#xff09; 剔除摄像机不可见对象&#xff08;视锥体剔除Frustum Culling&#xff09;和被遮挡对象&#xff08;遮挡剔除Occlusion Culling&#xff09;。 渲染&#xff08;Rendering&#xff09; 将可见…

Unity 简单载具路线 Waypoint 导航

前言 在游戏开发和导航系统中&#xff0c;"waypoint" 是指路径中的一个特定位置或点。它通常用于定义一个物体或角色在场景中移动的目标位置或路径的一部分。通过一系列的 waypoints&#xff0c;可以指定复杂的移动路径和行为。以下是一些 waypoint 的具体用途&…

用Python轻松转换PDF为CSV

数据的可访问性和可操作性是数据管理的核心要素。PDF格式因其跨平台兼容性和版面固定性&#xff0c;在文档分享和打印方面表现出色&#xff0c;尤其适用于报表、调查结果等数据的存储。然而&#xff0c;PDF的非结构化特性限制了其在数据分析领域的应用。相比之下&#xff0c;CS…

Three 颜色Color

构造器&#xff08;Constructor&#xff09; Color( r : Color_Hex_or_String, g : Float, b : Float ) r - (可选参数) 如果参数g和b被定义&#xff0c;则r表示颜色中的红色分量。 如果未被定义&#xff0c;r可以是一个十六进制 hexadecimal triplet 颜色值或CSS样式的字符串…

【国产开源可视化引擎Meta2d.js】图元

图元 又称画笔Pen。图形表达的基本元素&#xff0c;组成图像的基本单元。 构成 每一个图元由ID、名字、类型、属性&#xff08;数据&#xff09;组成。 ID 名为“id”的特殊属性&#xff0c;图元实例&#xff08;画布上的图元对象&#xff09;的唯一标识。拖拽到画布或创建…