个人中心
gpt4 book ai didi

html - href 不适用于移动格式

转载 作者：行者123 更新时间：2023-11-28 00:46:15 24 4
gpt4 key购买 nike

我整天都在我的网站上工作，但现在我突然注意到在移动格式中我的按钮( Logo 和菜单按钮，它们被称为#logo 和#menu-icon)不再工作了。他们曾经工作过一段时间。在桌面(超过 768 像素宽)版本中，它们都可以正常工作。

/*--------STYLE.CSS--------*/
@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans:300,500,700');
* {
  margin: 0;
  padding: 0;
  border: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
  background: #424949;
  color: #f5f5f5;
  font-family: 'Alegreya Sans', sans-serif;
  margin: 0;
}
h2 {
  font-size: 250%;
  font-weight: 700;
  text-align: center;
  padding-top: 2%;
}
p {
  font-size: 160%;
  font-weight: 500;
  line-height: 150%;
  padding: 3%;
  text-indent: 2%;
  text-align: justify;
}
img {
  max-width: 100%;
  height: auto;
  width: auto;
  margin-bottom: -4px;
}
header {
  background-color: #1a1a1a;
  width: 100%;
  height: 86px;
}
#header-inner {
  max-width: 1200px;
  margin: 0 auto;
}
#logo {
  margin: -5px 0 -5px 20px;
  padding: 0 10px 0 10px;/*top right bottom left*/
  float: left;
  width: 96px;
  height: 96px;
  background: url(img/logohead96x.png) no-repeat center;   /*org img/logo128x.png*/
}
nav {
  float: right;
  padding: 4px 20px 0 0;
}
#menu-icon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: url(img/nav.png) center;
}
a:hover#menu-icon {
  border-radius: 4px 4px 0 0;
}
ul {
  list-style-type: none;
  margin-right: 10px;
}
nav ul li {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 150%;
  display: inline-block;
  float: left;
  margin-top: 35px;
}
nav ul li a {
  color:#f5f5f5;
  text-decoration: none;
  padding: 25px;
}
nav ul li a:hover {
  color: #707b7c;
}
.current {
  color: #707b7c;
}
.container {
  overflow: hidden;
  width: 100%;
  height: auto; /*calc(100% - 86px - 29px)*/
  background-color: #1a1a1a;
}
.container-inner {
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.container img {
  max-height: 100%;
  min-width: 100%;
  height: 100%;
}
.container video {
  max-height: 100%;
  min-width: 100%;
  height: 100%;
}
footer {
  background: #1a1a1a;
  width: 100%;
}
.social {
  list-style-type: none;
  text-align: center;
}
.social li {
  display: inline;
}
.social i {
  font-size: 460%;
  margin: 1%;
  padding: 5% 5% 5% 4%;
  color: #707b7c
}
.social i:hover {
  color: #f5f5f5;
}
footer.second {
  background-color: #424949;
  margin: 0;
}
footer.second p {
  margin: 4px 0 0 0; /*top right bottom left*/
  padding: 0 0 0 0;
  text-align: left;
  font-size: 130%;
  font-family: 'Alegreya Sans', sans-serif;
}


/*--------MEDIA--------*/
@media screen and (max-width: 768px) {
  h2 {
    font-size: 150%;
  }
  p {
    font-size: 120%;
  }
  header {
    position: absolute;
  }
  #logo {
    margin: -5px 5px -5px 5px;
    background: url(img/logohead64x.png) no-repeat center;
  }
  #menu-icon {
    display: inline-block;
  }
  nav {
    padding: 25px;
  }
  nav ul, nav:active ul {
    display: none;
    z-index: 1;
    position: absolute;
    padding: 20px;
    background: #1a1a1a;
    right: 20px;
    top: 60px;
    border: 3px solid #ffffff;
    border-radius: 10px 0 10px 10px;
    width: 40%;
  }
  nav:hover ul {
    display: block;
  }
  nav li {
    text-align: center;
    width: 100%;
    padding: 10px 0 10px 0;
  }
  .banner {
    padding-top: 86px;
  }
  .social i {
    font-size: 180%;
  }
}
<!-- Home page of slothy.cloud -->
<!DOCTYPE html>
<html>
<!--
	My small cozy website.
		© veryslothysloth 2018
-->
	<head>
		<!-- Links -->
		<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
		<link rel="manifest" href="site.webmanifest">
		<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#2e86c1">
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" href="css/font-awesome.min.css">

		<!-- Open Graph Protocol -->
		<meta property="og:url" content="://slothy.cloud" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="slothy.cloud | by veryslothysloth" />
		<meta property="og:description" content="A small slothy website." />
		<meta property="og:image" content="img/slothyicon.png" />
		<meta property="og:image:secure_url" content="img/slothyicon.png" />

		<!-- Twitter card -->
		<meta name="twitter:card" content="summary">
		<meta name="twitter:title" content="slothy.cloud |by veryslothysloth">
		<meta name="twitter:description" content="A small slothy website.">
		<meta name="twitter:image" content="img/slothyicon.png">
		<meta name="twitter:image:src" content="img/slothyicon.png">

		<!-- Data -->
		<title>slothy.cloud | by veryslothysloth</title>
		<meta charset="utf-8">
		<meta name="description" content="A small slothy website.">
		<meta name="keywords" content="sloth,slothy,veryslothysloth,file,upload,hosting,lolisafe">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta name="msapplication-TileColor" content="#2d89ef">
		<meta name="theme-color" content="#aed6f1">
	</head>

	<body>
		<header>
			<!-- Header -->
			<div id="header-inner">
				<a href="index.html" id="logo"></a>
				<nav>
					<a href="#" id="menu-icon"></a>
					<ul>
						<li><a href="index.html" class="current">Home</a></li>
						<li><a href="#">Cloud</a></li>
						<li><a href="#">Stat</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</div>
		</header>


		<!-- Main Body -->
		<div class="container">
			<video loop>
				<source src="img/alley.mp4" type="video/mp4">
			</video>
			<!--<div class="container-inner">
				<p>Test Text</p>
			</div>-->
		</div>


		<!-- Footer -->
		<footer>
			<ul class="social">
				<li><a href="https://twitter.com/veryslothysloth" target="_blank"><i class="fa fa-twitter"></i></a></li>
				<li><a href="https://www.instagram.com/veryslothysloth/" target="_blank"><i class="fa fa-instagram"></i></a></li>
				<li><a href="https://steamcommunity.com/id/veryslothysloth" target="_blank"><i class="fa fa-steam"></i></a></li>
				<li><a href="mailto:contact@slothy.cloud" target="_blank"><i class="fa fa-at"></i></a></li>
			</ul>
		</footer>

		<!-- Second Footer -->
		<footer class="second">
			<p>&copy; veryslothysloth</p>
		</footer>
	</body>
</html>

这可能是一个完全愚蠢的错误或小错别字，但我已经很累了，而且我自己的编码技能非常有限，似乎无法解决这个问题……我对这一切都很陌生。提前致谢!

最佳答案

div .container 位于导航和菜单图标之上。所以悬停不起作用。

在header中加一个z-index解决

header {
    z-index: 99;
}

关于html - href 不适用于移动格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50429551/

24 4 0
文章推荐： html - 固定引导内容
文章推荐： javascript - 使用一个指令从另一个隔离作用域复制作用域属性
文章推荐： c++ - 在介绍 C++ 中发出要写入的打开文件
文章推荐： javascript - 突出显示输入字段html中的单词
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com