Question

我正在重新设计我公司的网站，我正在尝试使用按钮链接创建一个水平导航栏（我已经管理过一些）。问题是完全相同的菜单应该出现在每个页面上（其中有100多个），按钮选项可能会在未来减少。

我的问题是：有没有办法在外部CSS中放置按钮文本和相关链接，以便对所有这些页面进行重新编码和将来编辑更简单？我搜索并尝试了我能想到的一切。以下代码仍然是一项正在进行中的工作，因此任何建议都将受到赞赏。

相关的css：

/* BEGIN Menu Buttons*/

#menu {text-align:center;}

#menu ul {
    display: inline-block;
    list-style-type: none;
    text-align: center;}

#menu ul li {
    float: left;
    width: 140px;
    height:50px;
    list-style-type:none;}

#menu li a {
    width: 130px;
    height:40px;
    padding:5px;
    display:block;
    color: #fff ;
    background-color: #000 ;
    font: Times New Roman;
    font-size:14pt;
    line-height:40px;
    text-align:center;
    text-decoration: none ;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff;;}

#menu li a:hover {
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    outline: 1px solid #fff;
    font-size:16pt;}

/* END Menu Buttons*/

相关HTML：

<header>
<div id="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="buy.html">Buy</a></li>
        <li><a href="sell.html">Sell</a></li>
        <li><a href="maintenance.html">Maintenance</a></li>
        <li><a href="parts.html">Parts</a></li>
        <li><a href="information.html">Information</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
  </div>
</header>

Answer 1

如果我理解你的问题，我会使用的解决方案是PHP

首先，您需要将页面保存为.php才能使其正常工作（而不是.html）

其次，创建一个新文件（menu.php）并粘贴上面的MENU代码。

在您拥有的每个页面中，都将菜单HTML代码替换为：

<?php

include 'menu.php';

?>

（假设您将menu.php放在与其余页面相同的文件夹中）

现在，如果您的菜单内容扩展，只需编辑menu.php，您的菜单就会在包含menu.php文件的所有页面上更新。

Answer 2

另一种解决方案，如果您不使用PHP而且需要一个HTML解决方案，您可以始终依靠iframe。

<iframe id="iframe" src="xxx.html" width="500" height="180"></iframe>

但问题是，如果您的菜单比此iframe帐户更大（更宽），则您需要更新每个页面上的width。

如何将按钮文本和链接包含在css中

2 个答案: