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

Question

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

我有 11 个 html 文件，所有文件顶部都有一个通用导航栏，带有通用菜单项和一个搜索 block 。每次我有一个新想法并向菜单(导航栏)添加一个元素时，我都必须复制并粘贴到所有其他 10 个文件。

有没有一种方法可以在 css 中添加菜单项，使其出现在所有页面中？

Answer 1

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

• 按照 Hayder Abbass 的回答中所述使用 PHP
• 使用 JavaScript，请参阅此处:Include another HTML file in a HTML file
• 使用 iFrame(有关 iFrame 的信息，请参阅有关 Javascript 的链接。

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

• PHP 需要一个能够正确处理 PHP 的服务器；这意味着您的托管服务提供商需要支持这一点(虽然很常见)。
• Javascript 需要用户在其浏览器中启用 Javascript。虽然这可能很常见，但如果用户没有启用 Javascript，他们将看不到您的导航。这很糟糕。

实际上还有另一种选择，它与所使用的技术是分开的。您还可以考虑使用支持某种模板的网站编辑器/应用程序。例如，当使用 Adob​​e DreamWeaver 时，您可以轻松创建模板。这意味着您的所有导航都可以在您的模板中，并且您的页面会在您每次更新模板时自动更新。我敢肯定，谷歌搜索编辑器会为您提供大量支持类似功能的商业、免费或几乎免费的编辑器列表。