将我的标志链接到主页HTML

Question

我想让我的标志在页眉中可点击，并链接到主页，但我不知道该如何正确实现。

我的代码：

导航菜单：

HTML

<div id="myMenu">
            <div class="myWrapper">
                <nav>
                    <div class="logo"></div>
                </nav>
            </div>
        </div>

CSS

#myMenu
{
    width: 100%;
    height: 30px;
    z-index: 999; 
    background-color: #252e30;

}
.myWrapper
{
    max-width: 660px;
    margin: 0 auto;
}

.logo
{
    display: inline-block;
    width: 156px;
    height: 30px;
        margin-top: 5px;
        background-size: auto 43px;
    background-image: url(../images/mylogo.png);
    background-repeat: no-repeat;
}

我希望我的标志可以被点击，并链接到页面：Homepage.cshtml。

- Maarten Verstraten

---

只需要用锚标签将其括起来<a><img src="logo.png" /></a>。 - cms_mgr

Answer 1

不要使用CSS将您的标志设置为背景图像，使用包围在链接中的img标签会有什么问题吗？像这样：

<div id="myMenu">
  <div class="myWrapper">
    <nav>
    <a href="/"><img src="../images/mylogo.png" height="30" width="156" /></a>
    </nav>
  </div>
</div>

这样做有额外的好处，尤其是如果您在徽标上使用alt属性，可以使内容更易访问，从而使搜索引擎机器人更加满意。通过CSS设置传达给用户含义的图像内容是不可取的。

- Jonah Bishop

Answer 2

最好使用包含在锚标签中的图像。

但是否则这应该可以工作：

<div class="logo" onclick="window.location.href='homepage.html'"></div>

- Tim Baas

---

这是一种不好的做法，因为它会在没有 JavaScript（或禁用 JavaScript）的浏览器中出现错误。 - Bardi Harborow

Answer 3

<div id="myMenu">
         <div class="myWrapper">
             <nav>
                 <a href="Homepage.cshtml"><div class="logo"></div></a>
             </nav>
         </div>
    </div>

- Jack Allen

---

哦，好的，它能正常工作，很好，没有任何问题...就像你刚才说的一样...它能正常工作。 - Jack Allen

@JackAllen 只因为它能工作，并不意味着它是正确的并且会被验证。但在这种情况下，只要文档符合HTML5标准，你就是正确的。 - MikeSmithDev

@soyuka 在这里阅读如何使用HTML5元素链接包装块级元素。 - MikeSmithDev

谢谢MikeSmithDev，我真的以为这是无效的。 - soyuka

它建议<a>标签内的所有内容都是指向href的链接，因此使用它没有问题，这与在任何其他内容周围使用<a>标签是相同的。 - Jack Allen

如果它是 HTML 4.01，则错误。 - MikeSmithDev

Answer 4

您不能将背景图像作为链接。请将该图像移到HTML代码中，然后使其成为链接。

- digitalfrenchfry

---

这是具有误导性的。一个元素可以拥有背景图片并且被链接，从视觉上使背景图片成为链接。 - MikeSmithDev

Answer 5

还可以像下面的示例一样：

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000000;">     
      <div class="logo" >
            <a href="{% url 'major' %}">
                <img src="{% static 'images/logo.gif' %}" style="width:80px;height:80px;"/>
            </a>
      </div>
      .....
</nav>

- Alexander

Answer 6

使用 <a> 代替 <div> 来放置标志。

- Roger C