Html CSS DJANGO和扩展模板_Html_Css_Django_Django Templates

Html CSS DJANGO和扩展模板

html css django

Html CSS DJANGO和扩展模板,html,css,django,django-templates,Html,Css,Django,Django Templates,我已将引导加载到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"

我已将引导加载到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>

例如，页眉工作正常，我可以改变它，做我想做的事情，但righty对任何事情都没有任何影响。我在扩展模板中尝试的任何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;
}

有人能解释一下我做错了什么，因为我觉得我缺少了一些超基本的东西吗？

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

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

div的id属性为righty。因此在css中，确切的代码应该是：

<style>
 #righty {
     float:right;
 } 

</style>

对于id，css和Javascript元素选择器是，对于类，它是简单的点

如果仍不工作，请使用以下代码：

.righty {
    float:right;
}

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

</style>

它仍然不起作用，我也试过用一个点，但还是没有。这个：应该是分号too@Jim按照Sayse的建议更新了我的答案。现在检查。试过我的更新答案了吗？@PrakharTrivedi是的，它起作用了，它是由错误的class/id调用组合而成的，而且在此之前，我丢失了一个.page标题的底部的}。所以这也没用我很高兴你找到了解决办法。