gpt4 book ai didi

css - Django 模板(扩展问题 CSS)

转载 作者:行者123 更新时间:2023-11-28 14:35:09 25 4
gpt4 key购买 nike

我有两个模板。 index.html(父级)和 test.html(子级)

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

我尝试从子模板中覆盖 css,但仍然没有成功。我停止使用模板,并创建了两个完整的 HTML 文件并且有效(不想这样做,因为我正在复制 html 代码)。因此,似乎每次我将 {% extends "crm/index.html"%} 放在子模板上时,它都会把事情搞砸。

这是我的代码:

父级 - 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 放入 block 中。

这是我从浏览器得到的输出(右击,查看源代码):

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>

测试.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>

最佳答案

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

关于css - Django 模板(扩展问题 CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6842331/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com