CSS DJANGO 和扩展模板答案

【问题标题】：CSS DJANGO and extended templatesCSS DJANGO 和扩展模板
【发布时间】：2017-04-24 20:02:35
【问题描述】：

我已将引导程序加载到我的 base.html 模板中，该模板扩展了我的所有其他模板

<!DOCTYPE HTML>
{% load staticfiles %}
{% load render_table from django_tables2 %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/portal.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'django_tables2/themes/paleblue/css/screen.css' %}" />
<html>
    <title>
    {% block title %}Test Portal{% endblock %}
    </title>
    <head>
        <div class="page-header">
            <img src="{% static 'images/gd_logo_lg.jpg' %}" alt="GDLOGO" style="width:245;height:125px;"/>
            <div id="righty">
                <h1><a href="/home/">GD Portal</a></h1>
            </div>
        </div>
            </head>

    <body>
    <div class="content container">
    {% block content %}
    {% endblock %}
    </div>

    </body>

</html>

我的 CSS 文件 css/portal.css 中只有一些 CSS 有效，我尝试在网上查找，但我尝试的所有方法都不起作用。

.page-header {
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #932D42;
    margin-top: 0;
    padding: 10px 40px 20px 40px;
}

.page-header img {
    position:absolute;
    top:0px;
    left:0px;
}

.righty {
    float:right:
}

.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
    color: #ffffff;
    font-size: 32pt;
    font-family: "Courier New", monospace;
    font-weight: bold;
    text-decoration: none;


h1, h2, h3, h4 {
    font-family: 'Impact', Sans-serif;
}

例如，page-header 可以正常工作，我可以更改它并做我想做的事，但是 righty 并没有任何影响。我在扩展模板中尝试的任何 CSS 都不起作用。

谁能解释我做错了什么，因为我觉得我错过了一些超级基本的东西？

【问题讨论】：

试过我更新的答案了吗？
@PrakharTrivedi 是的，它起作用了，它是错误的类/id 调用的组合，而且我在此之前错过了 .page-header 之一底部的 }。所以这也没有帮助
很高兴您找到了解决方案。

标签： html css django django-templates

【解决方案1】：

您需要了解如何通过 id 或 class 选择元素。在您的 html 文件中：

<div id="righty">
    <h1><a href="/home/">GD Portal</a></h1>
</div>

但是你的 css 有这个代码：

.righty {
    float:right;
}

“div”的 id 属性为 righty。所以在 css 中，确切的代码应该是：

<style>
 #righty {
     float:right;
 } 

</style>

对于 id，css 和 Javascript 元素选择器是 #，对于类，它是简单的点 (.)。

如果仍然无法使用，请使用此代码：

<style>
 .righty {
     text-align: right !important;
 } 

</style>

【讨论】：

还是不行，我也试过 `
加点还是什么都没有。
: 也应该是分号
@Jim 按照 Sayse 的建议更新了我的答案。立即查看。