Question

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

HTML code：

＆＃13;

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

＆＃13;

上面的html代码包含围绕它的社交媒体图标。这是因为z-index？这是我现在唯一能够承担的事情。

Answer 1

我认为这就是你要找的东西：

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

为了使它们可点击，你通过添加z-index做了正确的事情，但是，当没有定位时，z-index将不起作用。如果您将位置设置为相对位置，它们将显示如何需要。而且你还需要href标签中的目的地。

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

Answer 2

您需要为每个标记在 href 中添加目的地。

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

图像没有超链接

2 个答案: