django 1.9.7 css控制模板样式
问题: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控制模板样式的更多相关文章
- Flex中使用CSS控制页面样式
Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- 【学习DIV+CSS】2. 学习CSS(一)--CSS控制页面样式
1. CSS如何控制页面 使用XHTML+CSS布局页面,其中有一个很重要的特点就是“结构与表现相分离”(结构指XHTML,表现指CSS).有人这样描述这种分离的关系,结构XHTML好比一个人,表现C ...
- CSS 控制滚动条样式
/*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略.下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/ #s ...
- CSS控制checkbox样式
原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...
- jquery 利用CSS 控制打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- css 控制滚动样式
::-webkit-scrollbar{width: 8px; height: 8px;}::-webkit-scrollbar-button:vertical{display:none;}::-we ...
- CSS控制表格(table)样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
- web的各种前端打印方法之CSS控制网页打印样式
来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人 ...
随机推荐
- DBGridEh使用指南改变边框颜色
DBGridEh使用指南 鹅倌0人评论422人阅读2012-08-06 15:17:59 1.设置表头,是否允许多表头,设置是否只读. dbgrdh1.TitleFont.Color:=clBlu ...
- 树和二叉树->存储结构
文字描述 1 二叉树的顺序存储 用一组地址连续的存储单元自上而下,自左至右存储完全二叉树上的结点元素. 这种顺序存储只适用于完全二叉树.因为,在最坏情况下,一个深度为k且只有k个结点的单支树却需要长度 ...
- Java之旅_高级教程_网络编程
摘自:http://www.runoob.com/java/java-networking.html JAVA网络编程 网络编程是指编写运行在多个设备(计算机)的程序,这些设备都通过网络连接起来. j ...
- input的placeholder在ie9下不兼容的结局办法。
/* IE9placeholder支持 */ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder ...
- 应用docker化
1)首先安装源代码工具Git. [root@master~]# yum install-y git 2)从GitHub上下载示例的Java应用源代码. [root@master~]# cd/op ...
- websocketd
https://www.cnblogs.com/tinywan/p/6826125.html https://www.jianshu.com/p/63afd0099565
- vim 私人快捷键备忘录
i 上 k 下 j 左 l 右 ( 上移一段 ) 下移一段 * 搜索关键字 d 删除 y 复制 p 粘贴 h 插入 H 头插 o 下开一行 O 上开一行 f 后跳指定关键字 F 前跳指定关键字 e 字 ...
- Vue项目
1.新建Vue项目:vue init webpack projectName 2.vue-router模块 1.安装vue-router模块:npm install vue-router --save ...
- 日志监控工具安装:windows上安装elk
Elasticsearch + Kibana + logstash for windows 安装 https://blog.csdn.net/u011781521/article/de ...
- 使用python以及工具包进行简单的验证码识别
识别数字验证码 首先我们准备素材,4张验证码图片如下: 第一步: 打开图像. im = Image.open('temp1.jpg') 第二步: 把彩色图像转化为灰度图像.彩色图像转化为灰 ...