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. 通过java实现对数据库的增删改查

    package cn.hncu; import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet; ...

  2. Steps to disable DRLs with GM Tech2 scanner

    It is possible to get daytime running time disabled manually. But the problem can be easily settled ...

  3. 高德地图 JavaScript API 开发系列教程（二）

    上节简单介绍高德地图JavaScript API及网页中基本地图展示.有了地图后我们可以用来做什么?有人说离我最近的超市在哪里,我怎么去?别急,这些功能我们后面都会慢慢实现.今天为大家详细讲解如何在地 ...

  4. 安卓Design包之TabLayout控件的使用

    转自: 安卓Design包之TabLayout控件的简单使用 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android ...

  5. Java垃圾回收（GC）与引用的种类

    垃圾回收 GC public class MyObject {     private String id;     public MyObject(String id) {         this ...

  6. LeetCode 61

    Rotate List Given a list, rotate the list to the right by k places, where k is non-negative. For exa ...

  7. Linux 命令 - printenv: 打印全部或部分环境信息

    命令格式 printenv [OPTION]... [VARIABLE]... 命令参数 -0, --null 以空字符而非换行符结束每一输出行. --help 显示帮助信息. --version 显 ...

  8. 在Delphi中,关于数组名称

    动态数组数组名代表的是第一个元素的内存地址. 静态数组名称代表的是数组第一个元素的内存位置, 而不是数组第一个元素的内存地址. 但对于静态数组,在某些情况下编译器可能会自动取数组地址,如: funct ...

  9. AngularJS Boostrap Pagination Sample

    首先,样式是这样的 首先,Service端是Webapi REST JSON格式 第二,我们建立一个Wrapper Class,这里你也可以定义一个Generic<T>,作为示例,我们这里 ...

  10. C＃中的DateTime：本周第一天，本月第一天，今年第一天，本周第一天的时间

    有时辰需要按照当前时刻,断定其它的都没有什么难度,只是本季度稍稍麻烦些.因为一年有四个季度,可以按照当前月份,获得本季度第一个月的月份,然后这个月的第一天,就是本季度的第一天了 DateTime dt ...