Question

我已经看过一些我认为与我的相似的问题，但事实证明，即使是初学者的问题对我来说也是先进的！

出于某种原因，我在页眉和页脚中的链接工作，但不是在侧栏或主体，有人可以请向我解释为什么以及如何解决它？我已经打开了没有css的html并且它工作正常，但我不知道我的CSS会如何使链接无效：S

我＆＃34;漂亮＆＃34;确定它的css是搞砸了所以我把它粘贴在那里，但是codepen也有html：）

（我知道这是超级基础，但这是我的第一次尝试，每个人都必须从某个地方开始！:)）

    body {
  font-family: "Helvetica";
  background: #DCDCDC;
}

header a {
  font-size: 12px;
  color: black;
  text-decoration: none;
}
.side a {
  font-size: 12px;
  color: gray;
  text-decoration: none;
}
.product a {
  font-size: 12px;
  color: gray;
  text-decoration: none;
  text-align: center;
}
  .product p {
    font-size: 12px;
  color: gray;
    text-align: center;
  } 
footer a {
  font-size: 12px;
  color: gray;
  text-decoration: none;
}
body a:hover {
  color: #FF0066;
}

.nav1 {
  float: left;
  position: relative;
  top: 15px;
  left:20px;
}

.nav2 {
  position: absolute;
  top: 47px;
  right: 70px;
  float: right;
}

h1 {
  font-family: 'Satisfy', cursive;
  font-size: 48px;
  position: relative;
  left: 420px;
}

header {
  background-image: url("http://www.hugohd.com/wp-content/uploads/Pink-Beach-Sunset-Wallpaper-Android-Wallpaper-hugohd.com_.jpeg");
  margin: 30px;
}

.product {
  background: white;
  position: relative;
  float: right;
  left: -32px;
  height: 350px;
  padding: 30px;
}

.product img {
  height: 200px;
  width: 150px;
  margin: 5px;
}

.side {
  margin: 30px;
  float: left;
  background-color: white;
  height: 800px;
  width: 200px;
  padding: 10px;
  position: relative;
  top: -29px;
  text-align: center;
}

.side ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer ul li {
  display: inline;
  padding: 80px;
}

footer {
  position: relative;
  bottom: -40px;
  right: 100px;
}

提前致谢！ X

编辑：谢谢大家的帮助！它现在有效:) x

Answer 1

<强>更新

如果您不确定如何设置锚标签（有些似乎是错误的），下面的内容可能会有用，但请参阅上面的Tasos K解决方案（选民也会查看他的解决方案）。

原始答案

您http://：

的开头似乎缺少href=

<a href="http://www.google.com">google</a>

^^这是正确的做法，但有时你有：

<a href="www.google.com">google</a>

当您遗漏http://时，浏览器会认为该链接与其尝试显示的html页面相关。如果您查看这些链接尝试占用的位置，它们将类似于http://www.example.com/www.google.com。

这实际上是一个方便使用的东西，因为它意味着您网站上的javascript，css和图像等媒体不需要使用完整的网址引用。你可以使用：

<img src="/images/background.png">

（而不是）

<img src="http://www.example.com/images/example.png">

与链接类似，您可以使用

引用网站上的其他网页

<a href="/myOtherPage.html">Page 2</a>

Answer 2

您正在使用trigger定位<footer>并将其放在侧边菜单上。如果添加背景颜色，您可以清楚地看到它：

position:relative;

您可以在演示中看到它here。根据您的要求，解决此问题的解决方案可能会有所不同。

要解决当前布局的问题，只需将footer { background-color:#DEDEDE; }属性设置为值，例如1.请参阅demo此处

z-index

我的建议是重新考虑您的布局，以避免将来出现类似问题。

Answer 3

将此文件添加到您的CSS文件将使链接可以点击

Process

使用功能性产品链接here进行演示。

链接不起作用（仅限初学者html css）

3 个答案: