如何解除网站页脚版权文本的误关联社交媒体超链接？

嘿，这个问题的根源很简单：你所有的<a>标签都没有添加闭合标签</a>。浏览器在解析不完整的HTML时，会自动尝试补全结构，结果就把下方的版权<p>元素错误地包含进了最后一个Instagram的<a>链接里，所以版权文本才会带上那个超链接。

修复后的完整代码 #

只需要给每个<a>标签补上闭合的</a>即可，修改后的HTML代码如下：

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

额外优化小建议（可选） #

如果想让社交媒体图标之间有合适的间距，避免挤在一起，可以给.Socials里的<a>标签加一点内边距或外边距，比如在CSS里添加：

.Socials a {
  margin: 0 10px; /* 左右各10px间距，可根据需求调整 */
}

这样图标布局会更美观哦～

内容的提问来源于stack exchange，提问作者Rachel F