问题:css样式不能控制html样式(针对开发环境,不针对生产环境)

现象:

django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 6: '/s
tatic/css/main.css'. Did you forget to register or load this tag?

操作步骤:

1、首先查看setting.py文件INSTALLED_APPS中是否有 'django.contrib.staticfiles'

INSTALLED_APPS = [
'country.apps.CountryConfig',
'west.apps.WestConfig',
'polls.apps.PollsConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles', #该静态文件app一定加上
]

2、查看setting.py文件,TEMPLATES是否有'django.core.context_processors.static'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.
messages',
'django.core.context_processors.static',#一定要加上
],
},
},
]

3、setting文件静态文件URL路径,静态文件路径

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "/country/static"),#country是生成的APP
]

4、urls.py(和setting.py同目录下的url.py),在urlpatterns 中添加

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

from django.conf import settings

urlpatterns = [
url(r'country/', include('country.urls')),
url(r'^west/', include('west.urls')),
url(r'^polls/', include('polls.urls')),
url(r'^admin/', admin.site.urls),
url(r'^static/(?P<path>.*)$','django.views.static.serve',{'document_root':settings.STATIC_ROOT})# 注意添加
]

5、在自定义的APP目录下添加静态文件夹和静态文件(css)

6、在html文件引入css外部文件(步骤5中文件)

{% load static %}# 载入静态文件
{% load staticfiles %}
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/static/css/main.css" /> # 注意外部CSS连接href书写格式
<meta charset="UTF-8">
<title>{{Title}}</title>
</head>

django 1.9.7 css控制模板样式的更多相关文章

  1. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  2. CSS控制列表样式属性list-style有哪些?怎么用?

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  3. 【学习DIV+CSS】2. 学习CSS(一)--CSS控制页面样式

    1. CSS如何控制页面 使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现C ...

  4. CSS 控制滚动条样式

    /*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略.下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/ #s ...

  5. CSS控制checkbox样式

    原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...

  6. jquery 利用CSS 控制打印样式

    一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: <link rel="stylesheet" href="cs ...

  7. css 控制滚动样式

    ::-webkit-scrollbar{width: 8px; height: 8px;}::-webkit-scrollbar-button:vertical{display:none;}::-we ...

  8. CSS控制表格(table)样式

    CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}

  9. web的各种前端打印方法之CSS控制网页打印样式

    来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...

随机推荐

  1. flex布局 响应式布局

    移动端页面开发流程   移动端页面布局 一.移动端app分类 1.Native App原生app手机应用程序 使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是objec ...

  2. tomcat去掉项目名称

    进入tomcat的conf目录,查看server.xml,找到<Host></Host>,在里面添加<Context path="" docBase= ...

  3. CentOS SSH免密登陆

    #环境说明客户机:Mac OS X服务器:CentOS 6.5客户端:OpenSSH,OS X及大多数Linux都内置了OpenSSH.’ssh -v’命令可以查看版本. #大致流程1.在客户机创建一 ...

  4. 实现用 jquery 禁用浏览器的前进后退按钮

  5. 第5章 实现windows程序的数据绑定

    1:连接式: command 对象负责对数据库的执行命令 DataReader 对象负责从数据源中读取数据 connection 对象负责链接数据库 断开式: 数据集的Dataset存放在独立的数据源 ...

  6. Python day2 基础 2 数据类型

    数据类型初识 1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4.(-5+4j)和 ...

  7. Wi-Fi 协议和数率?

    IEEE 802.11Wi-Fi 协议摘要 协议 频率 信号 最大数据速率 传统 802.11 2.4GHz FHSS 或 DSSS 2Mbps 802.11A 5GHz OFDM 54Mbps 80 ...

  8. oralce 批量更新

    <update id="batchUpdateCompensatoryData" parameterType="java.util.List"> & ...

  9. Openresty 安装第三方插件

    Openresty 安装第三方插件 程序媛没有夜生活 2016.08.02 15:33* 字数 167 阅读 1283评论 0喜欢 2 在安装之前,我们先来看一下我们现有的模块. 1.将需要安装的插件 ...

  10. 以太坊如何使用CPU挖矿?

    CPU挖掘 你可以用电脑的中央处理器(CPU)挖以太币.自从GPU矿工的效率高出两个数量级,它就不再盈利了.然而你可以用CPU挖掘在Morden测试网或私有链上挖矿,以便创建你测试合约和交易所需要的以 ...