我浏览了一些我认为与我的相似的问题,但事实证明,即使是初学者的问题对我来说也是高级的!
出于某种原因,我在页眉和页脚中的链接有效,但在侧边栏或主体中无效,有人可以向我解释为什么以及如何修复它吗? 我打开了没有 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
最佳答案
更新
如果您不确定如何设置 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>
关于html - 链接不起作用(仅限初学者 html css),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29947263/