加载静态文件,父模板的继承和扩展
- 用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 %} 维尼乐园</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("登录成功！") }
1140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
