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

相关推荐
2601_962295997 分钟前
Spark 和 Kafka 实现 Python 大规模情感分析
python·spark·kafka·情感分析·大规模处理
计算机源码社11 分钟前
分享一个基于大数据的跨平台内容生态画像与互动等级分析系统,基于Hadoop+Spark的社交媒体互动数据可视化大屏分析
大数据·hadoop·python·机器学习·数据挖掘·spark·毕业设计
砚底藏山河18 分钟前
行情工程实战 M01|存储选型 CSVSQLiteMySQL
java·python·金融·maven
小刘在重生~26 分钟前
Django 全套入门笔记|安装、项目创建、ORM、Form、中间件、登录认证
笔记·中间件·django
在所不辞兄33 分钟前
【零基础学智能仿真-11】CatBoost——让材料类型和边界条件参与力学预测
人工智能·python·深度学习·神经网络·机器学习·工程技术
2601_9620976939 分钟前
python的多线程编程之锁
python·多线程·同步·事件·
1 小时前
Python 图片处理:裁剪缩放至300×200,格式JPG/PNG/GIF,控制大小≤100KB
linux·前端·python
2601_962294611 小时前
Python工具软件开发:借助InsCode AI IDE开启智能编程新时代
ide·python·ai·开发工具·智能化编程
2601_962097363 小时前
GraphQL,Grafana和Dash
python·grafana·数据可视化·graphql·dash
benchmark_cc10 小时前
REST API 和 Python SDK 应该怎么选?量化交易数据接口选型实战
开发语言·python·数据分析·pandas·量化交易·股票数据·quantdash