Он не показал строку меню, которую я разработал в файле base.css - PullRequest
Новая
       36

Он не показал строку меню, которую я разработал в файле base.css

0 голосов
/ 24 августа 2018

У меня проблема с отображением строки меню на первой странице в mysite (Django). Я использую jsbin.com для проверки HTML и CSS.И в качестве первого пикселя я показал строку меню, которую я хочу, чтобы она отображала КАК ИСПОЛЬЗОВАТЬ «jsbin.com», Она показывает строку меню, которую я хотел, чтобы она отображалась таким образом

Однако, когда я вижу в mysite в django, это показалось странным образом (python manage.py runserver 0.0.0.0:8000) Тем не менее, я показал это в django

Итак, пожалуйстапомогите, если у вас есть решение ... Это код base.html. 

<!doctype html>
<html lang="en">
<head>
<title>{% block title %}Daniel Homepage</title>
{% load staticfiles %}
<link rel="stylesheet" href="{% static "css/base.css" %}" type="text/css">
<link rel="stylesheet" href="{% block extrastyle %}{% endblock %}">
</head>

<body>
<!--NAVIGATION -->
<nav class = "navbar">
    <div class = "container">
         <a class =“brand-name“ id="name">Daniel</a>
         <div class ="navbar-section">
            <ul class= "navbar-nav ml-auto">
                <a href="{% url 'home'%}">Home</a>
                <a href="#">About</a>
                   <div class="dropdown">
                   <button class="dropbtn">Project
                    <i class="fa fa-caret-down"></i>
                    </button>
                         <div class="dropdown-content">
                           <a href="#">MENU</a>
                         </div>
                </div>

                  <div class="dropdown">
                  <button class="dropbtn">Photo
                  <i class="fa fa-caret-down"></i>
                  <div class="dropdown-content">
                         <a href="#">F1</a>
                         <a href="#">C1</a>
                         <a href="#">W1</a>
                         <a href="#">B1</a>
                        </div>
                 </div>

                <a href="#">Other Pages</a>
             </ul>
           </div>
        </div>
   </nav>

 {% block content %}{% endblock %}
 {% block footer %}{% endblock %}
 </body>
 </html>

Это код base.css. 

/* Navigation Container */
.navbar {
overflow: hidden;
background-color: rgb(56,56,56) ;
font-family: Arial, Helvetica, sans-serif;
height :  70px ;
 }

.container > a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px 16px;
text-decoration: none;
margin-left: 150px;
font-weight: bolder;
}

.navbar-nav a {
float: left;
font-size: 0.5rm;
color: rgb(198,206,212);
text-align: center;
padding: 10px 16px;
text-decoration: none;
}


.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 14px;    
border: none;
outline: none;
color: rgb(198,206,212);
padding: 10px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-content {   
display: none;
position: absolute;
background-color:  white;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
font-size : 0.80em ;
float: none;
color: black;
padding: 10px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: rgb(56,56,56);
}

.dropdown:hover .dropdown-content {
display: block;
}

.navbar a:hover, .dropdown:hover .dropbtn {
 color : white ;     
}

.ml-auto{
margin-left: 700px;
}
...