css - CSS在Django中不起作用

Question

        {% extends "base.html" %}
        {% load i18n %}
        {% load staticfiles %}
        {% block jsscript %}
    <!-- Script code -->
            <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
                <script>
                    $(function() {
                        $('#btnNext_picklocation').attr('disabled','disabled');
                        $("#location input[type='checkbox']").click(function(){
                            if($('#location input[type="checkbox"]').is(':checked'))
                            {
                                $('#btnNext_picklocation').removeAttr('disabled');
                            }
                            else
                            {
                                $('#btnNext_picklocation').attr('disabled','disabled');
                            }
                        });
                        $("#location .maps img").attr("src","{% static 'media/loading.gif' %}");
                        $("#location .maps img").error(function(){
                            $(this).unbind("error").attr("src","{% static 'media/loading.gif' %}");
                        });
                        {% for obj in filter_location %}
                        var url{{obj.city}}="http://maps.googleapis.com/maps/api/staticmap?center={{obj.suite}},{{obj.street}},{{obj.city}}&size=400x200&maptype=roadmap&markers=size:mid|color:green|{{obj.suite}},{{obj.city}}&sensor=true";
                        $("#map{{obj.city}}").attr("src",encodeURI(url{{obj.city}}));
                        {% endfor %}
                        $('#btnNext').click(function(){
                            window.location.assign("./pickpaymentplan/");
                        });
                    });
                </script>
            <link rel="stylesheet" href="{% static 'css/base.css' %}" />
        {% endblock %}
        {% block head %}
                <h1 class="heading" >Place An Order</h1>
                <h4 class="heading">Please choose a location</h4>
        {% endblock %}
        {% block content %}
<!-- Main Body Content -->
            <form id="frmLocation" action="./" method="POST">{% csrf_token %}
                    <table border="0">
                        <tr>
                            <td>
                                <table border="1" id="location" >
                                    <tr>
                                        <th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                        <th>Locations</th>
                                        <th>Map</th>
                                    </tr>
                                    {% if filter_location %}    
                                    {% for p in filter_location %}
                                    <tr>
                                        <td><input type="checkbox" id="{{p.location_id}}L" name="{{p.location_id}}L" ></td>
                                        <td>{{p.suite}},{{p.street}},<br/>{{p.city}},{{p.state}},<br/>{{p.country}},{{p.zip}}</td>
                                        <td class="maps" ><img id="map{{p.city}}" /></td>
                                    </tr>
                                    {% endfor %}
                                    {% else %}
                                    <tr></tr>
                                    <tr><td  colspan="5">No Locations!</td></tr>
                                    {% endif %}
                                </table></td>
                        </tr>
                        <tr>
                            <td style="text-align:right"><input type="submit" id="btnNext_picklocation" name="btnNext_picklocation" class="btnNext" value="Next"/>              </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div id="footer" name="footer">
            </div>
        {% endblock %}

在这段代码中，我使用了一个 base.html 文件作为基本模板。对 settings.py 进行了适当的更改，例如 static_url、media_url。这个页面仍然没有按预期工作。缩进会是一个问题吗？实施css是否需要遵循一些额外的步骤？

Answer 1

我的第一个猜测是您正在覆盖{% block jsscript %}某些后代模板。如果不是这种情况，那么我会确认 的输出{% static 'css/base.css' %}实际上是给你你所期望的（你能访问那个 URL 吗？）

另外两个想法：

1. 空格在模板中并不重要。
2. 您可能应该将您的 CSS 移动到类似{% block stylesheets %}而不是{% block jsscript %}.

Answer 2

如果你覆盖了模板块，并且想要保持块的原始内容，你可以使用它{{block.super}}来输出原始内容，像这样：

父.html：

<html>
<head>
    <title>{% block title %}MySite{% endblock %}</title>
<body>
    {% block content %}{% endblock %}
</body>
</html>

child.html

{% extends 'parent.html' %}
{% block title %}Child Page - {{block.super}}{% endblock %}
{% block content %}Hello world!{% endblock%}

title使用 child.html 呈现的页面将是“子页面 - MySite ”

Answer 3

在任何框架中诊断此类问题的一般步骤是：

• 验证<link>生成的页面中是否存在标记 - 在浏览器中使用查看页面源或在 Firebug 中使用 HTML 面板*

• 验证标签的href属性<link>看起来没问题

• 使用 Firebug 的 Net 面板查看您的样式表是否实际加载

• 直接在浏览器的地址栏中输入样式表的 URL（在您生成的页面中找到），查看其实际内容是否符合您的预期

• 如果以上所有都没有发现问题，请使用 Firebug 的 CSS 面板查看是否有另一个样式表覆盖了您的样式。

如果您遵循这些步骤，您很有可能自己找到问题所在，如果没有，您将能够提出更具体的问题

---

*我所说的“Firebug”是指 Firebug 本身、Chrome 开发工具或 Opera Dragonfly，只要适合您的口味。