Django(8)-静态资源引用CSS和图片

news2024/12/27 10:45:07

除了服务端生成的 HTML 以外,网络应用通常需要一些额外的文件——比如图片,脚本和样式表——来帮助渲染网络页面。在 Django 中,我们把这些文件统称为“静态文件”。

我们使用static文件来存放静态资源,django会在每个 INSTALLED_APPS 中指定的应用的子文件中寻找名称为 static 的特定文件夹

引用CSS样式

创建文件polls/static/polls/style.css

li a {
    color: green;
}

在 polls/templates/polls/index.html 的文件头添加以下内容

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

重新载入 http://localhost:8000/polls/ ,你会发现有问题的链接是绿色的 (这是 Django 自己的问题标注方式),这意味着你追加的样式表起作用了。

引用图片

为图像创建一个子目录。 在 polls/static/polls/ 目录中创建 images 子目录。 在此目录中,添加您想用作背景的任何图像文件。

body {
    background: white url("images/background.png") no-repeat;
}

将一张图片放在该文件夹下background.png

在样式表中添加对图像的引用(polls/static/polls/style.css

浏览器重载 http://localhost:8000/polls/,你将在屏幕的左上角见到这张背景图

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/939716.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【已解决】pycharm突然双击无法打开,重启电脑也不管用

1.问题&#xff1a; pycharm突然双击无法打开&#xff0c;重启电脑也不管用 2.解决 2.1 方法一&#xff08;修改Roaming&#xff09; 1.找到C盘对应路径下的pycharm版本 2. 用记事本打开文件类型为VMOPTIONS文件 3. 修改或删除最后一行的映射路径 4.保存退出 2.2 方法二…

无涯教程-Python机器学习 - Analysis of Silhouette Score函数

剪影得分的范围是[-1,1]。其分析如下- 1分数-接近1 剪影分数表示样本距离其邻近簇很远。 0分数-0 剪影分数表示样本在将两个相邻聚类分隔开的决策边界上或非常接近。 -1分数-1 剪影分数表示样本已分配给错误的聚类。 Silhouette得分的计算可以使用以下公式完成 $$剪影得…

FAB厂逃离指南—转行IC之经验分享!

一、为什么转行&#xff1f; 毕业后&#xff0c;我在成都一家国企做面板半导体工艺&#xff0c;说是工艺但是去了得先学习了解进口的设备半年左右&#xff0c;还得上夜班。&#xff08;这里给各位一个小小的建议&#xff1a;如果毕业找FAB厂类工作要慎重&#xff0c;非纯研发岗…

《机器学习在车险定价中的应用》实验报告

目录 一、实验题目 机器学习在车险定价中的应用 二、实验设置 1. 操作系统&#xff1a; 2. IDE&#xff1a; 3. python&#xff1a; 4. 库&#xff1a; 三、实验内容 实验前的猜想&#xff1a; 四、实验结果 1. 数据预处理及数据划分 独热编码处理结果&#xff08;以…

【QT】ComboBox的使用(14)

ComboBox这个控件我常用于多文本的储存、调用&#xff0c;正如他的中文意思为&#xff1a;下拉列表框。 下拉列表框&#xff1a;字面意思就是一个多文本的列表框&#xff0c;今天来看下如何使用ComboBox这个控件。 一.环境配置 1.python 3.7.8 可直接进入官网下载安装&…

恒运资本:“鹰派”讲话吓坏市场?美股大跳水后反弹!

鲍威尔表示&#xff0c;“如果适宜&#xff0c;美联储准备继续加息”。 北京时间8月25日晚间&#xff0c;美联储主席鲍威尔在杰克逊霍尔全球央行年会上发表讲话。 鲍威尔在讲话过程中&#xff0c;警告通胀“依旧过高”&#xff0c;以及“如果适宜&#xff0c;美联储准备继续加…

会话跟踪技术 【CookieSession】

会话技术 1 会话跟踪技术的概述2 Cookie2.1 Cookie的基本使用2.1.1 概念2.1.2 Cookie的工作流程2.1.3 Cookie的基本使用2.1.3.1 发送Cookie2.1.3.2 获取Cookie 2.2 Cookie的原理分析2.3 Cookie的使用细节2.3.1 Cookie的存活时间2.3.2 Cookie存储中文 3 Session3.1 Session的基本…

多线程学习之生产者和消费者与阻塞队列的关系

生产者和消费者 概述&#xff1a; 生产者消费者问题&#xff0c;实际上主要是包含了两类线程&#xff1a; 生产者线程用于生产数据消费者线程用于消费数据 生产者和消费者之间通常会采用一个共享的数据区域&#xff0c;这样就可以将生产者和消费者进行解耦&#xff0c; 两…

1.MIMO信号检测

目录 最优信号检测算法 次最优信号检测算法 分层信号检测算法 线性信号检测算法 迫零线性信号检测算法 最小均方误差线性信号检测算法 非线性信号检测算法 在MIMO-OFDM系统中&#xff0c;信号检测算法可以通过将MIMO系统的信号检测算法应用于各个并行的子信道进行信号…

java八股文面试[JVM]——类初始化过程

回顾类加载过程&#xff1a; 知识来源&#xff1a; 【2023年面试】Class初始化过程是什么_哔哩哔哩_bilibili

哪种类型耳机不伤耳朵,对耳朵伤害最小的耳机类型

在骨传导耳机的普及浪潮下&#xff0c;人们越来越意识到长期使用传统耳机对耳道造成的伤害。许多朋友纷纷转向相对更加护听的骨传导耳机&#xff0c;但仍有一部分人对这项技术不太了解&#xff0c;甚至被误导认为骨传导耳机会对听力和大脑造成伤害。因此&#xff0c;我将给大家…

【应用层】网络基础 -- HTTPS协议

HTTPS 协议原理加密为什么要加密常见的加密方式对称加密非对称加密 数据摘要&&数据指纹 HTTPS 的工作过程探究方案1-只使用对称加密方案2-只使用非对称加密方案3-双方都使用非对称加密方案4-非对称加密对称加密中间人攻击-针对上面的场景 CA认证理解数据签名方案5-非对…

Redis限流实践:实现用户消息推送每天最多通知2次的功能

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

log4net 输出中文乱码

如上图 在appender属性内加入 <param name"Encoding" value"utf-8" /> 问题解决!

区块链金融项目怎么做?

区块链技术的兴起引发了金融领域的变革&#xff0c;为金融行业带来了前所未有的机遇与挑战。在这个快速发展的领域中&#xff0c;如何在区块链金融领域做出卓越的表现&#xff1f;本文将从专业性和思考深度两个方面&#xff0c;探讨区块链金融的发展路径&#xff0c;并为读者提…

Crazyswarm无人机集群套件,为开发者提供一个实验、学习和开发的验证平台

无人机集群技术有着广泛的潜力应用&#xff0c;如搜索和救援、环境监测、农业、建筑、物流等。通过多个无人机的协同工作&#xff0c;可以提高效率、扩展覆盖范围以及执行一些单个无人机难以完成的任务。为实现室内环境无人机集群算法的验证以及更复杂的任务和应用&#xff0c;…

防静电地桩工程的流程和步骤

防静电地桩工程是在半导体生产厂房中非常重要的一项工程&#xff0c;它的目的是为了有效地消除或减少静电的积聚和释放&#xff0c;保护设备和产品。以下是进行防静电地桩工程的流程和步骤&#xff1a; 1. 规划与设计&#xff1a;首先需要根据厂房的布局、设备位置和业务需求来…

ES面试总结

前言 1、面试突击正确的学习姿势 老师在给你讲面试突击的时候&#xff0c;是有课件的&#xff0c;而且是有准备的。你在面试的时候&#xff0c;是没有笔记课件的&#xff0c;而且问题是由面试官提问的&#xff0c;具有一定的随机性面试突击课程的目标不是听懂&#xff0c;而是…

从原理到实战,手把手教你在项目中使用RabbitMQ

大家好呀&#xff0c;我是楼仔。 RabbitMQ 的文章之前写过&#xff0c;但是当时给的示例是 Demo 版的&#xff0c;这篇文章主要是结合之前写的理论知识&#xff0c;将 RabbitMQ 集成到技术派项目中。 不 BB&#xff0c;上文章目录&#xff1a; 下面我们先回顾一下理论知识&am…

【Hadoop】DataNode 详解

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,Java基础学习,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的…