html - <a href> 在整个页面上而不是在 <nav> 内

标签 html css hyperlink href

我尝试制作带有 4 个链接的菜单,但可以在整个页面的任何位置单击其中一个。我试着寻找未封闭的标签,但似乎找不到任何东西。我还尝试使用检查代码错误的网站,他们说有未关闭的标签,但要么我是盲人,要么没有未关闭的标签...:/ 我知道这是菜鸟问题,但我现在正在尝试 20 分钟来找到未关闭的标签?我找不到。

编辑:如果我单击页面上的任意位置,about.html 将打开

我不知道如何上传文件,所以我只是在下面粘贴代码(我也有一些 css 代码,但我不认为 CSS 是问题所在):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta name="description" content="opis strony" />
    <link href="https://fonts.googleapis.com/css?family=Patrick+Hand&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="Style.css">
    <title> Kurs HTML i CSS3</title>
</head>

<body>
  <div class="container">
      <header>
        <div class="title">
          <h1>Kurs HTML5 i CSS3</h1>
        </div>
        <nav>
            <ul>
              <li><a href="index.html">Start</li>
              <li><a href="html5.html">HTML5</li>
              <li><a href="css3.html">CSS3</li>
              <li><a href="about.html">O mnie</li>
            </ul>
        </nav>
      </header>

      <div class="content">
          <div class="main-content">
                <section>
                    <article id="html5">
                      <h2>Artykuł o HTML5</h2>
                      <figure>
                          <img src="html5.png">
                          <figcaption>Logo HTML5</figcaption>
                      </figure>
                      <p>Witaj na mojej stronie poświęconej HTML5 i CSS3</p>
                    </article>

                    <article id="css3">
                      <h2>Artykuł o CSS3</h2>
                      <figure>
                        <img src="css3.png">
                        <figcaption>Logo CSS3</figcaption>
                      </figure>
                      <p>
                        Przykładowa treść 1 <br>
                        Przykładowa treść 2
                      </p>
                    </article>
                </section>
            </div>


            <div class="sidebar">
                <aside>
                    <h2>JavaScript</h2>
                    <p>Warto wiedzieć, że do tworzenia stron internetowych często wykorzystuje się również język JavaScript.
                      Pozwala on na zaprojektowanie interaktywnych stron internetowych poprzez reagowanie na zdarzenia.</p>
                </aside>
            </div>
        </div>


        <footer>Wszelkie prawa zastrzeżone &copy</footer>
  </div>
</body>

最佳答案

问题出在这里:

    <nav>
        <ul>
          <li><a href="index.html">Start</li>
          <li><a href="html5.html">HTML5</li>
          <li><a href="css3.html">CSS3</li>
          <li><a href="about.html">O mnie</li>
        </ul>
    </nav>

您应该以这种方式关闭链接文本之后的元素:

    <nav>
        <ul>
          <li><a href="index.html">Start</a></li>
          <li><a href="html5.html">HTML5</a></li>
          <li><a href="css3.html">CSS3</a></li>
          <li><a href="about.html">O mnie</a></li>
        </ul>
    </nav>

如果你不关闭它,a 元素之后的所有内容都在 anchor 元素“内部”

关于html - <a href> 在整个页面上而不是在 <nav> 内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53230758/

相关文章:

javascript - 使文本仅在 div 内时可见

jquery - 动态改变div之间的页面内容?

CSS z-index 无法正常工作

android - 我想要 TextView 作为可点击的链接

javascript - Jquery 更改部分文本的文本和 css

javascript - iOS 上的 Facebook 浏览器 : problems with localStorage

html - CSS:从容器中取出的图表

html - 如何强制文本在下一行中断?

java - 用java将网页解析成excel并使用超链接

javascript - PreventDefault() 不适用于图像链接