html - 超链接似乎已从图像中泄漏出来

Question

我目前正在学习 HTML 和 CSS，但我的代码有点问题。

如果有人能够提供帮助，我们将不胜感激。

这是我的网站设计 - http://puu.sh/5D4yG.png

这是我遇到问题的网站部分的图片。

http://puu.sh/5D3Rr.png

如果您在顶部的两个图像之间查看，您会在间隙中看到一条非常小的蓝色下划线。

然后，如果您查看标题下方，还有另一个紫色下划线。

我没有为任何需要加下划线的内容编写代码，所以我不确定它为什么会出现。

代码如下:

CSS

#currentprojects
{
padding:5px;
width:75%;
height:auto;
margin:0px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}

#projects
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}

#latestvideos
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}

HTML

<div id="currentprojects">
    <div align="center"><h1>current projects</h1></div>
</div>

<div id="projects">
    <a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8"><img class="ritgk" src="images/ritgk.png" onmouseover="this.src='images/ritgkhover.png'" onmouseout="this.src='images/ritgk.png'"  alt="RITGK iOS App" width="296" height="168"/>

    <a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster"><img class="imaginedragons" src="images/imaginedragons.png" onmouseover="this.src='images/    imaginedragonshover.png'" onmouseout="this.src='images/imaginedragons.png'" alt="Imagine Dragons - Night Visions Poster" width="296" height="168"/>
</div>

<div id="latestvideos">
    <div align="center"><h1>latest videos</h1></div>
</div>

我在上面的代码中还遇到了另一个问题，由于某种原因，下图中的整个蓝色部分都链接到它，而不仅仅是链接到带有 Imagine Dragons 海报的我的 RedBubble 页面的 Imagine Dragons 按钮.

http://puu.sh/5D4EE.png

如果有人可以帮助我解决这些问题，我将非常感激，因为我似乎无法理解为什么。

谢谢

Answer 1

图像之间的单个空格字符被赋予超链接下划线。

您可以通过删除 html 中图像之间的空格、关闭链接标记或使用

设置链接样式来摆脱这种情况

text-decoration: none

我怀疑您不希望一个链接继续通过，这将我们带到...

您的链接似乎缺少结束 anchor 标记 (</a>)

链接(又名 anchor )应该采用这种格式......

<a href="..." ...> {Thing that is clickable} </a>

尝试...

<div id="projects">
    <a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8">
        <img class="ritgk"
             src="images/ritgk.png"
             onmouseover="this.src='images/ritgkhover.png'"
             onmouseout="this.src='images/ritgk.png'"
             alt="RITGK iOS App"
             width="296"
             height="168"/>
    </a>

    <a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster">
        <img class="imaginedragons"
             src="images/imaginedragons.png"
             onmouseover="this.src='images/imaginedragonshover.png'"
             onmouseout="this.src='images/imaginedragons.png'"
             alt="Imagine Dragons - Night Visions Poster"
             width="296"
             height="168"/>
    </a>
</div>

虽然获得完全符合 W3C 标准的 html 可能会因浏览器不兼容而耗费时间，但通过 W3C validator 运行您的页面总是有用的这将发现几乎所有的语法错误。