- 用url_for加载静态文件
- <script src="{{ url_for('static',filename='js/login.js') }}"></script>
- flask 从static文件夹开始寻找
- 可用于加载css, js, image文件
- 继承和扩展
- 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
- 子模板继承父模板
- {% extends 'base.html’ %}
- 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
- <title>{% block title %}{% endblock %}-MIS问答平台</title>
- {% block head %}{% endblock %}
- {% block main %}{% endblock %}
- 子模板中写代码实现自己的需求。block
- {% block title %}登录{% endblock %}
- 首页、登录页、注册页都按上述步骤改写。
导航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}base</title> <link rel="stylesheet" href="../static/css/0082.css" type="text/css"> <script src="../static/js/0082.js"></script> {% block head %}{% endblock %} </head> <body id="myBody"> {% block main %}{% endblock %} <nav> <div class="layui-col-md4"> <div class="layui-row" style="padding-top:10px;"> <img id="myOnOff" onclick="myswitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px" style="padding-left: 10px;"> <a href="{{ url_for('base')}}">首页</a> <a href="{{ url_for('login')}}">登录</a> <a href="{{ url_for('signin')}}">注册</a> </div> </div> <br> <form method="get" action="#"> <div class="layui-row"> <div class="layui-col-md3" style="padding-left: 50px;"> <input type="text" name="title" required lay-verify="required" placeholder="search" autocomplete="off" class="layui-input"> </div> <div class="layui-col-md3" style="padding-left: 50px;"> <button type="submit" class="layui-btn layui-btn-primary">搜索</button> </div> </div> </form> </nav> <div class="area"> </div> <<div> <div class="img"> <a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/"> <img src="http://www.gzcc.cn/2016/images/yhdh/05.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn/html/xygk/xiaoyuanfengguang/">校园风光</a></div> </div > <div class="img"> <a href=http://www.gzcc.cn/quanjingxiaoyuan/tour.html"> <img src="http://www.gzcc.cn/2016/images/yhdh/07.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn/quanjingxiaoyuan/tour.html">全景校园</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/shipinxiaoyuan/"> <img src="http://www.gzcc.cn/2016/images/yhdh/06.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn/html/shipinxiaoyuan/">视频校园</a></div> </div> <div class="img"> <a href="http://www.gzcc.cn/html/xiaoyoufengcai/"> <img src="http://www.gzcc.cn/2016/images/yhdh/04.jpg"></a> <div class="desc"><a href="http://www.gzcc.cn/html/xiaoyoufengcai/">校友风采</a></div> </div> </div> </div> <br> <br> <footer> <div class="footer_box"> </div> </footer> </body> </html>
-
注册 {% extends'0082.html' %} <head> <meta charset="UTF-8"> <title>注册</title> {% block head %} <link href="{{url_for('static',filename='css/zhuce.css')}}" rel="stylesheet" type="text/css" > <script src="{{ url_for('static',filename='js/zhuce.js') }}"></script> {% endblock %} </head> <body>{% block main %} <div><h1>用户注册</h1></div> <div class="aa"><script>document.write("loading....")</script> </div> <div class="flex-container"> <div class="box"> <h2>欢迎加入</h2> <div class="input_box"> 请输入账号 <input id="uname" type="text"laceholder="请输入账号"> </div><br> <div class="input_box"> 请输入密码 <input id="upass" type="password" placeholder="请输入密码"></div><br> <div class="input_box"> 再输入密码 <input id="upass1" type="password" placeholder="再次输入密码"></div><br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()" >register</button></div> </div> </div> </body>{% endblock %} </html>
-
登录 {% extends'0082.html' %} <html> <head> <meta charset="UTF-8"> <title>登录</title> {% block head %} <link href="{{url_for('static',filename='css/zhuce.css')}}" rel="stylesheet" type="text/css"> <script src="{{url_for('static',filename='js/denglu.js') }}"></script> {% endblock %} </head> <body> {% block main %} <div><h1>用户登录</h1></div> <div class="aa"><script>document.write("loading....")</script> </div> <div class="flex-container"> <div class="box"> <div class="input_box"> 登录 <input id="uname" type="text" placeholder="输入用户名"> </div> <br> <div class="input_box"> 密码 <input id="upass" type="password" placeholder="输入密码"> </div> <br> <div id="error_box"><br></div> <div class="input_box"> <button onclick="fnLogin()">load</button> </div> </div> </div> {% endblock %} </body> </html>
