Question

我试图理解为什么以下不起作用。我试图在顶部有一个导航栏，但我使用指南针和scss文件，但这是我只是不理解的基本CSS。我从sass-lang.com复制并粘贴，只更改了名称

以下是我的scss文件

#top-navigation {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

以下是我的base.html

{% extends "skeleton.html" %}
{% load zinnia_tags i18n %}
{% load url from future %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <link rel="stylesheet" href="/style.css" />
    <title>{% block title %}User test{% endblock %}</title>
</head>

<body>       
        {% block header %}
    <div class ="container">
    <div id="header">
<ul class="top-navigation">
              <li>  
                    <a href="{% url "home" %}">{% trans "Home" %}</a>  
             </li>
                {% if user.is_authenticated %}
                <li> {% trans "Logged in" %}: {{ user.username }} </li>
                {% endif %}

          <li>
            <a href="/blog/feeds/" title="RSS Feed of latest entries" class="feeds">
              RSS Feed
            </a>
          </li>
        </ul>
    </div>
    </div>


    <hr />

        {% endblock %}



        {% block sidebar %}
        <div id="sidebar">
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </div>
        {% endblock %}



    <div id="content">
        {% block content %}{% endblock %}
    </div>

    <div id="footer">
        {% block footer %}
        <hr />
        <p>this is the footer</p>
        {% endblock %}
    </div>
</body>

</html>

和

的index.html

{% extends "base.html" %}
{% load i18n zinnia_tags %}
{% load url from future %}
{% block title %}IVLoop.com{% endblock %}

</div>
    {% block content %}

        <h1>IVLoop.com</h1>
        <h2>Isla Vista Survival Handbook</h2>
        <h3>Phone Numbers and Links to all the stuff u need. Like food, fixing broken windows, 
        door locks and pluming. IVLoop.com is your IV survival guide</h3>

<p>IV loop is the term to describe the biz and res area around the loop in iv 
“did the Loop” generally means that you had a pitcher at the fine establishments located around the Isla Vista Loop.
 Start at Javan’s on Embarcadero Del Norte
then across to IVBC now remodeled as Embarcadero Hall, once the building was on fire… find out more and submit us your findings to be posted thanks
then down and around the loop for a beer at Super Cuca’s however they are moving next to Woodstock’s
up on Del Mar to Déjà Vu 
next is Giovanni’s 
across they way to El Sitio’s
Sam’s To Go 
Study Hall 
then over to Dublin’s
then Chino’s 
On the Side and Woodstock’s to finish of next to Javan’s
Please drink Responsibly! 

Is it isla as in island or is it isla as in is and why? </p>

{% endblock %}

</div>

我得到的结果是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en-us" lang="en-us" version="-//W3C//DTD XHTML 1.1//EN" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>IVLoop.com</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="cache-control" content="public" />
    <meta name="robots" content="follow, all" />
    <meta name="language" content="en-us" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0;" />
    <meta name="description" content="Browse through a few featured Isla Vista Restaurants and we are here to take your order. 
Call night or day (805)689-6969 or order online" />
    <meta name="keywords" content="delivery,food,take-out " />
    <meta name="author" content="Brian Scott Carpenter" />

    <link rel="pingback" href="/xmlrpc/" />
    <link rel="shortcut icon" href="/static/img/favicon.ico" />
    <link rel="home" href="/" />
    <link rel="stylesheet" type="text/css" media="screen, projection" href="/static/css/screen.css" />
    <link rel="stylesheet" type="text/css" media="print" href="/static/css/print.css" />
    <!--[if lt IE 8]>
        <link rel="stylesheet" type="text/css" media="screen, projection" href="/static/zinnia/css/ie.css" />
    <![endif]-->


  </head>
  <body class="skeleton ">
    <div class="container">

    <div class ="container">
<ul class="top-navigation">
              <li>  
                    <a href="/">Home</a>  
             </li>


          <li>
            <a href="/blog/feeds/" title="RSS Feed of latest entries" class="feeds">
              RSS Feed
            </a>
          </li>
        </ul>



    <hr />



        <div id="sidebar">
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </div>



        <h1>IVLoop.com</h1>
        <h2>Isla Vista Survival Handbook</h2>
        <h3>Phone Numbers and Links to all the stuff u need. Like food, fixing broken windows, 
        door locks and pluming. IVLoop.com is your IV survival guide</h3>

<p>IV loop is the term to describe the biz and res area around the loop in iv 
“did the Loop” generally means that you had a pitcher at the fine establishments located around the Isla Vista Loop.
 Start at Javan’s on Embarcadero Del Norte
then across to IVBC now remodeled as Embarcadero Hall, once the building was on fire… find out more and submit us your findings to be posted thanks
then down and around the loop for a beer at Super Cuca’s however they are moving next to Woodstock’s
up on Del Mar to Déjà Vu 
next is Giovanni’s 
across they way to El Sitio’s
Sam’s To Go 
Study Hall 
then over to Dublin’s
then Chino’s 
On the Side and Woodstock’s to finish of next to Javan’s
Please drink Responsibly! 

Is it isla as in island or is it isla as in is and why? </p>



        <hr />
        <p>this is the footer</p>

  </body>
</html>

我知道指南针正在工作，因为当我与其他班级合作时，它的工作原理。感谢

Answer 1

问题出在base.html

<div id ="top-navigation">

then <ul>

他们在哪里合并

CSS顶部导航栏，模板不工作罗盘和sass

1 个答案: