Question

我有两个模板。 index.html（PARENT）和test.html（CHILD）

我有一个固定在页面顶部的DIV，就像一个栏[#TopBar]。它停留在PARENT模板上，但是一旦它到达CHILD模板，它就会坚持添加某种填充或边距，并且它的顶部有几个像素。

我尝试从子模板中覆盖css，但仍然没有运气。我停止使用模板，并创建两个完整的HTML文件，这是有效的（不想这样做，因为我复制HTML代码）。因此，每当我将{％extends“crm / index.html”％}放在子模板上时，它就会出现问题。

继承我的代码：

PARENT - index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{%block title%}Control Panel {%endblock%}</title>

<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}crm/crm.css" />

</head>

<body>

    <div id="TopBar"  >
        <div id="header">
            <h1> TITLE</h1>
        </div>

        <div id="searches" >
            <input type="text" id="search" name="search" /> <input type="button" value="submit" />
        </div>
    </div>

    <div id="LeftCol">
        <div id="LeftMenu">
            <h3>MENU</h3>

        </div>
    </div>

    <div id="RightCol">
        <div id="UserProfile">

            {% block content %}
            <h1 class="profile"> USER PROFILE</h1>
            <p>Random text</p>
            {%endblock%}    
        </div>
    </div>

</body>

</html>

CHILD - test.html

{% extends "crm/index.html" %}

  {%block title%} Test {%endblock%}


   {%block content%}
     <h1 class="profile"> test</h1>

     <p> hkhksjhgkdhskghdk</p>
   {%endblock%}

CSS

    *{padding:0px;margin:0px;}
    body{background-color:#DBDBDB; }

    #TopBar{width:100%; height:50px; background-color:#009999; margin:0px;}
    #header{float:left}
    #searches{float:right; padding:15px;}
    #LeftCol{height:840px; margin-top:10px; width:200px; background-color:#C0C0C0; -moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
        display:block;  overflow: hidden;  float:left;}
    #RightCol{width:1040px; margin:10px; color:black;-moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
        display:block;   overflow: hidden; background-color:white; float:left;}




    h1{color:white;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
        padding:5px;}
    h1.profile{ color:black;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
        padding:5px;}
   .h3{margin-left:70px; padding-top:10px}

我只想更改{％block content％}中的内容，我没有理由将其他DIVS放入块中。

这是我从浏览器获得的输出（右键单击，查看源代码）：

的index.html：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title> Control Panel </title>
    <link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>

    <div id="TopBar"   >
        <div id="header">
            <h1>Control Panel</h1>

        </div>

        <div id="searches" >
            <input type="text" id="search" name="search" /> <input type="button" value="submit" />
        </div>
    </div>

    <div id="LeftCol">
        <div id="LeftMenu">
            <h3>MENU</h3>


        </div>
    </div>

    <div id="RightCol">
        <div id="Contents">


            <h1 class="profile"> USER PROFILE</h1>
            <p>Random text</p>      
        </div>
    </div>

</body>

</html>

的test.html：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title> Test  </title>
    <link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>

    <div id="TopBar"   >
        <div id="header">
            <h1>  Test</h1>

        </div>

        <div id="searches" >
            <input type="text" id="search" name="search" /> <input type="button" value="submit" />
        </div>
    </div>

    <div id="LeftCol">
        <div id="LeftMenu">
            <h3>MENU</h3>


        </div>
    </div>

    <div id="RightCol">
        <div id="Contents">


         <h1 class="profile"> test</h1>

         <p> hkhksjhgkdhskghdk</p>

        </div>

    </div>

</body>

</html>

Answer 1

我不认为这是一个django问题，扩展模板似乎正确..也许您可以发布在浏览器中访问您的视图时收到的index.html和test.html的完整HTML输出。 ..

Answer 2

尝试使用the stylesheet for css reset它会删除大量的边距和填充。它可能无法解决您的问题，但通常会有很多帮助

Django模板（扩展问题CSS）

2 个答案: