Html 每页都有相同的菜单_Html_Css

Html 每页都有相同的菜单

html css

Html 每页都有相同的菜单,html,css,Html,Css,我有一个网站，每页都有菜单。但是，当我尝试在菜单上添加新链接时，我必须在每个页面上单独添加链接。所以，我像这样使用了HTML和CSS，所以我只需要编辑一件事，但它会显示为“Home”并带有“a”标记，而不是将“Home”显示为超链接 <!DOCTYPE html> <html> <head> <style> .menu:after{ content: "<a href="/index.html">Home<

我有一个网站，每页都有菜单。但是，当我尝试在菜单上添加新链接时，我必须在每个页面上单独添加链接。所以，我像这样使用了HTML和CSS，所以我只需要编辑一件事，但它会显示为“Home”并带有“a”标记，而不是将“Home”显示为超链接

<!DOCTYPE html>
<html>
  <head>
  <style>
    .menu:after{
    content: "<a href="/index.html">Home</a><a href="/game">Games</a>";}
  </style>
  <title>Page</title>
  </head>
<body bgcolor="#cccccc">
  <center>
    <div class="menu"></div>
  <center>
</body>
</html>


.菜单：之后{
内容：；}
页

哎呀，这是一种非常混乱的方式。你不能说你能不能。。。但我真的建议使用PHP来实现这一点。在一个PHP文件中创建菜单，比如说'menu.PHP'，并像下面这样包含它

require_once("menu.php");

您还必须将放入其中的文件从.html更改为.php。据我所知，您的方法没有性能问题，而当您通过将链接放入CSS来解决问题时，这种方式与CSS所代表的一切背道而驰。content属性主要用于插入某些不同样式的字符。。像定制子弹之类的。

那样做是不对的。您真正需要的是使用一种能够使模板化成为可能的语言。我建议您学习PHP，它会使类似的东西变得更容易。使用PHP，您可以有一个名为

menu.PHP

的文件，其中包含菜单的HTML标记，然后只需键入

include“menu.PHP”当您需要它时。PHP（和类似的语言）可以做的远不止这些，您不会后悔学习它。
创建一个页面调用
php并将菜单与代码放在一起
<a href="/index.html">Home</a><a href="/game">Games</a>;

；

然后在index.php中
<?php 
include('menu.php');
?>

您不能使用CSS来实现这一点，因为样式必须改变DOM。CSS只是没有被设计，也没有合法化来改变DOM

您可能应该使用服务器端的预处理语言（如PHP）进行模板化
另一个解决方案是使用jQuery（javascript）：
$（'.menu'）。前置（''）；
正如其他人提到的，PHP是实现这一点的最佳方式。Javascript可以实现这一点，但它不会优雅地中断。如果Javascript不工作或被关闭，您将无法导航
我想我会提到一些其他的可能性
iframe：

无缝与较旧的浏览器不兼容，但您可以使用css解决这一问题
SSI：

文件必须另存为.shtml或配置为解析ssi的html的服务器
，内容属性不允许在文件中包含html。您很可能希望使用诸如PHP之类的服务器端语言来完成此任务。学习和设置服务器端环境对于此任务没有多大意义，除非您的主机已经有了PHP，并且您想学习PHP。用JavaScript实现这一点非常简单；您可以将脚本保存在自己的.js文件中，并将其包含在每个页面中。让JS在页面加载时构建DOM。请参阅下面b4ttl3m4st3r的答案。请注意，jQuery在这里不是必需的，只是一个可选工具。+1，因为我不确定为什么其他答案认为OP应该学习服务器端技术来实现这一点。也就是说，如果您添加了一个没有引入jQuery依赖项的简单的老JavaScript选项，这个答案会更好。现在，如果关闭JavaScript，用户可能会忙于在其他地方享受糟糕的浏览体验而不关心OP的页面。公平点说，但它也会将处理转移到客户端，这可能会导致页面加载出现明显差异，与php相反。无缝从HTML5中完全删除。
$('.menu').prepend('<a href="/index.html">Home</a>');