Question

以下是我开发的应用： http://azeribocorp.pythonanywhere.com/index/

当我点击菜单中的Search时，导航栏向下移动，我无法找到问题所在。我希望菜单始终固定在页面顶部。任何帮助表示赞赏。

__ base.html文件：

    {% load staticfiles %}

    <!DOCTYPE html>

    <html lang="en" class="no-js">
        <head>
            {% block meta_tags %}{% endblock meta_tags%}

            <title>
                {% block title %}Azeribo Tracking{% endblock title %} 
            </title>

            {% block stylesheets %}         {% endblock %}      
            {% block javascript %}          {% endblock javascript %}       
            {% block extra_head %}          {% endblock %}
        </head>

        <body>
            <header class="topnavbar">
                {% include 'aztracker/_topnavbar.html' %}
            </header>

            <div id="main" role="main">
                <div class="container">
                    {% block content %}
                    {% endblock content %}
                </div>
            </div> {# /#main #}
            <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
        </body>
    </html>

_topnavbar.html

{% load static %}
{% load staticfiles %}


<head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
    <link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
</head>

<!--Top Navigation-->
<nav role="navigation" class="nav">
    <ul class="nav-items">
        <li class="nav-item">
            <a href="/index/" class="nav-link"><span>Home</span></a>
        </li> 
        <li class="nav-item ">
            <a href="#" class="nav-link"><span>Track Container</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
                </ul>
            </nav>
        </li> 
        <li class="nav-item">
            <a href="/search/" class="nav-link"><span>Search</span></a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link"><span>Report</span></a>
        </li> 
        <li class="nav-item dropdown">
            <a href="#" class="nav-link"><span>More</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
                </ul>
            </nav>
        </li>  
    </ul>
</nav>

search_form.html

{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}


{% block stylesheets %}                 
    <link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}

{% block content %}
    {% block main_col %}
        <body>
            <section class="search_section">
                <form  method="POST" action="/search/">         
                    {% csrf_token %}
                    <input type="text" placeholder="What are you looking for?" name="search_input_field" id="search_input">             
                    <button id="search_btn">Search</button>
                </form>
            </section>
        </body>         
    {% endblock main_col %} 
{% endblock content %}

_topnavbar.css

* {border:1px black solid;}
.topnavbar {
    background-color: rgba(0,100,150,0.6);/*rgba(0,255,150,0.6);/*#3EDC99*/
}

html {
    box-sizing: border-box;
}

*, 
*:before, 
*:after {
    box-sizing: inherit;
}

body {
    background-color: #3498db; 
}

.nav {
    width: 550px;
    margin: 0 auto 0 auto;
    text-align: center;
}

/* Navigation */

.nav {
    font-family: Verdana, Georgia, Arial, sans-serif;
    font-size: 14px;
}

.nav-items {
    padding: 0;
    list-style: none;
}

/* color of menu links
span    {

    color:yellow;
}
*/

.nav-item {
    display: inline-block;
    margin-right: 25px;
}

.nav-item:last-child {
    margin-right: 0;
}

.nav-link,
.nav-link:link, 
.nav-link:visited, 
.nav-link:active,
.submenu-link,
.submenu-link:link, 
.submenu-link:visited, 
.submenu-link:active {
    display: block;
    position: relative;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    color:#fff;
}

.nav-link ,
.nav-link:link, 
.nav-link:visited, 
.nav-link:active {
    color: #fff;
    font-weight: bold;
}

.nav-link::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-link:hover::before,
.nav-link:hover::before {
    opacity: 1;
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
}

.dropdown {
    position: relative;
}

.dropdown .nav-link {
    padding-right: 15px;
    height: 17px;
    line-height: 17px;
}

.dropdown .nav-link::after {
    content: "";
    position:absolute;
    top: 6px;
    right: 0;
    border: 5px solid transparent;
    border-top-color: #fff; /*small triangle showing drop down menu*/
}

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 100;
    width: 200px;
    margin-left: -100px;
    background: #fff;
    border-radius: 3px;
    line-height: 1.46667;
    margin-top: -5px;
    box-shadow: 0 0 8px rgba(0,0,0,.3);
    opacity:0;
    -webkit-transform: translate(0, 0) scale(.85);
    transform: translate(0, 0)scale(.85);
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    pointer-events: none;
}

.submenu::after, 
.submenu::before {
    content: ""; 
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    height: 0;
}

.submenu::after {
    border-bottom-color: #fff;
}

.submenu::before {
    margin-left: -13px;
    border: 13px solid transparent;
    border-bottom-color: rgba(0,0,0,.1);
    -webkit-filter:blur(1px);
    filter:blur(1px);
}

.submenu-items {
    list-style: none;
    padding: 10px 0;
}

.submenu-item {
    display: block;
    text-align: left;
}

.submenu-link,
.submenu-link:link, 
.submenu-link:visited, 
.submenu-link:active {
    color: #3498db;
    padding: 10px 20px;
}

.submenu-link:hover {
    text-decoration: underline;
}

.submenu-seperator {
    height: 0;
    margin: 12px 10px;
    border-top: 1px solid #eee;
}

.show-submenu .submenu {
    opacity: 1;
    -webkit-transform: translate(0, 25px) scale(1);
    transform: translate(0, 25px) scale(1);
    pointer-events: auto;
}

.submenu-link{
    color:red;
}

search_form.css

* {border:1px black solid;}

Answer 1

您的html中似乎有一个胭脂Unicode字符。单击＆＃34;搜索＆＃34;后检查页面源。将Unicode字符显示为＆amp;＃65279。这个角色是＆＃39; ZERO WIDTH NO-BREAK SPACE＆＃39;。

在文本编辑器中不会看到它，因为它会分析字符。您可以尝试在记事本或某些不了解Unicode的texteditor中打开您的代码并尝试从那里删除它。

还值得指出的是，您的内容会显示在您的代码中

关于RHSeeger回答here

中的角色

希望这有帮助！

Answer 2

您在某些时候破坏了HTML，我可以在构建模板时看到一些问题。

<强>第一

您在身体标记（_topnavbar.html）

中加入了头标记

<head>
    <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
    <link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
</head>

这应该在“extra_head”块中，如下所示（_topnavbar.html）：

{% block extra_head %}
        <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
        <link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">
{% endblock %}

<强>第二您在body标签（search_form.html）中添加了一个额外的body标签：

{% block content %}
    {% block main_col %}
        <body>
            <section class="search_section">
                <form  method="POST" action="/search/">         
                    {% csrf_token %}
                    <input type="text" placeholder="What are you looking for?" name="search_input_field" id="search_input">             
                    <button id="search_btn">Search</button>
                </form>
            </section>
        </body>         
    {% endblock main_col %} 
{% endblock content %}

您必须删除该正文标记。

<强>第三：

您正在以错误的方式添加脚本（_topnavbar.html）：

<link rel="script" type="text/css" href="{% static 'css/_topnavbar.js' %}">

你可以这样添加：

<script src="{% static 'css/_topnavbar.js' %}" charset="utf-8"></script>

也许你有更多错误，你应该逐行检查你的代码并找到所有其他问题。

我希望这个答案对你有用，祝你有个美好的一天。

Answer 3

在所有子页面（包括搜索）上，尝试将其添加到CSS：

body {
margin: auto;
}

单击特定菜单项

3 个答案: