加载静态文件,父模板的继承和扩展

用url_for加载静态文件
1. <script src="{{ url_for('static',filename='js/login.js') }}"></script>
2. flask 从static文件夹开始寻找
3. 可用于加载css, js, image文件
继承和扩展
1. 把一些公共的代码放在父模板中，避免每个模板写同样的内容。base.html
2. 子模板继承父模板
  1. {% extends 'base.html’ %}
3. 父模板提前定义好子模板可以实现一些自己需求的位置及名称。block
  1. <title>{% block title %}{% endblock %}-MIS问答平台</title>
  2. {% block head %}{% endblock %}
  3. {% block main %}{% endblock %}
4. 子模板中写代码实现自己的需求。block
  1. {% block title %}登录{% endblock %}

首页、登录页、注册页都按上述步骤改写。

导航页
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}MIS07</title>
   <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='base.css') }}">


    {% block head %}{% endblock %}
</head>


<body id="myBody">
<div class="dhl" >
    <nav>
                <img src="https://img3.doubanio.com/lpic/s28070243.jpg" width="50" height="50" >
                <a class="dhg" href="">SECRET</a>
                <input class="soua" type="text">
                <button class="soub" type="submit">搜索</button>
                <a class="dha"  href="">首页</a>
                <a class="dhb"  href="">读书</a>
                <a class="dhc"  href="">电影</a>
                <a class="dhd"  href="">音乐</a>
                <a class="dhe"  href="">小组</a>
                <a class="dhf"  href="">同城</a>
                <a class="dll" href="{{ url_for('ll') }}" >登录</a>
                <a class="dll" href="{{ url_for('zc') }}" >注册</a>

    </nav>


</div>
{% block main %}{% endblock %}
<div>
    <nav>
          <div class="hs">
              <a href="">联系我们·</a>
              <a href="">加入我们·</a>
               <a href="">帮助中心</a>
              <p>版权 @ whl</p>
    </nav>
</div>




</body>
</html

注册页

{% extends 'base.html' %}
{% block title %}
注册
{% endblock %}
{% block head %}
   <link href="{{ url_for('static',filename='zc.css') }}" rel="stylesheet" type="text/css">
    <script src="../static/zc.js"></script>
{% endblock %}

{% block main %}
<body>
 <div class="box">
     <h2 class="d">注册</h2>
     <div class="input_box">
            <input style="background-color: deepskyblue;" id="uname" type="text" placeholder="请输入你的昵称">
        </div>
        <br>
     <div class="input_box">
            <input style="background-color: deepskyblue;" id="uname" type="text" placeholder="请输入你的密码">
        </div>
        <br>
        <div class="input_box">
            <input style="background-color: deepskyblue;" id="upass" type="password" placeholder="请再输入密码">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button class="dl" onclick="fnLogin()">注册</button>

        </div>
        <br>
    </div>
</div>
</body>
</html>
{% endblock %}

登录页

{% block main %}
<body>
 <div class="box">
     <h2 class="d">登录</h2>
     <div class="input_box">
            <input style="background-color: deepskyblue;" id="uname" type="text" placeholder="请输入用户名">
        </div>
        <br>
        <div class="input_box">
            <input style="background-color: deepskyblue;" id="upass" type="password" placeholder="请输入密码">
        </div>
        <br>
        <div id="error_box"><br></div>
        <div class="input_box">
            <button class="dl" onclick="fnLogin()">enter</button>

        </div>
        <br>
    </div>
</div>
</body>
</html>
{% endblock %}

导航页css

body{
    background-color: papayawhip;
}
.dll{
    margin-top:10px;
    color:#B22222;
    text-decoration:none;
    font-weight:bold;
    float:right;
    font-family: "幼圆";
    font-size: xx-large;
        }
.dzc{
    margin-top:20px;
    color:#B22222;
    text-decoration:none;
    font-weight:bold;
    float:right;
    font-family: "微软雅黑";
    font-size: xx-large;
        }
.dha{
    text-decoration:none;
    font-weight:bold;
    font-size:xx-large;
    margin-right:20px;
    color:plum;
    font-family: "华文隶书";
    margin-top:30px;
}
.dhb{
    text-decoration:none;
    font-weight:bold;
    font-size:xx-large;
    margin-right:20px;
    color:black;
    font-family: "微软雅黑";
    margin-top:30px;
}
.dhc{
    text-decoration:none;
    font-weight:bold;
    font-size:xx-large;
    margin-right:20px;
    color:darkblue;
    font-family: "微软雅黑";
    margin-top:30px;
}
.dhd{
    text-decoration:none;
    font-weight:bold;
    font-size:xx-large;
    margin-right:20px;
    color:orangered;
    font-family: "微软雅黑";
    margin-top:30px;
}
.dhe{
    text-decoration:none;
    font-weight:bold;
    font-size:xx-large;
    margin-right:20px;
    color:green;
    font-family: "微软雅黑";
    margin-top:30px;
}
.dhf{
    text-decoration:none;
    font-weight:bold;
    font-size:xx-large;
    margin-right:20px;
    color:#ff6633;
    font-family: "微软雅黑";
    margin-top:30px;
}
.dhg{
    margin-top:60px;
    color: plum;
    text-decoration:none;
    font-weight:bold;
    font-family: "隶书";
    font-size: xx-large;
        }
.soua{
    width: 15%;
    hight:12%;
}


.dhl{
    background-color: pink;
}
 .hs {
     width: 100%;
     height: 60px;
     color: #cccccc;
     background-color: papayawhip;
     position: fixed;
     bottom: 0; 
     left: 41%;
     z-index: 1;
 }

posted on 2017-11-08 16:34 020吴惠琳阅读(220) 评论(0) 收藏举报

刷新页面返回顶部

..L

加载静态文件,父模板的继承和扩展

导航

公告