当前访客身份:游客 [ 登录  | 注册加入尚学堂]
直播

openstack爱好者

拥有积分:3
这家伙太懒,还没有签名!

博客分类

笔记中心

课题中心

提问中心

答题中心

解答题中心

django开发项目实例2--如何链接图片和css文件(静态文件)

openstack爱好者 发表于 2年前 (2015-01-13 22:40:41)  |  评论(0)  |  阅读次数(621)| 0 人收藏此文章,   我要收藏   

在上一篇随笔里面,我们已经介绍了如何从零开始用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. 项目结构图和效果图

 

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183