Question

当我尝试向Django项目添加样式时，它们在Chrome中不起作用，但在Opera中起作用。 CSS非常简单，例如，任何Chrome都应支持margin-top：

https://www.w3schools.com/cssref/pr_margin-top.asp

但与Opera不同，Chrome无法看到它。告诉我，可能是什么问题？

我以这个项目为基础

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Home_page

在 locallibrary \ catalog \ static \ css \ styles.css 中，我有以下代码：

.sidebar-nav {
    margin-top: 30px;
    background-color: #87CEEB;
    padding: 0;
    list-style: none;
}


.container-fluid {
    margin-top: 10px;
    background-color: skyblue;
    padding: 0;
    list-style: none;
}

在 locallibrary \ catalog \ templates \ base_generic.html 中：

<!DOCTYPE html>
<head>

{% block title %}<title>Test</title>{% endblock %}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

{% load static %}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">

</head>

<body>

  <div class="container-fluid">

    <div class="row">
      <div class="col-sm-2">
      {% block sidebar %}
      <div class="sidebar-nav">
          {% if user.is_authenticated %}
          <li>User: {{ user.get_username }}</li>

          <li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
          {% else %}
          <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
          {% endif %}
          <hr>

          <li><a href="{% url 'index' %}">Home</a></li>
          <li><a href="{% url 'books' %}">All books</a></li>
          <li><a href="{% url 'authors' %}">All authors</a></li>

          <hr>

          <li><a href="{% url 'trips' %}">Всі відрядження</a></li>
          <li><a href="{% url 'my-trips' %}">Мої відрядження</a></li>
          <li><a href="{% url 'trip_new' %}" class="top-menu"> Подати заявку на відрядження 
              <span class="glyphicon glyphicon-plus"></span></a></li>
          <li><a href="{% url 'search' %}" class="top-menu"> Пошук відряджень <span class="glyphicon glyphicon-plus"></span></a></li>
          <li><a href="{% url 'trip_my' %}">Всі відрядження2</a></li>


          <hr>

          <li><a href="{% url 'author_create' %}">Create author</a></li>
          <li><a href="{% url 'post_share' %}">Share this post</a></li>
          <li><a href="{% url 'export_users_csv' %}">Export all users</a></li>
          <li><a href="{% url 'attachment_email' %}">attachment email</a></li>
          <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li>




      </div>
     {% endblock %}
      </div>
      <div class="col-sm-10 ">
      {% block content %}{% endblock %}

          {% block pagination %}
             {% if is_paginated %}
                 <div class="pagination">
                     <span class="page-links">
                         {% if page_obj.has_previous %}
                             <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">previous</a>
                         {% endif %}
                     <span class="page-current">
                         Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                     </span>
                     {% if page_obj.has_next %}
                         <a href="{{ request.path }}?page={{ page_obj.next_page_number }}">next</a>
                     {% endif %}
                      </span>
                 </div>
             {% endif %}
          {% endblock %}

      </div>
    </div>

  </div>
</body>
</html>

在 locallibrary \ locallibrary \ settings.py 中：

STATIC_URL = '/static/'

css在Chrome中不起作用但在Opera中起作用的原因可能是什么？

0 个答案: