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 %}。