在根目录创建static文件夹,用来装静态文件,然后在static文件夹下创建应用同名文件夹,在应用同名文件夹下,如图:
配置Setting文件:
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static') ]
一、引入css文件
在css文件夹中创建css样式:style.css
设置字体颜色为红色
h1{ color:red; }
再在模板文件index.html中引入css文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" type="text/css" href="/static/myApp/css/style.css"/> </head> <body> <h1>sunck is a good man</h1> </body> </html>
二、引入js文件
在js文件夹中创建sunck.js文件
在index.html文件中引入:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <link rel="stylesheet" type="text/css" href="/static/myApp/css/style.css"/> <!--引入css文件--> <script type="text/javascript" src="/static/myApp/js/sunck.js"></script> <!--引入js文件--> </head> <body> <h1>sunck is a good man</h1> </body> </html>
结果:
三、引入图片img
将图片放入img文件夹中
在html文件中引入图片
<img src="/static/myApp/img/1.jpg"/>
结果:
四、引入static路径
作用:与反向解析道理相同,若路径变化了也可以随之变化
在index.html文件最前面加入
{% load static from staticfiles %}
例子:
加载另一张图片
<img src="{% static 'myApp/img/1.jpg' %}"/>
结果:浏览器中的审查元素中