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

相关推荐
笃励16 分钟前
Java面试题二
java·开发语言·python
赖勇浩39 分钟前
因浏览器未发送Referer HTTP头导致Django项目CSRF验证失败的原因
http·https·django·csrf
一颗星星辰1 小时前
Python | 第九章 | 排序和查找
服务器·网络·python
打码人的日常分享1 小时前
企业人力资源管理,人事档案管理,绩效考核,五险一金,招聘培训,薪酬管理一体化管理系统(源码)
java·数据库·python·需求分析·规格说明书
27669582921 小时前
京东e卡滑块 分析
java·javascript·python·node.js·go·滑块·京东
unix2linux1 小时前
Parade Series - SHA256
linux·python·mysql·shell
巽星石2 小时前
【Blender Python】7.一些运算、三角函数以及随机
python·blender·三角函数·随机·环形阵列
CSXB992 小时前
一、Python(介绍、环境搭建)
开发语言·python·测试工具·集成测试
Mopes__2 小时前
Python | Leetcode Python题解之第461题汉明距离
python·leetcode·题解
EterNity_TiMe_2 小时前
【机器学习】智驭未来:探索机器学习在食品生产中的革新之路
人工智能·python·机器学习·性能优化·学习方法