1 新建一项目：

root@python:django-admin.py startproject csstest

root@python:cd csstest

root@python:ls

csstest(__init__.py settings.py urls.py wsgi.py) manage.py

注：使用命令新建一项目文件，进入该项目，显示一个与项目同名的文件夹（此文件夹包含4个文件，如上所示）和一个管理python格式的文件。

2 新建一应用：

root@python:adjango-admin.py startapp myapp

root@python:ls

myapp(__init__.py models.py tests.py views.py) csstest(__init__.py settings.py urls.py wsgi.py) manage.py

注：1，此命令及下面的所有命令，都是在1步骤后的当前目录，即项目目录；

2，此步使用命令新建一应用，显示后，比1多出一个应用文件夹（此文件夹内包含4个文件，如上所示）。

3 新建模块文件夹

root@python:mkdir static templates

注：新建一模板文件夹，用来存放模板文件，如html格式的文件。

4 新建静态文件文件夹

root@python:mkdir myapp/static

注：在应用下新建一文件夹（最好命名为static），用来存放含有css，js或图片的文件。

5 添加测试代码

(1)root@python:vim csstest/urls.py

只添加：url(r'^$',include('myapp.urls')),

(2)root@python:vim myapp/urls.py

from django.ocnf.urls import *

from django.conf import settings

ulrpatterns = patterns('',

url('^','myapp.views.index'),

url('^static/(?P<path>.*)$','django.views.static.serve',{'document_root':settings.STATIC_ROOT},name='static'),

)

(3)root@python:vim myapp/views.py

from django.shortcuts import render_to_response

def index(req):

