Question

我正在使用Bootstrap + HTML + CSS创建我的第一个网站，如果不是这个网站我会完全失去它，这是一个陡峭的学习曲线。

我有11个html文件，所有文件都带有一个公共导航栏，顶部有comon菜单项和搜索块。每当我有一个新想法并将一个项目添加到菜单（导航栏）时，我必须复制并过去所有其他10个文件。

有没有办法可以在css中添加菜单项，以便它显示在所有页面中？

Answer 1

不要使用CSS执行此操作 - CSS用于样式，而不是添加内容。最好的方法是将导航放在单独的文档中，并在必要时包含它。三个明显的选择是：

使用Hayd Abbass的答案中描述的PHP
使用JavaScript，请参阅此处：Include another HTML file in a HTML file
使用iFrames（有关iFrame的信息，请参阅有关Javascript的链接。

根据您使用的技术，可能还有其他方法可以做到这一点，但PHP和Javascript可能是最常见的。通过选择以下任一方式，请记住您添加的限制：

PHP需要一台能正确处理PHP的服务器;这意味着您的托管服务提供商需要支持此功能（非常常见）。
Javascript需要用户在其浏览器中启用Javascript。虽然这可能是常见的，但如果用户没有启用Javascript，他们将无法看到您的导航。这是非常糟糕的。

实际上还有另一种选择，它与所使用的技术是分开的。您还可以查看使用支持某种模板的网站编辑器/应用程序。例如，使用Adobe DreamWeaver时，您可以轻松创建模板。这意味着您的所有导航都可以在您的模板中，每次更新模板时，您的页面都会自动更新。我肯定谷歌搜索编辑会给你一个大量的商业，免费或几乎免费的编辑器，支持类似的东西。

Answer 2

你可以这样做的方法是将所有的html文件转换为php文件（重命名文件扩展名）。然后将您的公共代码放在header.php中。例如：

header.php应该包含这样的内容：

<header role="banner" class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
  <div class="container">

    <nav role="navigation" class="collapse navbar-collapse bs-navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="./getting-started">Getting started</a>
        </li>

        <li>
          <a href="./components">Components</a>
        </li>
        <li>
          <a href="./javascript">JavaScript</a>
        </li>
        <li>
          <a href="./customize">Customize</a>
        </li>
      </ul>

    </nav>
  </div>
</header>

然后在每个文件中，将其引用为：

include_once('header.php');

如果您对导航栏进行了任何更改，则只需编辑header.php以反映所有其他页面上的更改。

此页面上的更多信息： Creating a PHP header/footer

将所有导航栏菜单项放在CSS而不是HTML中

2 个答案: