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

最新推荐文章于 2024-05-05 21:04:58 发布

原创最新推荐文章于 2024-05-05 21:04:58 发布 · 161 阅读

CC 4.0 BY-SA版权

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

用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 %} 维尼乐园</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="../static/css/20.css">
</head>

{% block main %}
<body>
<nav class="nav">


          <div class="burger">

<div class="searchdiv">
                <input type="text" class="search"/>
                <input type="button" value="搜索" class="button" />
            </div>
              <a class="btn sign up" href="zhuce.html">注册</a>
              <a class="btn login" href="denglu.html">登录</a>
            <div class="burger__patty">
      </div>
</div>
          <ul class="nav__list">
            <li class="nav__item">
              <a href="https://baike.so.com/doc/6087123-6300228.html" class="nav__link c-blue"><img src="../static/images/myself.jpg" alt height="100">维尼简介</a>
            </li>
            <li class="nav__item">
              <a href="https://baike.so.com/doc/4326998-4531580.html" class="nav__link c-yellow scrolly"><img src="../static/images/friends.jpg" alt height="100">维尼友谊</a>
            </li>
            <li class="nav__item">
              <a href="http://wenda.so.com/q/1364865961066962?src=150" class="nav__link c-red"><img src="../static/images/honey.jpg" alt height="100">维尼最爱</a>
            </li>
            <li class="nav__item">
              <a href="//mp.weixin.qq.com/s?__biz=MzIzMDE5NzAyNg%3D%3D&idx=1&mid=2655984055&sn=2fc1652e208cd62fe87dc070a137cfea" class="nav__link c-green"><img src="../static/images/normal.jpg" alt height=100">维尼日常</a>
            </li>

          </ul>

</nav>



    </body>

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

div{
    margin: auto;
}
*{
    margin: 0px;
    padding: 0px;
}
li{
    list-style-type: none;
    background-color: sandybrown;
}

.a{
    float: left;
}
.b{
    float: right;
}



.burger {
    height: 15vh;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 2;
    background: white;
    cursor: pointer;
    -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.ul {
    list-style-type: none;
    padding: 0;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin: 0;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
a.btn.sign-up {
    float: right;
    width: 80px;
    height: 38px;
    line-height: 24px;
    margin: 9px 5px 0 15px;
    border: 1px solid rgba(236,97,73,.7);
    border-radius: 20px;
    font-size: 20px;
    color: #ea6f5a;
    background-color: transparent;
}
a.btn.login {
    float: right;
    margin: 9px 6px 0 10px;
    font-size: 20px;
}
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

{% extends 'base.html' %}
{% block title %}
    登录
{% endblock %}
{% block head %}
    <head>
<link href="../static/css/denglu.css" rel="stylesheet" type="text/css">
  <script src="../static/js/12.js"></script>
</head>
<body bgcolor="#a9a9a9">

 <div class="box">

    <div class="titulo">登录</div>

       <div class="input_box1"  >
           <input type="text" id="uname" placeholder="请输入用户名" >

       </div>
       <div class="input_box2">
           <input type="password" id="upass"  placeholder="请输入密码">
       </div>
       <div id="error_box"><br></div>
   <div class="input_box3">
<a href="#" class="enviar">登录</a>

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

{% extends 'base.html' %}
{% block title %}
注册
{% endblock %}
{% block head %}
<head>
<link href="../static/css/denglu.css" rel="stylesheet" type="text/css">
  <script src="../static/js/12.js"></script>
</head>
<body bgcolor="#a9a9a9">

 <div class="box">

    <div class="titulo">注册</div>

       <div class="input_box1"  >
           <input type="text" id="uname" placeholder="请输入用户名" >

       </div>
       <div class="input_box2">
           <input type="password" id="upass"  placeholder="请输入密码">
          <input type="password1" id="upass"  placeholder="请确认密码">
       </div>
       <div id="error_box"><br></div>
   <div class="input_box3">
<a href="#" class="enviar">注册</a>

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

body {
    background: -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-color: #840b2a;
    background: -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-color: #840b2a;
    background: -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -o-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-size: 1000px 1000px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 1000px 1000px;
    background-color: #840b2a;
}
.box{
  width: 410px;
    height: 600px;
    overflow: hidden;
    background: #1e1e1e;
    border-radius: 6px;
    margin: 50px auto;
    box-shadow: 0px 0px 50px rgba(0,0,0,.8);
}
.titulo{
    width: 410px;
    height: 30px;
    padding-top: 13px;
    padding-bottom: 13px;
    font-size: 18px;
    text-align: center;
    color: #bfbfbf;
    font-weight: bold;
    background: #121212;
    border: #2d2d2d solid 1px;
    margin-bottom: 30px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    font-family: Arial;
}

.input_box1{
  border: #ccc 1px solid;
  padding: 0.5cm 0.5cm;
  margin-top:1.0cm;
  margin-left: 2.0cm;
  width:210px;
  font-size:1em;
  border-radius:4px;
}

.input_box2{
 border: #ccc 1px solid;
padding: 0.5cm 0.5cm;
  margin-left: 2.0cm;
  width:210px;
  font-size:1em;
  border-radius:4px;
}

.input_box3{
    width: 340px;
    height: 20px;
    display: block;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 6px;
    border: none;
    border-top: #4eb2a8 1px solid;
    border-bottom: #161616 1px solid;
    background: #349e92;
    margin-top: 2.0cm;
    margin-left: 1.0cm;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 -1px #1d7464, 0 1px #7bb8b3;
    font-family: Arial;
}

.error_box{
  text-align: center;
  text-decoration-color: azure;
}

function fnlogin() {
            var oUname = document.getElementById("uname");
            var oUpass = document.getElementById("upass");
            var oError = document.getElementById("error_box");
            oError.innerHTML = "<br>"
            if (oUname.value.length < 6 || oUname.value.length > 12) {
                oError.innerHTML = "用户名必须大于6位或少于12位！";
                return;
            }

            else if(oUname.charCodeAt(0)>=48&&oUname.charCodeAt(0)<=57){
                oError.innerHTML="首字母不能是数字！";
                return;
            }
            if (oUpass.value.length < 6 || oUpass.value.length > 12) {
                oError.innerHTML = "密码必须大于6位或少于12位！";
                return;
            }
            window.alert("登录成功！")
        }