Question

我正在撰写HTML，CSS和JavaScript主页，并对制作菜单栏有疑问。
我已经有了设计并把它放在我拥有的每个网站上，但我也想到了改变它的一个小东西会有多复杂。所以我尝试制作一个只显示菜单栏的网站，然后在每个页面的开头链接它。这样我就可以最大限度地减少改变菜单栏中物品的工作量。但我是一个非常初学者，所以我并没有完全失败。

如果有人可以帮助我会很好。我是德国人，不会说英语或写英语，所以我很抱歉我可能犯的错误。

我可能需要的代码：

＆＃13;

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

＆＃13;

 <!DOCTYPE html>
    <html>
    <head>
        <title>Startseite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="Startseite">
        <meta name="description" content="Meine Startseite">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <ul id="fixed">
      <li><a href="menu.html">Startseite</a></li>
      <li><a href="timetable.html">Stundenplan</a></li>
      <li><a href="report.html">BOGY-Bericht</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Javascript</a>
        <div class="dropdown-content">
          <a href="js1.html">Beispiele 1</a>
          <a href="js2.html">Beispiele 2</a>
        </div>
      </li>
      <li><a href="animation.html">Animationen</a></li>
      <li><a href="canvas.html">Bouncing Ball</a></li>
      <li><a href="links.html">Verweise</a></li>
        </ul>
    </body>
    </html>

＆＃13;

Answer 1

＆＃13;

You have to make a new folder for include in which common data should be placed (header.php and footer.php)
Name of first File - index.php -
<?php include('include/header.php'); ?>

＆＃13;

Name of the second file - header.php(contains Common data (menu bar) )
header.php
<!DOCTYPE html>
        <html>
        <head>
            <title>Startseite</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="keywords" content="Startseite">
            <meta name="description" content="Meine Startseite">
            <link rel="stylesheet" href="style.css">
        </head>
 <body>
   <ul id="fixed">
          <li><a href="menu.html">Startseite</a></li>
          <li><a href="timetable.html">Stundenplan</a></li>
          <li><a href="report.html">BOGY-Bericht</a></li>
          <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">Javascript</a>
            <div class="dropdown-content">
              <a href="js1.html">Beispiele 1</a>
              <a href="js2.html">Beispiele 2</a>
            </div>
          </li>
          <li><a href="animation.html">Animationen</a></li>
          <li><a href="canvas.html">Bouncing Ball</a></li>
          <li><a href="links.html">Verweise</a></li>
            </ul>

＆＃13;

Name of third file is footer.php
      
    Footer.php
        </body>
        </html>

＆＃13;

文件应使用php扩展名保存

您必须在每个页面中使用此包含文件

＆＃13;

 <?php include('include/header.php'); ?>

＆＃13;

在每个页面上添加包含文件

Answer 2

这可以是您的header.php

<html>
     <body>
           <header>Hello World</header>
           <div>

这可以是您的footer.php

           </div>
           <footer>Bye World</footer>
     </body>
</html>

这可能是您的其他页面示例：other.php

<?php include ('header.php'); ?>
My html here.
<?php include ('footer.php'); ?>

尝试一下，我希望它会对你有所帮助。

一个页面中的HTML菜单栏，以包含在其他页面中

2 个答案: