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

我怀疑你不希望一条链接继续穿过，这会把我们带到......

您似乎错过了链接（</a>）

中的结束锚标记

链接（也称为锚点）应采用此格式......

<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运行您的页面总是有用的，这会发现几乎所有的语法错误。

超链接似乎已泄露出图像

1 个答案: