Javascript 我的菜单上少了一部分，有时不得不把我的大部分菜单_Javascript_Html_Css_Menu

Javascript 我的菜单上少了一部分，有时不得不把我的大部分菜单

javascript html css menu

Javascript 我的菜单上少了一部分，有时不得不把我的大部分菜单,javascript,html,css,menu,Javascript,Html,Css,Menu,我正在为学校制作一个网页，遇到了一个我和我的老师都无法解决的问题。如果你试着分配东西。问题是我从w3schools复制了一个菜单，但它不能按我所希望的方式工作。在第一张照片中，你看到顶部有一些黑色，这不是有意的，在第二张照片中，你看到侧面没有黑色，这也是无意的如果有人能帮我解决这两个问题，我将不胜感激这是我的代码（顺便说一句：）我的css @import "compass/css3"; body { background-image: url("background.png"

我正在为学校制作一个网页，遇到了一个我和我的老师都无法解决的问题。如果你试着分配东西。问题是我从w3schools复制了一个菜单，但它不能按我所希望的方式工作。在第一张照片中，你看到顶部有一些黑色，这不是有意的，在第二张照片中，你看到侧面没有黑色，这也是无意的

如果有人能帮我解决这两个问题，我将不胜感激

这是我的代码（顺便说一句：）

我的css

    @import "compass/css3";
body {
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.headers{
  color: white;
  font-family: monospace;
}
h1 {
  font-size: 70px;
  position: absolute;
  left: 35%;
  top: 23%;
  text-shadow:
     3px  3px 0 #000,
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  }

#ondertekst {
    position: absolute;
    left: 29%;
    top: 37%;
        font-size: 30px;
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
    -webkit-animation: fill 0.5s infinite alternate;
    }
#tekst1{
  position: absolute;
  top: 70%;
  margin-right: 95%;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}

我的html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testhomepage.css">
<script src="testhomepage.js"></script>
<title>Page Title</title>
</head>
<body>

<div id="navbar">
<ul>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</ul>
</div>
<h1 class="headers">paul project</h1>
<p class="headers" id="ondertekst">PLAYFUL DATA-DRIVEN ACTIVE URBAN LIVING</p>
</style>
<p id="tekst1">Paul staat voor PLAYFUL DATA-DRIVEN ACTIVE URBAN LIVING en is bedoeld om mensen
  slim in beweging te krijgen. Dit word gedaan door bacons en en slimme app die je
  helpt en motiveert. In samenwerking met de gemeente Amsterdam zijn in het
  Amstelpark en het Oosterpark allerlei zendertjes geplaatst. Zogenaamde beacons.
   Daardoor kun je op bepaalde plekken speciale oefeningen doen of je wordt
   aangemoedigd met motiverende berichten.
</p>
</body>
</html>

顶部的黑色条是因为javascript代码中的navbar高度值实际上小于navbar高度

我还看到文本在菜单上移动，所以我在顶部添加了z-index

通过添加

z-index

和

left:0和<代码>右侧：0这将在内容上创建一个新的位置堆栈，足以删除空白
你能看到这个演示吗

window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
if（document.body.scrollTop>20 | | document.documentElement.scrollTop>20）{
document.getElementById（“navbar”）.style.top=“0”；
}否则{
document.getElementById（“navbar”）.style.top=“-75px”；
}
}
正文{
背景图片：url（“background.png”）；
背景尺寸：封面；
背景重复：无重复；
}
.标题{
颜色：白色；
字体系列：monospace；
}
h1{
字体大小：70px；
位置：绝对位置；
左：35%；
最高：23%；
文本阴影：
3×3×0#000，
-1px-1px 0#000，
1px-1px 0#000，
-1px 1px 0#000，
1×1×0#000；
}
#ondertekst{
位置：绝对位置；
左：29%；
最高：37%；
字体大小：30px；
-webkit文本笔划：1px黑色；
-webkit文本填充颜色：白色；
-webkit动画：填充0.5s无限交替；
}
#tekst1{
位置：绝对位置；
最高：70%；
右边距：95%；
}
#导航栏{
背景色：#333；
位置：固定；
顶部：-70px；
左：0；
右：0；
宽度：100%；
显示：块；
过渡：前0.3名；
z指数：2；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：15px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}



保罗项目
有趣的数据驱动的主动城市生活
保罗·斯塔特·沃尔（Paul staat voor）是一位有趣的数据驱动的积极城市生活者
苗条的克里金。单词gedaan door bacons en en SLIME应用程序die je
帮我做运动。在萨门沃金会见了德gemeente阿姆斯特丹zijn在赫特
阿姆斯特尔帕克和奥斯特帕克的阿莱利·曾德杰斯·格普拉特。Zogenaamde信标。
达尔多尔·库恩（Daardoor kun je op bepaalde plekken speciale oefeningen doen of je wordt）是一家专业餐厅
安格莫迪格德遇到了贝里赫滕。
这很可能是由于默认情况下设置了
标记的边距造成的。尝试删除
中的任何边距和填充，看看是否有帮助。同样值得养成使用CSS规范化器（）或重置器（）的习惯。
标记的后代应该是标记-这可能不会在视觉上影响布局，但您应该将
标记包装在
标记中，以确保兼容性和正确的标记，@Oliver说，您可以添加重置或规范化css，您可以使用浏览器控制台中的inspect元素检查额外的边距。您可以详细说明如何修复此处的问题；说“也修复了空白区域”并不能说明问题发生的原因，也不能说明其他任何经历过类似问题的人将来如何缓解问题problems@Oliver对不起，由于某些原因我很匆忙，我说“也修复了空白”因为通过添加z-index
我在内容上方创建了一个新的位置堆栈，所以留下空白的原因是什么：0和<代码>右侧：0将重置it@Oliver我编辑了我的答案来添加这些细节我希望这对你有意义