如何修复导航栏背景问题？HTML/CSS新手技术求助

核心问题1：全局样式覆盖导致父元素背景不符 #

你用*选择器给所有元素强制设置了background-color: #232323，但导航栏需要的背景色是#000f14——你只给<ul>和<a>标签设置了这个背景，它们的父元素（.navbar、.navbar__container、#nav-placeholder）依然继承了全局的深灰色，这就导致导航栏区域出现背景断层。

核心问题2：HTML标签语法错误 #

logo部分的a标签写法有误，你提前闭合了<a href="/index.html"></a>，导致图片不在链接内部，还多了一个无效的闭合</a>，这会干扰正常布局结构。

修复后的完整代码 #

CSS 调整

/* 页面全局样式 */
body {
  background-color: #232323;
  color: white;
  margin: 0; /* 清除浏览器默认外边距，避免页面顶部留白 */
}

/* 导航栏样式 */
.navbar {
  background: #000f14; /* 给导航栏根元素统一设置背景 */
}

.navbar__container {
  background: #000f14; /* 确保容器背景与导航栏一致 */
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000f14;
}

.navbar li {
  float: left;
}

.navbar li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background: #000f14;
}

/* 适配导航栏logo样式 */
.navbar li img {
  vertical-align: middle;
  background: transparent; /* 图片不需要继承背景色 */
  height: 48px; /* 可根据需求调整logo高度 */
}

HTML 修正

<div id="nav-placeholder">
  <nav class="navbar">
    <div class="navbar__container">
      <div class="navbar__toggle" id="mobile-menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
      <ul>
        <li>
          <a href="/index.html">
            <img src="/images/AquaTech navbar logo.png" alt="navbar__logo">
          </a>
        </li>
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="about.html">About us</a></li>
      </ul>
    </div>
  </nav>
</div>

关键修复说明 #

1. 把全局样式从*改为body，避免强制给所有元素套背景，只给页面主体设置深灰色，让导航栏的父元素可以单独定义背景。
2. 给.navbar和.navbar__container都加上background: #000f14，确保整个导航栏区域背景完全统一。
3. 修正logo的a标签嵌套错误，让图片正确包裹在链接内部，同时给图片设置垂直对齐和高度，避免布局错乱。
4. 给body添加margin:0，清除浏览器默认的外边距，解决页面顶部留白问题。

内容的提问来源于stack exchange，提问作者Dani L.