return render_to_response('indexl.html'）

(4)root@python:vim templates/index.py

<html>

<link href="/static/style.css" ref="stylesheet" type="text/css" />

<head>

<title> my index </title>

</head>

<body>

<h1>  my first Django web </h1>

<div>

<div> my first div </div>

<div> my second div </div>

</div>

</body>

</html>

(5)root@python:vim myapp/static/style.css

body {background-color:red;}

注：1，此过程是安装Django的运行过程添加的代码，即当我们在浏览器中输入：127.0.0.1：8000后，系统首先运行csstest/urls.py，找到匹配的url后，接着进入myapp/urls.py，找到最终的视图文件，响应myapp/views.py,在该视图文件中，去返回templates/index.html的文件，由于该文件用到了静态文件css，所以在myapp/static/下添加文件style.css。

2，逆过来说，首先要配置，在csstest/settings.py下配置STATIC_ROOT、STATIC_URL、TEMPLATE_DIRS、INSTALLED_APPS；

其次， url('^static/(?P<path>.*)$','django.views.static.serve',{'document_root':settings.STATIC_ROOT},name='static'),

再次，<link href="/static/style.css" ref="stylesheet" type="text/css" />，这里的红包static最好相对应，如可以命名为site_static等。

6 配置

root@python:vim csstest/settings.py

STATIC_ROOT= os.path.join(os.path.dirname(os.path.dirname(__file__)),'static').replace('\\','/')　

STATIC_URL = '/static/'

TEMPLATE_DIRS(

'/home/django/csstest/templates',

)

INSTALLED_APPS(　

.......

'myapp',

)

7 显示效果：

即添加红色的背景（第5步的（5））

Django配置静态文件（CSS\js)及Django调用JS、CSS、图片等静态文件的更多相关文章

  1. python-execjs(调用js)

    一.安装 pip3 install PyExecJS 电脑上要有nodejs环境 二.使用 一.获取js字符串 首先将js保存至于本地文件或者你可以可以直接读到内存,必须让js以字符串的形式展示 注意 ...

  2. 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位

     文件正在上传的转圈圈gif图片  一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验. <!--S 遮罩层 --> <div id="mas ...

  3. JS调用App方法及App调用JS方法

    做App内嵌H5项目时,经常会遇到js与App的交互,最普遍的就是方法的互相调用,那么如何实现方法的互相调用呢? 写在前面: 如果只是小项目且后期扩大的可能性不大的时候,可以忽略,可如果是长期项目的话 ...

  4. iOS:在OC中调用JS脚本

    示例一:在webView中调用js脚本进行搜索 1.首先导入JavaScriptCore.framework这个框架 2.创建webView.设置代理.请求手机端百度 #import "Vi ...

  5. Java&Selenium调用JS实现高亮被操作页面元素高亮

    Java&Selenium调用JS实现高亮被操作页面元素高亮 /* * the method of invoking js to do something * * @author daviey ...

  6. Django调用JS、CSS、图片等静态文件

    zz 在下面的例子中,我们将media作为静态(CSS\JS\图片文件)文件的目录 方法一. 1.首先在settings.py文件中自定义参数 STATIC_PATH=’./media’ .(意为当前 ...

  7. Django: 配置和静态文件

    运行django-admin.py startproject [project-name] 命令会生成一系列文件,在django 1.6版本以后的settings.py文件中有以下语句: # Buil ...

  8. Django配置与静态文件

    settings.py """ Django settings for myproject project. Generated by 'django-admin sta ...

  9. Django 配置访问静态文件

    1.settings.py 首先在 settings 文件中,引用 os 模块: import os   定义根目录: BASE_DIR = os.path.dirname(os.path.dirna ...

  10. django配置静态文件

    django配置静态文件 参考文章链接:http://blog.csdn.net/hireboy/article/details/8806098

随机推荐

  1. poj3080解题报告（暴力、最大公共子串）

    POJ 3080,题目链接http://poj.org/problem?id=3080 题意: 就是求m个长度为60的字符串的最长连续公共子串,2<=m<=10 规定: 1.最长公共串长度 ...

  2. nodejs的mysql模块学习(三)数据库连接配置选项详解

    连接选项 当在创建数据连接的时候 第一种大多数人用的方法 let mysql = require('mysql'); let connection = mysql.createConnection({ ...

  3. 并查集（UVA 1106）

    POINT: 把每个元素看成顶点,则一个简单化合物就是一条无向边,若存在环(即k对组合中有k种元素),则危险,不应该装箱,反之,装箱: 用一个并查集维护连通分量集合,每次得到一种化合物(x, y)时检 ...

  4. 虚拟机 VirtualBox 自制帮助文档

    初学 VirtualBox ,网络上教程很多,图片一张一张的费流量,讲得又比较散,于是花了一下午制作了此 CHM 帮助文档. 下载:(图片另存为--重命名为 RhinoC.rar --解压缩)

  5. input 데이터의 자판입력모드의 한글/영문 자동전환, 영문고정 하는 방법 웹프로그래밍 팁

      input 태그의 style 속성의 ime-mode 변경으로 한글/영문의 자동전환이나 영문만 입력이 되도록 할 수 있다.     style="ime-mode:activ ...

  6. Jersey(1.19.1) - Building URIs

    A very important aspects of REST is hyperlinks, URIs, in representations that clients can use to tra ...

  7. MongoDB - Installing MongoDB on Linux

    1. 下载最新稳定版本的安装包. [huey@huey mongodb]$ wget -c --no-check-certificate https://fossies.org/linux/misc/ ...

  8. C#操作Excel数据增删改查示例

    Excel数据增删改查我们可以使用c#进行操作,首先创建ExcelDB.xlsx文件,并添加两张工作表,接下按照下面的操作步骤即可 C#操作Excel数据增删改查. 首先创建ExcelDB.xlsx文 ...

  9. Ｃ标准库函数实现之strstr(转)

    看下Linux下的实现: char *strstr(const char *s1, const char *s2) { size_t l1, l2; l2 = strlen(s2); if (!l2) ...

  10. SecureCRT连接虚拟机中的Linux系统(Ubuntu)

    最近在学习Linux,看了网上很多SecureCRT连接本地虚拟机当中的Linux系统,很多都是需要设置Linux的配置文件,有点繁琐,所以自己就摸索了一下,把相关操作贴出来分享一下. SecureC ...