校园网页导航栏问题求助：顶部多余黑块+侧边无黑色背景

阿华AIGC实验室

2026-5-6

嘿，我瞅了你的代码和问题描述，这俩导航栏的问题其实都是浏览器默认样式和定位细节没处理好导致的，咱们一步步来修：

问题1：顶部出现意外黑块

这个黑块是<ul>标签的默认外边距（margin）搞的鬼！浏览器给列表标签默认加了margin和padding，你的<ul>直接放在#navbar里，它的默认margin-top会从导航栏里“漏”出来，再加上body默认也有margin，就出现了顶部的黑块。

修复方法：

重置<ul>的默认样式，去掉多余的margin和padding；
给body设置margin: 0，消除页面默认的边距。

问题2：侧边无黑色背景

你的#navbar用了width: 100%，但fixed定位的元素只设width的话，再加上body默认的margin，会导致左右两边留空白。换成left: 0; right: 0会更稳妥，能让导航栏完全贴合视口左右边缘。

修复方法：

把#navbar的width: 100%替换成left: 0; right: 0；
配合body的margin重置，确保没有额外边距干扰。

修改后的完整代码

CSS代码

@import "compass/css3";
/* 全局重置默认样式，避免浏览器自带样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0; /* 消除body默认边距 */
}

.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%;
  left: 20px; /* 替换原来的margin-right，避免文字过窄 */
  max-width: 320px; /* 限制宽度提升可读性 */
}

#navbar {
  background-color: #333;
  position: fixed;
  top: -50px;
  left: 0;
  right: 0; /* 替代width:100%，确保完全贴合视口 */
  display: block;
  transition: top 0.3s;
  overflow: hidden; /* 防止内部元素超出导航栏 */
}

#navbar ul {
  list-style: none; /* 去掉列表圆点 */
  margin: 0;
  padding: 0;
}

#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;
}

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>
      <li><a href="#home">Home</a></li> <!-- 给a标签加li包裹，符合HTML语义规范 -->
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <h1 class="headers">paul project</h1>
  <p class="headers" id="ondertekst">PLAYFUL DATA-DRIVEN ACTIVE URBAN LIVING</p>
  <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>