Flask实战2问答平台-父模板抽离(登录注册界面)
来源:互联网 发布:如何注册淘宝联盟 编辑:程序博客网 时间:2024/05/18 01:18
我们写一个基模板,然后让其他的继承.
(1)新建基模板base.html
注意5,13,53行的{%%}块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}知了课堂</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="{{url_for('static',filename = 'css/index.css')}}"> <link rel="stylesheet" href="{{url_for('static',filename = 'css/base.css')}}"> {% block head %}{% endblock %}</head><body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img class="logo" src="{{url_for('static',filename = 'Logo/cat.png')}}" alt=""> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li> <li><a href="#">发布问答</a></li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入关键字"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="{{url_for('login')}}">登录</a></li> <li><a href="#">注册</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav> <div class="main"> {% block main %}{% endblock %} </div></body></html>
base.html
.logo{ width: 30px; height: 30px;}body{ background-color: #f3f3f3;}.main{ background: #fff; width: 730px; margin: 0 auto; overflow: hidden;}
(2)此时index.html
可更改如下
{% extends 'base.html' %}{% block title %} 首页 {% endblock %}{% block main %} 这是首页 {% endblock %}
(3)login.html
{% extends 'base.html' %}{% block head %}<link rel="stylesheet" href="{{url_for('static',filename = 'css/login.css')}}">{% endblock %}{% block main %} <h3 class="page-title">登录</h3> <form action="" method="post"> <div class="form-container"> <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 class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> --> <button type="submit" class="btn btn-primary btn-block">Submit</button> </div> </form>{% endblock %}
index.css
.logo{ width: 30px; height: 25px;}
login.css
.form-container{ width: 300px; /*将div form-container居中*/ margin: 0 auto;}.page-title{ text-align: center;}.main{ height: 270px;}
注册界面由登录界面作相应更改即可
{% extends 'base.html' %}{% block title %}注册{% endblock %}{% block head %}<link rel="stylesheet" href="{{url_for('static',filename = 'css/login-register.css')}}">{% endblock %}{% block main %}<h3 class="page-title">注册</h3> <form action="" method="post"> <div class="form-container"> <div class="form-group"> <label for="exampleInputEmail1">手机号码</label> <input type="email" class="form-control" name='username' placeholder="用户名"> </div> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="text" class="form-control" name="telephone" placeholder="手机号码"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" name="password1" placeholder="确认密码"> </div> <div class="form-group"> <label for="exampleInputPassword1">确认密码</label> <input type="password" class="form-control" name="password2" placeholder="确认密码"> </div> <!-- <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> --> <button type="submit" class="btn btn-primary btn-block">立即注册</button> </div> </form>{% endblock %}
到这一步的时候,把login.css整合了一下,统一成了login-register.css
也就是login.html和register.html共用一个css.
login-register.css如下
.form-container{ width: 300px; /*将div form-container居中*/ margin: 0 auto;}.page-title{ text-align: center;}.main{ height: 400px;}
不要忘记在主py文件
中添加视图函数
最终效果
阅读全文
0 0
- Flask实战2问答平台-父模板抽离(登录注册界面)
- Flask实战2问答平台-完成登录注册功能
- Flask实战2问答平台-发布问答界面完成
- Flask实战2问答平台-登录限制(装饰器)
- Flask实战2问答平台--导航条
- Flask实战2问答平台-发布问答功能完成
- Flask实战2问答平台-问答详情完成
- Flask实战2问答平台-User模型创建
- Flask实战2问答平台-首页布局,功能完成
- Demo0002-登录/注册界面
- html注册登录模板
- Flask+MySql实现用户登录注册
- flask 用户:注册、登录和退出
- 实战 Walker 之注册界面
- Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)
- Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)
- Android实战简易教程<三十二>(自定义View登录注册界面EditText-实现一键清空)
- ios UI注册登录界面
- USACO最长前缀(trie练习题)
- 【Zookeeper】概述
- linux总结笔记(一)linux/ubuntu下ping www.baidu.com失败总结(校园网)
- [Leetcode] 365. Water and Jug Problem 解题报告
- 设计模式——单例模式(php)
- Flask实战2问答平台-父模板抽离(登录注册界面)
- 文本编辑部署servlet
- POJ2441-Arrange the Bulls
- Parcel_进程间数据传递
- CodeForces
- (LeetCode)Search Insert Position --- 二分搜索
- hdu6165 (缩点+拓扑排序)
- WiFi通信上位机实现
- HTML非主体结构元素