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. 项目结构图和效果图

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM