当把网页模板下好后打开，看到首页显示的样式非常混乱，
原因是浏览器无法正确加载 CSS 等样式文件。
需要以 django 的方式来正确地处理 CSS 和 JavaScript 等静态文件的加载路径。
CSS 样式文件通常在 HTML 文档的 head 标签里引入，打开 index.html 文件，
在文件的开始处找到 head 标签包裹的内容，大概像这样：
1 <!-- meta --> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 5 <!-- css --> 6 <link rel="stylesheet" href="css/bootstrap.min.css"> 7 <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 8 <link rel="stylesheet" href="css/pace.css"> 9 <link rel="stylesheet" href="css/custom.css"> 10 11 <!-- js --> 12 <script src="js/jquery-2.1.3.min.js"></script> 13 <script src="js/bootstrap.min.js"></script> 14 <script src="js/pace.min.js"></script> 15 <script src="js/modernizr.custom.js"></script>
CSS 样式文件的路径在 link 标签的 href 属性里，而 JavaScript 文件的路径在 script 标签的 src 属性里。
可以看到诸如 `href="css/bootstrap.min.css" 或者 src="js/jquery-2.1.3.min.js" 这样的引用，
由于引用文件的路径不对，所以浏览器引入这些文件失败。需要把它们改成正确的路径。
把代码改成下面样子，正确地引入 static 文件下的 CSS 和 JavaScript 文件：
1 <!-- meta --> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 5 <!-- css --> 6 <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 7 <link rel="stylesheet" href="{% static ‘blog/css/bootstrap.min.css‘ %}"> 8 <link rel="stylesheet" href="{% static ‘blog/css/pace.css‘ %}"> 9 <link rel="stylesheet" href="{% static ‘blog/css/custom.css‘ %}"> 10 11 <!-- js --> 12 <script src="{% static ‘blog/js/jquery-2.1.3.min.js‘ %}"></script> 13 <script src="{% static ‘blog/js/bootstrap.min.js‘ %}"></script> 14 <script src="{% static ‘blog/js/pace.min.js‘ %}"></script> 15 <script src="{% static ‘blog/js/modernizr.custom.js‘ %}"></script>
把引用路径放在了一个奇怪的符号里，例如：href="{% static ‘blog/css/bootstrap.min.css‘ %}"。
用 {% %} 包裹起来的叫做模板标签。用 {{ }} 包裹起来的叫做模板变量，
其作用是在最终渲染的模板里显示由视图函数传过来的变量值。而这里使用的模板标签的功能则类似于函数
，例如这里的 static 模板标签，它把跟在后面的字符串 ‘css/bootstrap.min.css‘ 转换成正确的文件引入路径。
这样 css 和 js 文件才能被正确加载，样式才能正常显示。
注意：
为了能在模板中使用 {% static %} 模板标签，别忘了在最顶部 {% load static %} 。static 模板标签位于 static模块中，
只有通过 load 模板标签将该模块引入后，才能在模板中使用 {% static %} 标签。
有时候按 F5 刷新后页面还是很乱，这可能是因为浏览器缓存了之前的结果。按 Shift + F5（有些浏览器可能是 Ctrl + F5）强制刷新浏览器页面即可。
如果还是不行，重启一下开发服务器以及清除浏览器缓存。
原文：https://www.cnblogs.com/luckycola/p/13227603.html