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/,你将在屏幕的左上角见到这张背景图

相关推荐
寻星探路2 分钟前
【算法专题】滑动窗口:从“无重复字符”到“字母异位词”的深度剖析
java·开发语言·c++·人工智能·python·算法·ai
Dxy12393102163 分钟前
python连接minio报错:‘SSL routines‘, ‘ssl3_get_record‘, ‘wrong version number‘
开发语言·python·ssl
吨吨不打野15 分钟前
CS336——2. PyTorch, resource accounting
人工智能·pytorch·python
___波子 Pro Max.19 分钟前
Python文件读取代码中strip()的作用
python
pumpkin8451434 分钟前
Go 学习全景引子:理解设计理念与工程思路
python·学习·golang
weixin_462446231 小时前
从零开始:基于 Python PyQt5 打造多功能音乐播放器 | 支持播放、暂停、进度控制与歌词同步
python·音乐播放器·pyqt5
小二·1 小时前
Python Web 开发进阶实战:安全加固实战 —— 基于 OWASP Top 10 的全栈防御体系
前端·python·安全
唐叔在学习1 小时前
还在申请云服务器来传输数据嘛?试试P2P直连吧
后端·python
黄宝康1 小时前
sublimetext 运行python程序
开发语言·python
matlabgoodboy2 小时前
程序代做python代编程matlab定制代码编写C++代写plc设计java帮做
c++·python·matlab