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

除了服务端生成的 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.rhkb.cn/news/110203.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ReoGrid.NET集成到winfrom

ReoGrid一个支持excel操作的控件,支持集成到任何winfrom项目内。 先看效果图: 如何使用&#xff1a; 使用ReoGrid自带excel模版设计工具先设计一个模版,设计器如下&#xff1a; 具体例子看官方文档 代码示例如下&#xff1a; var sheet reoGridControl1.CurrentWorksheet; …

从C语言到C++_34(C++11_下)可变参数+ lambda+function+bind+笔试题

目录 1. 可变参数模板 1.1 展开参数包 1.1.1 递归函数方式展开 1.1.2 逗号表达式展开 1.2 emplace相关接口 2. lambda表达式&#xff08;匿名函数&#xff09; 2.1 C11之前函数的缺陷 2.2 lambda表达式语法 2.3 函数对象与lambda表达式 3. 包装器 3.1 function包装器…

华为云服务器前后端分离项目打包上传及nginx配置

目录 1、Spring Boot项目打包 2、后端上传到云服务器 3、前端打包 1&#xff09;前端请求路径修改 2&#xff09;打包上传 4、下载nginx 1&#xff09;添加源 2&#xff09;安装Nginx 3&#xff09;查看nginx安装目录和版本 4&#xff09;启动 重启nginx命令 5&#…

Midjourney学习(一)prompt的基础

prompt目录 sd和mj的比较prompt组成风格表现风格时代描述表情色彩情绪环境 sd和mj的比较 自从去年9月份开始&#xff0c;sd就变得非常或火&#xff0c;跟它一起的还有一个midjourney。 他们就像是程序界的两种模式&#xff0c;sd是开源的&#xff0c;有更多的可能性更可控。但是…

嵌入式学习笔记——ARM的编程模式和7种工作模式

ARM提供的指令集 ARM态-ARM指令集&#xff08;32-bit&#xff09; Thumb态-Thumb指令集&#xff08;16-bit&#xff09; Thumb2态-Thumb2指令集&#xff08;16 & 32 bit&#xff09; Thumb指令集是对ARM指令集的一个子集重新编码得到的&#xff0c;指令长度为16位。通常在…

windows系统配置tcp最大连接数

打开注册表 运行->regedit HKLM\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters目录下 增加一个MaxUserPort&#xff08;默认值是5000&#xff0c;端口范围是1025至5000&#xff09;MaxUserPort设置为65534&#xff08;需重启服务器&#xff09; 执行dos命令&…

克服紧张情绪:程序员面试心理准备的关键

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

AI助力智能安检,基于图像目标检测实现危险品X光智能安全检测系统

基于AI相关的技术来对一些重复性的但是又比较重要的工作来做智能化助力是一个非常有潜力的场景&#xff0c;关于这方面的项目开发实践在我之前的文章中也有不少的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a;《AI助力智能安检&#xff0c;基于目标检测模型实现…

【UE5:CesiumForUnreal】——3DTiles数据属性查询和单体高亮

目录 0.1 效果展示 0.2 实现步骤 1 数据准备 2 属性查询 2.1 射线检测 2.2 获取FeatureID 2.3 属性查询 2.4 属性显示 3 单体高亮 3.1 构建材质参数集 3.2 材质参数设置 3.3 添加Cesium Encode Metadata插件 3.4 从纹理中取出特定FeatureId属性信息 3.5 创建…

linux+QT+FFmpeg 6.0,把多个QImage组合成一个视频

直接上代码吧: RecordingThread.h#ifndef RECORDINGTHREAD_H #define RECORDINGTHREAD_H #include "QTimer" #include <QObject> #include <QImage> #include <QQueue>extern "C"{//因为FFmpeg是c语言,QT里面调用的话需要extern "C…

7、监测数据采集物联网应用开发步骤(5.3)

监测数据采集物联网应用开发步骤(5.2) 静态配置库数据库调用&#xff0c;新建全局变量初始化类com.zxy.main.Init_Page.py #! python3 # -*- coding: utf-8 -Created on 2017年05月10日 author: zxyong 13738196011 from com.zxy.z_debug import z_debug from com.zxy.common…

新SDK平台下载开源全志V853的SDK

获取SDK SDK 使用 Repo 工具管理&#xff0c;拉取 SDK 需要配置安装 Repo 工具。 Repo is a tool built on top of Git. Repo helps manage many Git repositories, does the uploads to revision control systems, and automates parts of the development workflow. Repo is…

开发新能源的好处

风能无论是总装机容量还是新增装机容量&#xff0c;全球都保持着较快的发展速度&#xff0c;风能将迎来发展高峰。风电上网电价高于火电&#xff0c;期待价格理顺促进发展。生物质能有望在农业资源丰富的热带和亚热带普及&#xff0c;主要问题是降低制造成本&#xff0c;生物乙…

设计模式入门笔记

1 设计模式简介 在IT这个行业&#xff0c;技术日新月异&#xff0c;可能你今年刚弄懂一个编程框架&#xff0c;明年它就不流行了。 然而即使在易变的IT世界也有很多几乎不变的知识&#xff0c;他们晦涩而重要&#xff0c;默默的将程序员划分为卓越与平庸两类。比如说&#xff…

战略文化派,战略形成是集体信念和愿景形成的过程

战略文化派&#xff1a;战略形成是集体信念和愿景形成的过程 趣讲大白话&#xff1a;在乎集体认同 【趣讲信息科技271期】 **************************** 关于企业文化的故事很多 比如&#xff1a;中国海尔砸冰箱后蜕变的文化 比如&#xff1a;日本的稻盛和夫倡导的东方利他文化…

基于空洞卷积DCNN与长短期时间记忆模型LSTM的dcnn-lstm的回归预测模型

周末的时候有时间鼓捣的一个小实践&#xff0c;主要就是做的多因子回归预测的任务&#xff0c;关于时序数据建模和回归预测建模我的专栏和系列博文里面已经有了非常详细的介绍了&#xff0c;这里就不再多加赘述了&#xff0c;这里主要是一个模型融合的实践&#xff0c;这里的数…

网络编程套接字(3): 简单的TCP网络程序

文章目录 网络编程套接字(3)4. 简单的TCP网络程序4.1 服务端创建(1) 创建套接字(2) 绑定端口(3) 监听(4) 获取新连接(5) 处理读取与写入 4.2 客户端创建(1)连接服务器 4.3 代码编写(1) v1__简单发送消息(2) v2_多进程版本(3) v3_多线程版本(4) v4_线程池版本 网络编程套接字(3)…

如何使用CSS实现一个自适应等高布局?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用 Flexbox 布局⭐ 使用 Grid 布局⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发…

爬虫逆向实战(二十三)--某准网数据

一、数据接口分析 主页地址&#xff1a;某准网 1、抓包 通过抓包可以发现数据接口是api_to/search/company_v2.json 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现b参数和kiv参数是加密参数 请求头是否加密&#xff1f; 无响应是否加…

在云原生时代,构建高效的大数据存储与分析平台

文章目录 1. **选择适当的数据存储技术&#xff1a;**2. **采用分布式架构&#xff1a;**3. **数据分区和索引&#xff1a;**4. **采用列式存储&#xff1a;**5. **数据压缩和编码&#xff1a;**6. **使用缓存技术&#xff1a;**7. **数据分片和复制&#xff1a;**8. **自动化运…