Question

我正在使用Django创建我的第一个博客，一切正常，但我似乎可以在我的 blog_app 中加载我的汉堡img CSS。

 blog_app
-templates
--include_core
---blog.html
--blog_app
---blog_app.html
---blog_post.html
-static
--include_core
---fonts
---js
---css
----mobile.css
----style.css
---images
----mobile
-----mobile-menu.png

所以include_core基本上是放置主模板的文件夹。它工作得很好。

我尝试了这个例子，一切正常：

<img src="{% static 'include_core/images/moon-satellite.jpg' %}" alt="">

blog_app /模板/ include_core / blog.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><!-- blog - Space Science Website Template --></title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'include_core/css/style.css' %}" type="text/css">
    <link rel="stylesheet" type="text/css" href="{% static 'include_core/css/mobile.css' %}">
    <script src="{% static 'include_core/js/mobile.js' %}" type="text/javascript"></script>
</head>

blog_app /静态/ include_core / mobile.css

#header div span#mobile-navigation {
    background: transparent url("images/mobile/mobile-menu.png") no-repeat;
    display: block;
    height: 50px;
    margin: 0;
    padding: 0 0 0 0;
    position: absolute;
    right: 3%;
    top: 14px;
    width: 50px;
    z-index: 999;
}

JavaScript文件：

window.onload = function(){
    var getNavi = document.getElementById('navigation');

    var mobile = document.createElement("span");
    mobile.setAttribute("id","mobile-navigation");
    getNavi.parentNode.insertBefore(mobile,getNavi);

    document.getElementById('mobile-navigation').onclick = function(){
        var a = getNavi.getAttribute('style');
        if(a){
            getNavi.removeAttribute('style');
            document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-menu.png)';
        } else {
            getNavi.style.display='block';
            document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-close.png)';
        }
    };

问题出现了：在桌面版中不应该没有汉堡包按钮（mobile-menu.png），应该只有移动版本。当我减少浏览器宽度时，所有段落，元素按照它们应该被订购的方式排序，但图像永远不会出现，你能做什么才能使它出现？

使用带有Jinja和Django的CSS中的图像

0 个答案: