导航链接未链接答案

【问题标题】：Navigation links not linking导航链接未链接
【发布时间】：2016-05-31 08:02:19
【问题描述】：

我知道这很简单，但我正在自学 HTML 和 CSS。在导航部分，通常会链接 Home、About、Contact 等选项卡，且大多包含 ul； li，一个 href 标记，具有下划线链接，并带您到正在链接的部分/选项卡。不知道我错过了什么或做错了什么。这是这里的html代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>Home Cleaning Services in the SF Bay Area</title>


    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <header>
        <img src="Images/SparklingCleanLogo.jpg" class=ImageLogo>
       <!--This is the menu bar-->

        <nav>
            <ul>
                <li a href="index.html">Home</a></li>
                <li a href="About.html">About US</a></li>
                <li a href="Services.html">Services</a></li>
                <li a href="Rates.html">Rates</a></li>
                <li a href="contact.html">Contact US</a></li> 
            </ul>
        </nav>



    </header>
    <h2>We Talk Cleaning</h2>
    <p>Sparkling Cleaning is a dedicated family business in the home cleaning business. We have experience in different types of cleaning needs for all home sizes and offices. We work hard to provide you with a spotless place for your place.</p>

    <img src="Images/Clean-house.jpg">

  </body>

  <footer>All Rights Reserved 2016</footer>
</html>

【问题讨论】：

标签： html hyperlink href

【解决方案1】：

改成

<li><a href="index.html">Home</a></li>

【讨论】：

【解决方案2】：

您在这段代码中缺少一些括号：

<li a href="index.html">Home</a></li>

这里是更正的版本：

<li><a href="index.html">Home</a></li>

您需要为所有 li 元素更改此设置，因此最终版本将是：

<li><a href="index.html">Home</a></li>
<li><a href="About.html">About US</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Rates.html">Rates</a></li>
<li><a href="contact.html">Contact US</a></li>

【讨论】：

现在 Contact US.html、About Us.html 和 Rates.html 显示所有正文内容，并带有将其带到不同页面的链接。这是html代码：

【解决方案3】：

标签必须独立使用，所以应该如下：

    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="About.html">About US</a></li>
            <li><a href="Services.html">Services</a></li>
            <li><a href="Rates.html">Rates</a></li>
            <li><a href="contact.html">Contact US</a></li> 
        </ul>
    </nav>

【讨论】：

非常感谢。我知道它是如此简单，但我没有看到它。我真的很感激！

【解决方案4】：

改变

<li a href="index.html">Home</a></li>
<li a href="About.html">About US</a></li>
<li a href="Services.html">Services</a></li>
<li a href="Rates.html">Rates</a></li>
<li a href="contact.html">Contact US</a></li>

到

<li><a href="index.html">Home</a></li>
<li><a href="About.html">About US</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Rates.html">Rates</a></li>
<li><a href="contact.html">Contact US</a></li>

【讨论】：