Question

我的网页结构如下，我希望background-color: #aa2222属性仅适用于页脚。

<body>
      {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
      {% block content %}<!-- default content text (typically empty) -->
      <!-- Navigation Bar -->
      <section class="navbarSection">
        <div class="topnav" id="myTopnav">
          ...
        </div>
      </section>
      <!-- End of Navigation Bar -->
      <!-- Articles -->
      <section class="articleSection">
        <div class="articles" id="myArticles">
          {% for article in articles %}
          ...
          {% endfor %}
        </div>
      </section>
      <!-- Footer -->
      <footer id="site-footer">
        <div id="footer1">
          <p> footer text </p>
        </div>
      </footer>
      <!-- End of Footer -->
</body>

页脚的样式如下：

#footer1 {
background-color: #aa2222;
}

此时页面显示的所有正文都显示background-color:#aa2222，而不是仅显示页脚。它似乎与Django有关，因为在Web编辑器中使用代码它只适用于页脚的背景颜色。你能帮忙吗？

EDIT1 ：根据建议，我尝试在模板文件夹中添加footer.html文件，如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

  <!-- Footer -->
  <footer id="site-footer">
    <div id="footer1">
      <p> footer text </p>
    </div>
  </footer>
  <!-- End of Footer -->

</body>
</html>

然后我在{% include "templates/footer.html" %}添加了标记index.html，但在运行TemplateDoesNotExist at /home/

时收到错误python manage.py runserver

Answer 1

解决了使用bootstrap重新编码所有网站的响应式设计并在index.html中插入页脚。下面的HTML摘录：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
  <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/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
  {% block content %}<!-- default content text (typically empty) -->
  <!-- Main Logo -->
  <div class="main-image" id="myMainImage">
    <img src="{{STATIC_URL}}/static/images/logo.png"/>
  </div>
  <!-- Navigation Bar -->
  <nav class="navbar navbar-inverse">
    ...
  </nav>
  <!-- End of Navigation Bar -->

  <!-- Articles -->
  <div class="articles" id="myArticles">
    {% for article in articles %}
    <h3>Titolo: {{ article.title }}</h3>
    <p><strong>Autori:</strong> {{ article.authors }}</p>
    <p><strong>Riepilogo:</strong> {{ article.summary }}</p>
    <p><strong>Testo:</strong> {{ article.content }}</p>
    {% endfor %}
  </div>
  <!-- End of Articles -->

  <!-- Footer -->
  <footer class="site-footer">
    <div id="footer1">
      <p> Text </p>
    </div>
  </footer>
  <!-- End of Footer -->

  {% endblock %}
</body>
</html>

CSS：

.site-footer {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: #aa2222;
    color: white;
    font-style: italic;
    text-align: center;
}

Answer 2

尝试在单独的footer.html页面中定义页脚部分，并使用include模板标记来包含html页面。

Django，html，css - 页脚样式适用于所有身体

2 个答案: