(二)Django模板的应用
2024-10-08 05:21:24
一、配置项目的基础模板,分三部分
base.html 基础部分,需要包括基本的HTML标签
- header部分
- body部分
- html闭合标签
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/example.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'css/normalize.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.min.css' %}">
<link rel="stylesheet" href="{% static 'css/theme.css' %}">
</head>
<body>
{% include "header.html" %}
<div>
{% block content %}{% endblock %}
</div>
{% include "footer.html" %}
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery-3.3.1.slim.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
</body>
</html>
{% block style %}
{% endblock %}
header.html 头部部分,仅负责头部模板
{% load staticfiles %}
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<!-- TO DO -->
</header>
footer.html 尾部部分,仅负责尾部模板
{% load staticfiles %}
<footer class="footer position">
<div class="container">
<div class="row footer-top">
<div class="col-md-6 col-lg-6">
<p>这是我的第一个博客</p>
</div>
</div>
<hr/>
</div>
</footer>
<style>
.position {position:absolute;bottom:0; width:100%/*footer的高度*/}
</style>
最新文章
- angularjs—指令input
- tar 命令详解
- ARM指令分类及其寻址方式
- 用DirectX实现魔方(二)
- python特殊函数 __call__()
- Adding DTrace Probes to PHP Extensions
- Oracle 基础查询知识点
- TheSixthWeekJavaText
- windows 2003添加删除windows组件中无iis应用程序服务器项的解决方法
- 【计算机网络基础】数据交换技术和多路复用技术的正(nao)确(can)打开方式
- Kattis之旅——Divisible Subsequences
- css3实现的4种动画特效按钮
- recovery中英对照表 recovery大全图解
- 【django】Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。
- 51 jquery 节点操作和 bootstrapt
- IP地址输入框
- 重拾C,一天一点点_7
- shell文件相关指令
- jQuery的事件绑定和解除
- CustomView
热门文章
- SQL server无法绑定由多个部分绑定的标示符
- js获取dom节点
- asp.net MVC 模板定制
- Python第三方包的egg info 是什么东西
- 洛谷P2672 推销员 题解 贪心
- php检测函数
- Js中“==”和“===”的区别
- linux ioctl 方法
- JavaScript 判断对象中是否有某属性的常用方法
- 2019牛客暑期多校训练营(第一场)A	Equivalent Prefixes(单调栈/二分+分治)