HTML相对路径在导航菜单内导致404错误

时间:2019-11-22 00:48:15

标签: html css path relative-url

我的导航菜单中有6个文件,它们连接到服务器上public_html主文件夹中的文件夹。我正在使用<nav>作为我的标签之一,因为我要连接到包含菜单布局的外部CSS样式表。

这是我的HTML菜单:

<center>
    <nav>
        <ul id="mainMenu">
            <li><a href="public_html/Dome1/art.html">Art Dome</a></li>
            <li><a href="public_html/Dome2/music.html">Music Dome</a></li>
            <li><a href="public_html/Dome3/code.html">Dome Unknown</a></li>
            <li><a href="https://www.google.com/maps/search/scrap+metal+near+me/@41.4745193,-81.7553814,14z/data=!3m1!4b1">Hunger Dome</a></li>
            <li><a href="https://www.wikipedia.org/wiki/special:Random">Education Dome</a></li>
            <li><a href="public_html/Dome6/yesno.html">Yes or No Dome</a></li>
            <!--yesno dome has green circle with yellow text saying "yes"-->
            <li><a href="public_html/Dome7/dontgo.html">Do Not Go Into This Dome!</a></li>
            <!--do not dome: red circle with text saying: you have entered into the wrong dome. Go back.-->
            <li><a href="public_html/Contact Dome/contact.html">Contact</a></li>
        </ul>
    </nav>
</center>

如您所见,这有点断断续续,但是我想添加相对路径,例如:Dome1/art.html等。有提示吗?

1 个答案:

答案 0 :(得分:0)

首先,<center></center>不再是有效的HTML。而是构建一个CSS类。它与HTML5不兼容。就是说,您的路径不应包含public_html文件夹。我重写了您的导航。

.text-center {
  text-align: center;
}
    <nav class="text-center">
      <ul id="mainMenu">
        <li><a href="dome1/art.html">Art Dome</a></li>
        <li><a href="dome2/music.html">Music Dome</a></li>
        <li><a href="dome3/code.html">Dome Unknown</a></li>
        <li><a href="https://www.google.com/maps/search/scrap+metal+near+me/@41.4745193,-81.7553814,14z/data=!3m1!4b1">Hunger Dome</a></li>
        <li><a href="https://www.wikipedia.org/wiki/special:Random">Education Dome</a></li>
        <li><a href="dome6/yesno.html">Yes or No Dome</a></li>
        <!--yesno dome has green circle with yellow text saying "yes"-->
        <li><a href="dome7/dontgo.html">Do Not Go Into This Dome!</a></li>
        <!--do not dome: red circle with text saying: you have entered into the wrong dome. Go back.-->
        <li><a href="contact-dome/contact.html">Contact</a></li>
      </ul>
    </nav>