当前位置: 首页 > news >正文

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.lryc.cn/news/144356.html

相关文章:

  • C++ list模拟实现
  • 中国建筑出版传媒许少辉博士八一新书乡村振兴战略下传统村落文化旅游设计日京东当当畅销榜自由营九三学
  • C语言(第三十二天)
  • arcgis+postgresql+postgis使用介绍
  • 机器视觉之开运算和闭运算
  • 【python爬虫】—URL管理器的实现
  • Oracle 19C RAC安装PSU oui-patch.xml权限错误
  • 华为数通方向HCIP-DataCom H12-821题库(单选题:161-180)
  • ResNet详解:网络结构解读与PyTorch实现教程
  • ChatGPT 随机动态可视化图表分析
  • 国标视频融合云平台EasyCVR视频汇聚平台的应用场景及其功能说明
  • 后端面试话术集锦第三篇:spring cloud 面试话术
  • React 18 选择 State 结构
  • LNMT与动静分离
  • 【java】LinkedList 和 ArrayList的简介与对比
  • 机器学习基础14-算法调参(基于印第安糖尿病Pima数据集)
  • ASUS华硕天选4笔记本电脑FA507XV原厂Windows11系统22H2
  • IET独立出版 | EI检索 | 2023年第三届机械、航空航天与汽车工程国际会议
  • 【Pytorch】CUDA error: no kernel image is available for execution on the device
  • dolphinschedule配置企微告警服务(WeChat群组)
  • Git中smart Checkout与force checkout
  • Java“牵手”1688商品跨境属性数据,1688API接口申请指南
  • Win解答 | 解决键盘中 字母+空格 导致的输入法弹窗导致的一系列问题
  • WPF读取dicom序列:实现上一帧、下一帧、自动播放、暂停
  • homeassistant ubuntu自启动 网络设置
  • 生成式AI背景下编程工作者的技术和高级软考理论的演进融合之路
  • RabbitMQ的镜像队列
  • 【Spring Boot】数据库持久层框架MyBatis — Spring Boot构建MyBatis应用程序
  • 【校招VIP】专业课考点之session cookie
  • IDEA集成Git相关操作知识(pull、push、clone)