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

相关推荐
学测绘的小杨9 小时前
CompassFusion:一个从 GNSS 到 GNSS/INS 组合导航的独立工程包
python
zzzzzz31016 小时前
当产品经理说这个很简单:我用Python自动化处理奇葩需求的实战指南
python·pycharm·产品经理
雪隐16 小时前
个人电脑玩AI-06让5060 Ti给你打工——不光能画画,Qwen3-TTS还能学人说话,连我老板都信了!
人工智能·后端·python
兵慌码乱1 天前
面向桌面端的资产管理系统分层架构设计与核心模块实现
python·系统架构·sqlite·pyqt5·数据库设计·桌面应用开发·mvc架构
hboot1 天前
AI工程师第三课 - 机器学习基础
python·scikit-learn·kaggle
顾林海1 天前
Agent入门阶段-编程基础-Python:流程控制
python·agent·ai编程
呱呱复呱呱2 天前
Django CBV 源码解读:一个请求是怎么找到你的 get() 方法的
python·django
曲幽2 天前
刚部署的 LibreTranslate 频频翻车?我掏出了 20 年前的 StarDict 词典,用 FastAPI 搭了个本地词典翻译 API
python·fastapi·web·translate·goldendict·libretranslate·stardict·pystardict
荣码2 天前
用Streamlit给AI应用套个界面,10行代码出Web页面
java·python
兵慌码乱2 天前
基于Python+PyQt5+SQLite的药房管理系统实现:事务一致性与界面解耦全流程解析
python·sqlite·信号与槽·pyqt5·数据库设计·桌面应用开发·事务处理