Question

我正在尝试建立自己的网站。我是html / css的新手，并且已经解决了一段时间。每当我尝试创建可点击的文本时，它都不会起作用。我希望它可以单击以打开另一个html文件，但是它根本不起作用，有什么建议吗？

好吧，只有在CSS未链接到主要html时，选项卡才起作用并导致另一个html文件，我不知道为什么会这样。

.Home {
  position: relative;
  font-family: 'open sans', sans-serif;
  color: black;
  top: -140px;
  padding-left: 800px;
  font-size: 15px;
  text-decoration: none;
}

.Projects {
  position: relative;
  font-family: 'open sans', sans-serif;
  color: black;
  top: -160px;
  padding-left: 900px;
  font-size: 15px;
  text-decoration: none;
}

.About {
  position: relative;
  font-family: 'open sans', sans-serif;
  color: black;
  top: -180px;
  padding-left: 1025px;
  font-size: 15px;
  text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Portfolio</title>
  <link rel="stylesheet" href="Home_css.css" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="Home"> <a href="Home.html"><b>HOME</b></a></div>
  <div class="Projects"><a href="Projects.html"><b>PROJECTS</b></a></div>
  <div class="About"><a href="About.html"><b>ABOUT</b></a></div>

</body>

</html>

我期望这些选项卡可单击并导致另一个html文件，但是它们都没有响应，这可能是我在CSS中做错了吗？

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Portfolio</title>
    <link rel="stylesheet" href="Home_css.css" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div class="Home"> <a href="Home.html" target="_blank"><b>HOME</b></a></div>
    <div class="Projects"><a href="Projects.html" target="_blank"><b>PROJECTS</b></a></div>
    <div class="About"><a href="About.html target="_blank""><b>ABOUT</b></a></div>
  </body>
</html>

.Home a, .Home a:link {
      position: relative;
      font-family: 'open sans', sans-serif;
      color: black;
      font-size: 15px;
      text-decoration: none;
    }
    .Projects a, .Projects a:link {
      position: relative;
      font-family: 'open sans', sans-serif;
      color: black;
      font-size: 15px;
      text-decoration: none;
    }
    .About a, .About a:link {
      position: relative;
      font-family: 'open sans', sans-serif;
      color: black;
      font-size: 15px;
      text-decoration: none;
    }

请检查链接 Check here

Answer 2

很可能您在链接上方还有另一个元素。右键单击错误的链接，然后选择“检查元素”。这将打开浏览器的开发工具栏，并右键单击元素。

所选元素将是锚点，或者它将是另一个元素。如果不是锚点，则意味着是位于锚点上方的元素阻止了点击。

Answer 3

由于top:-140px和负值的值，我们看不到div元素

还将padding的值设置为较低，因此无需滚动页面

如何解决此<a href>问题？

3 个答案: