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

相关推荐
查无此人byebye10 小时前
深度解析:当前AI视频生成为何普遍“短小精悍”?
人工智能·pytorch·python·深度学习·音视频·transformer
小白学大数据11 小时前
Python 进阶爬虫:解析知识星球 API
开发语言·爬虫·python
whale fall11 小时前
如何在同一台电脑里安装32 位 Python 和 64 位 Python
开发语言·笔记·python·学习
SNAKEpc1213811 小时前
PyQtGraph应用(五):k线回放复盘功能实现
python·qt·pyqt
2401_8414956411 小时前
【Python高级编程】近似串匹配
python·算法·动态规划·字符串·数组·时间复杂度·空间复杂度
历程里程碑11 小时前
滑动窗口------滑动窗口最大值
大数据·python·算法·elasticsearch·搜索引擎·flask·tornado
AI_567811 小时前
Python正则表达式终极指南:从模式匹配到文本工程的智能跃迁
人工智能·python·正则表达式
B站_计算机毕业设计之家11 小时前
AI大模型:Deepseek美食推荐系统 机器学习 协同过滤推荐算法+可视化 Django框架 大数据毕业设计(源码)✅
python·算法·机器学习·数据分析·django·推荐算法·美食
黄筱筱筱筱筱筱筱11 小时前
第三次Python练习题
开发语言·python
2501_9413220311 小时前
叉车人员检测识别实战:基于YOLOv8-BiFPN的高精度目标检测方案
python·yolo·目标检测