Question

确定。所以基本上。我在学校有一个项目的网站。但我需要有主页，然后将其余部分分成不同的部分并将其放入不同的页面。因此，当观众点击导航栏上的相应按钮时，它将加载我页面的那一部分。我该如何工作？每个类别，即地貌，气候，都必须在一个单独的页面上。请帮忙

Answer 1

https://www.w3schools.com/css/css_navbar.asp是一个很好的网站，可以从

获取Nav Bar Code

Answer 2

您在同一目录中有例如：about.html，services.html和contact.html。比你在所有页面上有相同的菜单（如下所示）。比你只需更改.menu__link上的活动课程。页面之间的连接应该有效。

如果您想将网络的其他部分加载到某个活动页面，可以使用iframe，但这需要很长时间。现在我们正在使用AJAX，但对于一些初学者来说这有点困难。使用我说的第一个选项。希望我帮忙。

.menu__list {
  display: flex;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}

.menu__item {
  padding-left: 0;
  margin-bottom: 0;
  width: 22%;
}

.menu__link {
  display: block;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  background-color: #7fbee6;
  text-decoration: none;
  text-align: center;
  transition: background-color .2s;
}

.menu__link:hover,
.menu__link.active {
  background-color: #06639f;
}

<nav class="menu">
  <ul class="menu__list">
    <li class="menu__item"><a href="./about.html" class="menu__link active">About us</a></li>
    <li class="menu__item"><a href="./services.html" class="menu__link">Our services</a></li>
    <li class="menu__item"><a href="./contact.html" class="menu__link">Contact</a></li>
  </ul>
</nav>

如何创建导航栏以导致我创建的其他html页面？

2 个答案: