图像没有超链接

-1

目前我的社交媒体页面图标没有超链接，我不知道为什么。我有它由href包围，由于某种原因，它不工作。有人可以帮我吗？图像没有超链接

HTML代码：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <title></title> 
 
\t <style type="text/css"> 
 
\t html{ 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t top: 0; 
 
\t left:0; 
 
\t overflow: hidden; 
 
\t } 
 
\t .background{ 
 
\t position: fixed; 
 
\t z-index: -1000; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow: hidden; 
 
\t top: 0; 
 
\t left: 0; 
 
\t } 
 
\t #background-video{ 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t min-height: 100%; 
 
\t min-width: 100%; 
 
\t } 
 
\t .content{ 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t min-height: 100%; 
 
\t z-index: 1000; 
 
\t } 
 
\t .content h1{ 
 
\t font-family:Comic Sans MS, sans-serif; 
 
\t text-align: center; 
 
\t font-size: 200px; 
 
\t text-transform: uppercase; 
 
\t font-weight: 700; 
 
\t color: #ffffff; 
 
\t margin-bottom: 1px; 
 
\t } 
 
\t .content h3{ 
 
\t text-align: center; 
 
\t font-size: 24px; 
 
\t letter-spacing: 3px; 
 
\t color: #ffffff; 
 
\t margin-bottom: 1px; 
 
\t } 
 
\t img { 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
\t } 
 
\t .social-media-icons{ 
 
\t z-index: 1000; 
 
\t text-align: center; 
 
\t display: block; 
 
\t padding-top: 35%; 
 
\t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div id="background" class="background"> 
 
\t \t <video id="background-video"autoplay muted loop> 
 
\t \t \t <source src="background.mp4" type="video/mp4"> 
 
\t \t </video> 
 
\t </div> 
 
\t <div class="content"> 
 
\t <h1>A-T</h1> 
 
\t <h3>ONLINE PORTFOLIO DESIGNED BY </h3> 
 
\t </div> 
 
\t <div class="social-media-icons"> 
 
\t \t <a target="_blank" href=""><img class="facebook" src="facebook.png" alt="Facebook" width="40px" height="40px"></a> 
 
\t \t <a target="_blank" href=""><img class="twitter" src="twitter.png" alt="Twitter" width="40px" height="40px"></a> 
 
\t \t <a target="_blank" href=""><img class="LinkedIn" src="linkedin.png" alt="LinkedIn" width="40px" height="40px"></a> 
 
\t \t <a target="_blank" href=""><img src="googleplus.png" alt="Google Plus" width="40px" height="40px"></a> 
 
\t \t <a href=""><img src="email.png" alt="Email" width="40px" height="40px"></a> \t 
 
\t </div> 
 
</body> 
 
</html>

上面的HTML代码与周围的社交媒体图标。这是因为z-index吗？这是我现在可以承担的唯一事情。

来源

2017-04-13 catung555555

您需要为每个标签添加一个目的地href。

<a target="_blank" href="https://www.facebook.com"><img class="facebook" src="facebook.png" alt="Facebook" width="40px" height="40px"></a>

来源

2017-04-13 19:01:54

我已经这样做了，至少对我来说还是不起作用。 – catung555555

我认为这是你在找什么：

你的内容高度设置为最小高度：100％;这导致内容div覆盖您的社交媒体div。

为了使它们可点击，您通过添加z-index来完成正确的操作，但是，如果没有定位，z-index将不起作用。如果你将位置设置为相对，他们会显示出想要的。而且你还需要在href标签中有一个目的地。

.social-media-icons{ 
    position:relative; 
    z-index: 1000; 
    text-align: center; 
    display: block; 
    padding-top: 35%; 
}

来源

2017-04-13 19:05:25 Benneb10

非常感谢！ – catung555555

图像没有超链接

回答

相关问题