zoukankan      html  css  js  c++  java
  • django开发项目实例2--如何链接图片和css文件(静态文件)

    在上一篇随笔里面,我们已经介绍了如何从零开始用django建立一个项目并且初步运行以来了,

    现在我们就要开始写我们的html了,也就是django里面的模板了,不过这节我们只讲如何链接图片和css(静态文件)

    上一篇随笔里面我们说了如何设置templates的了,这里不赘述

    1:准备工作,工欲善其事必先利其器,我们先要准备好html和css的编辑软件

    html可以用sublime text来编辑,sublime text有一个好处是可以管理整个项目,也可以用frontpage,点此下载

    css可以用任何一个文本编辑器来写,但我个人比较推荐visual css,点此下载

    2:设置settings.py,主要是设置静态文件在本地的存放路径,也就是你的static文件夹的位置,注意文件路径是/而不是

    STATICFILES_DIRS = (
        # Put strings here, like "/home/html/static" or "C:/www/django/static".
        # Always use forward slashes, even on Windows.
        # Don't forget to use absolute paths, not relative paths.
        "D:/qiweijie/qwj/templates/static",
    )

    3:把你的图片和css文件放到static文件夹下面

    4:实例:

    1. html,在html的基板模板里面记得加上一句{% load staticfiles %},否则会失败的
      <html>
      <head>
      <title>戚伟杰的个人主页</title>
      <meta http-equiv=Content-Type content="text/html"; charset="utf-8">
      <meta http-equiv="Content-Language" content="zh-cn">
      <meta name="author" content="qiweijie">
      <meta name="keywords" content="戚伟杰,个人主页">
      {% load staticfiles %}
      <link href="{% static "qwj.css" %}" type="text/css" rel="stylesheet">
      </head>
      <body>
      <div>
      <p id="test">test</p>
      <img src="{% static "images/22_top.jpg" %}" alt="images/22_top.jpg">
      </div>
      </body>
      </html>
    2. css,直接贴代码
      body {
          background-image:url("images/2e_bg.jpg")
      }
      p {
          color:red
      }
    3. 项目结构图和效果图
  • 相关阅读:
    Nginx如何配置基础缓存
    Websocket消息过长自动断开连接?
    Docker错误删除Postgresql容器如何恢复?
    Docker安装带中文全文搜索插件zhparser的Postgresql数据库
    Postgresql数据库安装中文全文搜索插件zhparser的问题
    Presto通过RESTful接口新增Connector
    在windows的IDEA运行Presto
    Druid.io通过NiFi摄取流数据
    Druid.io SQL乱码问题
    Druid.io启用SQL支持
  • 原文地址:https://www.cnblogs.com/qwj-sysu/p/3607131.html
Copyright © 2011-2022 走看看