时间戳

首页 > 解决方案 > Django - 子模板从父模板扩展 CSS 但无法使用其 CSS

django - Django - 子模板从父模板扩展 CSS 但无法使用其 CSS

问题描述

已home.html成功从 扩展base.html。但是我发现子模板没有使用它自己的 CSS。我猜这是因为base.html没有{% block %}标签来允许子模板覆盖 CSS。我不知道在哪里添加{% block %}标签base.html。如果我只是添加{% block head %}，base.html将home.html不会使用来自base.html.

书/模板/base.html：

<head>
    {% load static %}
    <title>BookStore</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link id="cssFile" rel="stylesheet" type="text/css" href="{% static 'book/master.css' %}">
</head>

书/模板/书/home.html：

<head>
    {% block head%}
    <style>
        #homePageBooks {
            /*width: 160%;*/
            width: 100%;
            position: relative;
            left: 210px;
            /*margin-left: 100px;;*/
            /*margin-right: 100px;*/
            margin-top: 60px;
        }

        .row1, .row2, .row3 {
            font-size: 12px;
            float: left;
            width: 200px;
            height: 120px;
            margin-left: 60px;
            margin-right: 60px;
            margin-bottom: 100px;
            text-align: center;
        }

        .bookImg {
            margin-bottom: 6px;
        }
    </style>
    {% endblock %}
</head>

标签： django

解决方案

推荐阅读