图像/文本超链接 - HTML/CSS

Posted 2023-03-21

【中文标题】图像/文本超链接 - HTML/CSS

【英文标题】：Image/text Hyperlinks- HTML/CSS

【发布时间】：2021-02-21 11:41:52

【问题描述】：

我目前正在我网站的页脚中创建超链接社交媒体图标。 3 张图片中的每张都是单独的，并且每个都超链接到不同的社交媒体。但是，页脚中图片下方的“版权”文本会自动超链接到最后一张图片 = Instagram 的链接。

如何取消链接该文本？因为我希望它只显示文本而不是超链接

.Socials 
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        width: 30%;
    

    #footer 
        text-align: center;
        background-color: #000000;
        color: white;
        font-family: 'Big Shoulders Stencil Text', cursive;
    

      <div id="footer">
        <div class="Socials">
          <a href="https://www.facebook.com/studyatulster/">
          <img id="Facebook" src="Facebook.png" >
          <a href="https://twitter.com/UlsterUni?  ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
          <img id="Twitter" src="Twitter.png" >
          <a href="https://www.instagram.com/ulsteruni/?hl=en">
          <img id="Instagram" src="Instagram.png" >
        </div>
        <p>Belfast Virtual Shopping Centre - Copyright 2020</p>
      </div>

【参考方案1】：

使用</a> 关闭您的超链接。例如：

<a href="https://www.facebook.com/studyatulster/">
  <img id="Facebook" src="Facebook.png" >
</a>

否则浏览器会尝试为您更正标记结构，它可能并不总是正确猜测。

【讨论】：

效果很好，谢谢！原来我有我的开场而不是我的结束，所以我添加了这些，它工作得很好。

【参考方案2】：

您需要结束<a> 标签才能使“链接”不继续。

<div id="footer">
  <div class="Socials">
    <a href="https://www.facebook.com/studyatulster/">
      <img id="Facebook" src="Facebook.png" 
    /></a>
    <a
      href="https://twitter.com/UlsterUni?  ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"
    >
      <img id="Twitter" src="Twitter.png" 
    /></a>
    <a href="https://www.instagram.com/ulsteruni/?hl=en">
      <img id="Instagram" src="Instagram.png" 
    /></a>
  </div>
  <p>Belfast Virtual Shopping Centre - Copyright 2020</p>
</div>

【参考方案3】：

你应该关闭你的标签！

<a href="https://www.facebook.com/studyatulster/">
  <img id="Facebook" src="Facebook.png" />
</a>

如果它不需要关闭，就像图片一样，你可以在开始标签中放一个斜杠，如代码示例所示。