html - 链接不起作用(仅限初学者 html css)

Question

我浏览了一些我认为与我的相似的问题，但事实证明，即使是初学者的问题对我来说也是高级的!

出于某种原因，我在页眉和页脚中的链接有效，但在侧边栏或主体中无效，有人可以向我解释为什么以及如何修复它吗？我打开了没有 css 的 html，然后它工作正常，但我不知道我的 css 如何使链接无效:S

代码在这里:http://codepen.io/anon/pen/gppbmP

我“非常”确定它的 css 把事情搞砸了所以我把它粘贴在那里，但是 codepen 也有 html :)

(我知道这是 super 基础的，但这是我的第一次尝试，每个人都必须从某个地方开始!:))

    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

更新

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

原始答案

您的 href= 开头似乎缺少 http://:

<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 和图像等媒体不需要使用完整的 url 进行引用。你可以只使用:

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

(而不是)

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

与链接类似，您可以通过以下方式引用您网站上的其他页面:

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