django开发阶段CSS有些页面可以加载，有的却加载不出来。

Question

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

from django.urls import path
from .views import *
urlpatterns = [
    path('.html', commodityView, name='commodity'),
 path('/detail.<int:id>.html', detailView, name='detail'),
 path('/collect.html', collectView, name='collect')
]

commodity.url

from django.urls import path
from .views import *
urlpatterns = [
    path('.html', commodityView, name='commodity'),
 path('/detail.<int:id>.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

<html lang="en">
<head>
 {% load static %}
   <title>{{title}}</title>
 <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
 <link rel="stylesheet" type="text/css" href="{% static 'layui/css/layui.css' %}">
 <script type="text/javascript" src="{% static 'layui/layui.js' %}"></script>
</head>
<body>
 <div class="header">
 <div class="headerLayout w1200">
 <div class="headerCon">
 <h1 class="mallLogo">
 <a href="{% url 'index:index' %}" title="母婴商城">
 <img src="{% static 'img/logo.png' %}">
 </a> </h1> <div class="mallSearch">
 <form action="{% url 'commodity:commodity' %}" method="get" class="layui-form" novalidate>
 <input type="text" name="n" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
 <button class="layui-btn" lay-submit lay-filter="formDemo">
 <i class="layui-icon layui-icon-search"></i>
 </button> </form> </div> </div> </div> </div>
 <div class="content content-nav-base {{classContent}}">
 <div class="main-nav">
 <div class="inner-cont0">
 <div class="inner-cont1 w1200">
 <div class="inner-cont2">
 <a href="{% url 'index:index' %}" {% if classContent == ''%}class="active"{% endif %}>首页</a>
 <a href="{% url 'commodity:commodity' %}" {% if classContent == 'commoditys'%}class="active"{% endif %}>所有商品</a>
 <a href="{% url 'shopper:shopcart' %}" {% if classContent == 'shopcarts'%}class="active"{% endif %}>购物车</a>
 <a href="{% url 'shopper:shopper' %}" {% if classContent == 'informations'%}class="active"{% endif %}>个人中心</a>
 </div> </div> </div> </div> {% block content %}{% endblock content %}
  </div>
{% block footer %}{% endblock footer %}
<script type="text/javascript">{% block script %}{% endblock script %}</script>
</body>
</html>

detail.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
    <div class="data-cont-wrap w1200">
 <div class="crumb">
 <a href="{% url 'index:index' %}">首页</a>
 <span>></span>
 <a href="{% url 'commodity:commodity' %}">所有商品</a>
 <span>></span>
 <a href="javascript:;">产品详情</a>
 </div> <div class="product-intro layui-clear">
 <div class="preview-wrap">
 <img height="300" width="300" src="{{ commoditys.img.url }}">
 </div> <div class="itemInfo-wrap">
 <div class="itemInfo">
 <div class="title">
 <h4>{{ commoditys.name }}</h4>
 {% if likes %}
              <span id="collect"><i class="layui-icon layui-icon-rate-solid"></i>收藏</span>
 {% else %}
              <span id="collect"><i class="layui-icon layui-icon-rate"></i>收藏</span>
 {% endif %}
            </div>
 <div class="summary">
 <p class="reference"><span>参考价</span> <del>￥{{ commoditys.price|floatformat:'2' }}</del></p>
 <p class="activity"><span>活动价</span><strong class="price"><i>￥</i>{{ commoditys.discount|floatformat:'2' }}</strong></p>
 <p class="address-box"><span>送&nbsp;&nbsp;&nbsp;&nbsp;至</span><strong class="address">广东&nbsp;&nbsp;广州&nbsp;&nbsp;天河区</strong></p>
 </div> <div class="choose-attrs">
 <div class="color layui-clear"><span class="title">规&nbsp;&nbsp;&nbsp;&nbsp;格</span> <div class="color-cont"><span class="btn active">{{ commoditys.sezes }}</span></div></div>
 <div class="number layui-clear"><span class="title">数&nbsp;&nbsp;&nbsp;&nbsp;量</span><div class="number-cont">
 <span class="cut btn">-</span>
 <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/D/g,'')}" maxlength="4" type="" id="quantity" value="1">
 <span class="add btn">+</span></div></div>
 </div> <div class="choose-btns">
 <a class="layui-btn  layui-btn-danger car-btn">
 <i class="layui-icon layui-icon-cart-simple"></i>加入购物车</a>
 </div> </div> </div> </div> <div class="layui-clear">
 <div class="aside">
 <h4>热销推荐</h4>
 <div class="item-list">
 {% for item in items %}
            <div class="item">
 <a href="{% url 'commodity:detail' item.id %}">
 <img height="280" width="280" src="{{ item.img.url }}">
 </a> <p> <span title="{{ item.name }}">
 {% if item.name|length > 15 %}
                        {{ item.name|slice:":15" }}...
                      {% else %}
                        {{ item.name|slice:":15" }}
                      {% endif %}
                  </span>
 <span class="pric">￥{{ item.discount|floatformat:'2' }}</span>
 </p> </div> {% endfor %}
          </div>
 </div> <div class="detail">
 <h4>详情</h4>
 <div class="item">
 <img width="800" src="{{ commoditys.details.url }}">
 </div> </div> </div> </div>{% 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 %}

本来应该是这样的

Answer 1

请问题主找到原因了吗？我也遇到这个问题不知道怎么解决。。