【发布时间】：2018-03-01 23:39:41
【问题描述】：
这是我开发的应用程序： 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;}
【问题讨论】：
-
为什么在内容块中使用 main_col 块？为什么在模板中使用“body”标签？ （你已经把它放在 __base.html 上）
标签： html css django django-templates