我需要一个水平navbar，其中一张图片和一张可滚动的黑色背景。这张黑色背景图片应该在navbar之上，并且必须修复。
\\ !!! EDIT !!! //// its like i described in my comment to your answer
i hope that is better to understand this black box takes me to an endless night :S
<head>
<style>
header {
margin_top: 0;
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
font-family: verdana;
}
li {
border-right: 1px solid #bbb;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul a.active {
background-color: #555;
color: white;
}
nav ul a:hover {
background-color: black;
}
</style>
</head><!DOCTYPE html>
<meta lang="de_DE">
<html>
<body>
<header>
<a href="LINK" target="_blank">
<img src="######" alt="Picture" align="middle">
</a>
</header>
<nav>
<ul>
<li><b><a class="active" href="LINK">London</a></b></li>
<li><a href="#">Nizza</a></li>
<li><a href="#">California</a></li>
<li><a href="#">Munich</a></li>
<li><a href="#">Tokyo</a></li>
<li><a href="#">Mumbai</a></li>
<li><a href="#">Mauritius</a></li>
<li style="float:right" padding-right:"1em"><a href="#">Impressum</a></li>
</ul>
</nav>
<div style="padding:1px 16px;height:1000px;">
<article>
<h1>City of London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</div>
<footer>Copyright © i dont know</footer>
</body>
</html>
答案 0 :(得分：0)
您的CSS中有一些不必要的样式规则，最可能的罪魁祸首是您ul的定位。我清理了下面的代码，我相信它可以按照您的意图运行。 margin_top CSS规则中的header不是有效的属性（s / b margin-top）。从position移除top和ul媒体资源，并在width: 100%添加header。同时从align="middle"代码中删除img - 您已使用text-align: center CSS规则中的header对齐该图片。
header {
margin-top: 0;
padding: 1em;
color: white;
background-color: black;
text-align: center;
width: 100%;
}
footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 100%;
font-family: verdana;
}
li {
border-right: 1px solid #bbb;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul a.active {
background-color: #555;
color: white;
}
nav ul a:hover {
background-color: black;
}<!DOCTYPE html>
<meta lang="de_DE">
<html>
<body>
<header>
<a href="LINK" target="_blank">
<img src="http://lorempixel.com/200/100/" alt="Picture">
</a>
</header>
<nav>
<ul>
<li><b><a class="active" href="LINK">London</a></b>
</li>
<li><a href="#">Nizza</a>
</li>
<li><a href="#">California</a>
</li>
<li><a href="#">Munich</a>
</li>
<li><a href="#">Tokyo</a>
</li>
<li><a href="#">Mumbai</a>
</li>
<li><a href="#">Mauritius</a>
</li>
<li style="float:right" padding-right: "1em"><a href="#">Impressum</a>
</li>
</ul>
</nav>
<div style="padding:1px 16px;height:1000px;">
<article>
<h1>City of London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</div>
<footer>Copyright © i dont know</footer>
</body>
</html>
现在，如果你想在屏幕顶部修复header和nav，那么最简单的方法就是将它们包裹在div内然后使用CSS修复屏幕顶部div的位置。我还删除了div包装您的文章并添加了CSS规则以将文章向下移动，以便它从标题和＆amp;的固定位置下方开始。 NAV。
#fixMe {
position: fixed;
top: 0;
left: 0;
}
header {
margin-top: 0;
padding: 1em;
color: white;
background-color: black;
text-align: center;
width: 100%;
}
footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 100%;
font-family: verdana;
}
li {
border-right: 1px solid #bbb;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul a.active {
background-color: #555;
color: white;
}
nav ul a:hover {
background-color: black;
}
article {
margin-top: 250px;
height: 1000px;
}<div id="fixMe">
<header>
<a href="LINK" target="_blank">
<img src="http://lorempixel.com/200/100/" alt="Picture">
</a>
</header>
<nav>
<ul>
<li><b><a class="active" href="LINK">London</a></b>
</li>
<li><a href="#">Nizza</a>
</li>
<li><a href="#">California</a>
</li>
<li><a href="#">Munich</a>
</li>
<li><a href="#">Tokyo</a>
</li>
<li><a href="#">Mumbai</a>
</li>
<li><a href="#">Mauritius</a>
</li>
<li style="float:right" padding-right: "1em"><a href="#">Impressum</a>
</li>
</ul>
</nav>
</div>
<article>
<h1>City of London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
<footer>Copyright © i dont know</footer>
答案 1 :(得分：0)
特别感谢 Dave Cripps
#fixMe {
position: fixed;
top: 0;
left: 0;
}
header {
margin-top: 0;
padding: 1em;
color: white;
background-color: black;
text-align: center;
width: 100%;
}
footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
width: 100%;
font-family: verdana;
}
li {
border-right: 1px solid #bbb;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul a.active {
background-color: #555;
color: white;
}
nav ul a:hover {
background-color: black;
}
article {
margin-top: 250px;
height: 1000px;
}<div id="fixMe">
<header>
<a href="LINK" target="_blank">
<img src="http://lorempixel.com/200/100/" alt="Picture">
</a>
</header>
<nav>
<ul>
<li><b><a class="active" href="LINK">London</a></b>
</li>
<li><a href="#">Nizza</a>
</li>
<li><a href="#">California</a>
</li>
<li><a href="#">Munich</a>
</li>
<li><a href="#">Tokyo</a>
</li>
<li><a href="#">Mumbai</a>
</li>
<li><a href="#">Mauritius</a>
</li>
<li style="float:right" padding-right: "1em"><a href="#">Impressum</a>
</li>
</ul>
</nav>
</div>
<article>
<h1>City of London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
<footer>Copyright © i dont know</footer>