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

相关推荐
BBB努力学习程序设计2 小时前
Python面向对象编程:从代码搬运工到架构师
python·pycharm
rising start2 小时前
五、python正则表达式
python·正则表达式
BBB努力学习程序设计2 小时前
Python错误处理艺术:从崩溃到优雅恢复的蜕变
python·pycharm
我叫黑大帅2 小时前
什么叫可迭代对象?为什么要用它?
前端·后端·python
Dillon Dong2 小时前
Django + uWSGI 部署至 Ubuntu 完整指南
python·ubuntu·django
k***82513 小时前
python爬虫——爬取全年天气数据并做可视化分析
开发语言·爬虫·python
new_dev3 小时前
Python网络爬虫从入门到实战
爬虫·python·媒体
q***01653 小时前
Python爬虫完整代码拿走不谢
开发语言·爬虫·python
今天没有盐3 小时前
Python算法实战:从滑动窗口到数学可视化
python·pycharm·编程语言
Learn Beyond Limits3 小时前
Data Preprocessing|数据预处理
大数据·人工智能·python·ai·数据挖掘·数据处理