django里面的css无法加载,django开发阶段CSS有些页面可以加载，有的却加载不出来。...

我正在学习django,做书上的项目，是一个简单的电商网站，css放在pstatic下的CSS文件夹文件名main.css，静态资源都是拷贝书上提供的。必要的设置都在settings里进行了设置，而且，主页(index)、商品列表页(commodity)都可以加载静态资源和媒体资源。但是商品详细页(commodity/detail..html)就加载不出来CSS，媒体资源没问题。然后，我下载了书上完整的源码，人家没问题，我把我写的模板复制进下载的范例中，没问题，我把下载的静态资源和模板全部复制到我项目的相应位置，还是详细页加载不出css，其他页可以。我又对setting、url、跟下载的源码做了仔细的对照，没问题。

项目百度网盘地址：https://pan.baidu.com/s/1IZPs...

密码：wzxp

项目urlfrom django.urls import path

from .views import *

urlpatterns = [

path('.html', commodityView, name='commodity'),

path('/detail..html', detailView, name='detail'),

path('/collect.html', collectView, name='collect')

]

commodity.urlfrom django.urls import path

from .views import *

urlpatterns = [

path('.html', commodityView, name='commodity'),

path('/detail..html', detailView, name='detail'),

path('/collect.html', collectView, name='collect')

]

css.details/*details*/

.datails{padding-bottom: 80px;}

.datails .crumb{line-height: 76px;}

.datails .crumb span{font-family: simsun; color:#666; font-weight: bold; margin:0 5px;}

.datails .crumb a{color:#666;}

.datails .crumb a:hover{color:#ff5500;}

.datails .product-intro{margin-bottom: 85px;}

.datails .product-intro .preview-wrap{width: 350px; float: left;}

.datails .product-intro .preview-wrap img{border:1px solid #eaeaea;}

.datails .itemInfo-wrap{float: left; width: 770px;}

.datails .itemInfo .title{position: relative; margin-bottom: 30px;}

.datails .itemInfo .title h4{font-size: 18px;}

.datails .itemInfo .title span{position: absolute; right: 0; top: 2px; cursor: pointer;}

.datails .itemInfo .title span i{margin-right: 4px; color: #ff5500;}

.datails .itemInfo .summary{width: 100%; height: 135px; background: #f5f5f5; padding-top: 25px; margin-bottom: 26px;}

.datails .itemInfo .summary p{line-height: 40px; padding-left: 34px; color: #888888;}

.datails .itemInfo .summary p span{padding-right: 40px;}

.datails .itemInfo .summary .activity .price{font-size: 30px; color: #ee0000;}

.datails .itemInfo .summary .activity .price i{font-size: 14px;}

.datails .itemInfo .choose-attrs{color: #888888; line-height: 32px; padding-left: 34px;}

.datails .itemInfo .choose-attrs .title{margin-right: 34px; float: left; margin-bottom: 0;}

.datails .itemInfo .choose-attrs .color{margin-bottom: 18px;}

.datails .itemInfo .choose-attrs .color .color-cont{display: inline-block; float: left;}

.datails .itemInfo .choose-attrs .color .color-cont .btn{display: inline-block; padding:0 26px; margin-right: 26px; border:1px solid #e0e0e0; cursor: pointer; color: #000;}

.datails .itemInfo .choose-attrs .color .color-cont .btn.active{border-color:#ff5500;}

.datails .itemInfo .choose-attrs .number{line-height: 30px;}

.datails .itemInfo .choose-attrs .number .title{float: left;}

.datails .itemInfo .choose-attrs .number .number-cont{display: inline-block; float: left; line-height: 30px; }

.datails .itemInfo .choose-attrs .number .number-cont .btn{display: inline-block; padding:0 6px; border:1px solid #dddddd; background: #f8f8f8; width: 20px; text-align: center; font-size: 26px; cursor: pointer; float: left;-webkit-user-select: none;

-moz-user-focus: none;

-moz-user-select: none;}

.datails .itemInfo .choose-attrs .number .number-cont .cut{}

.datails .itemInfo .choose-attrs .number .number-cont input{width: 35px; height: 28px; text-align: center; margin:0 5px; float: left;}

.datails .itemInfo .choose-btns{padding-left: 34px; margin-top: 22px;}

.datails .itemInfo .choose-btns .purchase-btn{border:1px solid #ff5500; color: #ff5500;width: 116px; height: 40px; line-height: 40px;}

.datails .itemInfo .choose-btns .car-btn{width: 136px; height: 40px; line-height: 40px;}

.datails .aside{float: left;}

.datails .aside h4{font-size: 18px; line-height: 42px; padding-left: 18px; color: #888888;}

.datails .aside .item-list{border:1px solid #ededed; padding:45px; padding-bottom: 0;}

.datails .aside .item-list .item{margin-bottom: 34px;}

.datails .aside .item-list .item p{line-height: 64px; position: relative;}

.datails .aside .item-list .item .pric{color: #ee0000; position: absolute; right: 0;}

.datails .detail{float: right;}

.datails .detail h4{line-height: 42px; width: 100px; text-align: center; border-bottom: 2px solid #888888; font-size: 18px; cursor: pointer; color: #888888;}

.datails .detail .item{border:1px solid #ececec;}

/*end-details*/

base.html

{% load static %}

{{title}}

首页

所有商品

购物车

个人中心

{% block content %}{% endblock content %}

{% block footer %}{% endblock footer %}

detail.html{% extends 'base.html' %}

{% load static %}

{% block content %}

首页

>

所有商品

>

产品详情

{{ commoditys.name }}

{% if likes %}

收藏

{% else %}

收藏

{% endif %}

参考价 ￥{{ commoditys.price|floatformat:'2' }}

活动价￥{{ commoditys.discount|floatformat:'2' }}

送    至广东  广州  天河区

规    格

{{ commoditys.sezes }}

数    量

-

+

加入购物车

热销推荐

{% for item in items %}

{% if item.name|length > 15 %}

{{ item.name|slice:":15" }}...

{% else %}

{{ item.name|slice:":15" }}

{% endif %}

￥{{ item.discount|floatformat:'2' }}

{% endfor %}

详情

{% endblock content %}

{% block script %}

layui.config({

base: '{% static 'js/' %}'

}).use(['mm','jquery'],function(){

var mm = layui.mm,$ = layui.$;

var cur = $('.number-cont input').val();

$('.number-cont .btn').on('click',function(){

if($(this).hasClass('add')){

cur++;

}else{

if(cur > 1){

cur--;

}

}

$('.number-cont input').val(cur)

})

$('.layui-btn.layui-btn-danger.car-btn').on('click',function(){

var quantity = $("#quantity").val();

window.location = "{% url 'shopper:shopcart' %}?id={{ commoditys.id }}&quantity=" + quantity

});

$('#collect').on('click',function(){

var url = "{% url 'commodity:collect' %}?id={{ commoditys.id }}"

$.get(url ,function(data,status){

if (data.result=="收藏成功"){

$('#collect').find("i").removeClass("layui-icon-rate")

$('#collect').find("i").addClass("layui-icon-rate-solid")

}

alert(data.result);

});

});

});

{% endblock script %}

本来应该是这样的