Django(8)-静态资源引用CSS和图片

除了服务端生成的 HTML 以外,网络应用通常需要一些额外的文件------比如图片,脚本和样式表------来帮助渲染网络页面。在 Django 中,我们把这些文件统称为"静态文件"。

我们使用static文件来存放静态资源,django会在每个 INSTALLED_APPS 中指定的应用的子文件中寻找名称为 static 的特定文件夹

引用CSS样式

创建文件polls/static/polls/style.css

css 复制代码
li a {
    color: green;
}

polls/templates/polls/index.html 的文件头添加以下内容

html 复制代码
{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

重新载入 http://localhost:8000/polls/ ,你会发现有问题的链接是绿色的 (这是 Django 自己的问题标注方式),这意味着你追加的样式表起作用了。

引用图片

为图像创建一个子目录。 在 polls/static/polls/ 目录中创建 images 子目录。 在此目录中,添加您想用作背景的任何图像文件。

css 复制代码
body {
    background: white url("images/background.png") no-repeat;
}

将一张图片放在该文件夹下background.png

在样式表中添加对图像的引用(polls/static/polls/style.css

浏览器重载 http://localhost:8000/polls/,你将在屏幕的左上角见到这张背景图

相关推荐
小智RE0-走在路上10 分钟前
Python学习笔记(6)--列表,元组,字符串,序列切片
笔记·python·学习
feeday18 分钟前
Python 删除重复图片 优化版
开发语言·python
ss27324 分钟前
Java线程池全解:工作原理、参数调优
java·linux·python
于是我说25 分钟前
一份Python 面试常见问题清单 覆盖从初级到高级
开发语言·python·面试
BoBoZz1925 分钟前
RotationAroundLine 模型的旋转
python·vtk·图形渲染·图形处理
Kurbaneli29 分钟前
Python金融数据分析革命:Mootdx让通达信数据获取变得如此简单
python
吧啦蹦吧39 分钟前
`org.springframework.util.ClassUtils#forName
开发语言·python
倔强的小石头_41 分钟前
Python 从入门到实战(十):Pandas 数据处理(高效搞定表格数据的 “瑞士军刀”)
人工智能·python·pandas
Together_CZ1 小时前
DarkIR: Robust Low-Light Image Restoration——鲁棒的低光照图像复原
python·image·robust·darkir·鲁棒的低光照图像复原·low-light·restoration
拾贰_C1 小时前
【python | pytorch | scipy】scipy scikit-learn库相互依赖?
pytorch·python·scipy