Question

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

book / templates / 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>

book / templates / book / 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-子模板从父模板扩展了CSS，但是无法使用其CSS

0 个答案: