Question

我已经将bootstrap加载到我的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文件中运行css/portal.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;
}

例如，页面标题工作正常我可以改变它并做我想要的，但是对于什么都没有任何影响。我在扩展模板中尝试的任何CSS也不起作用。

有人可以解释我做错了什么因为我觉得我错过了一些超级基本的东西吗？

Answer 1

您需要了解如何按ID或按类选择元素。在你的html文件中：

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

但你的css有这段代码：

.righty {
    float:right;
}

“div”的 id 属性为righty.So在css中，确切的代码应为：

<style>
 #righty {
     float:right;
 } 

</style>

对于 id ，css和Javascript元素选择器为＃，对于类，它是简单的点（。）。

如果仍然无效，请使用以下代码：

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

</style>

CSS DJANGO和扩展模板

1 个答案: