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

相关推荐
jay神4 分钟前
深度学习的优化器应该怎么选?
人工智能·python·深度学习·毕业设计·课程设计
XLYcmy8 小时前
京东 算法实习一面 下+手撕
c++·python·llm·概率论·数据处理·训练·codebert
虎头金猫8 小时前
如何在群晖NAS上通过Docker部署CloudSaver?群晖部署CloudSaver教程|聚合资源搜索并实现远程访问
运维·服务器·网络·python·docker·容器·pandas
从零开始学习人工智能8 小时前
WSL2部署CUDA12+cuDNN9踩坑实录:ONNX Runtime GPU推理环境搭建全流程
python
m0_380743878 小时前
从零调用 Claude 教程
开发语言·python·node.js
min(a,b)10 小时前
学习第17天:Agent Memory 与 MCP 协议
python·学习
CodeBlog-star10 小时前
LLM安全实战:提示词注入与越狱攻击防御指南
python·agent·提示词攻击·越狱攻击
小柯南敲键盘10 小时前
电商图片翻译工具推荐,批量处理主图视频字幕,免费试用
大数据·人工智能·python·音视频
比高创意品牌策划设计11 小时前
零售卖场设计软件用CAD还是SketchUp还是酷家乐
python
迷迭香yy13 小时前
行业板块轮动因子实战从板块资金到因子建模的本地化Python全流程
数据库·人工智能·python