1
我刚刚开始使用HTML5和CSS3（通过Odin项目工作），第一个项目是复制Google主页。我能够完成所有设置，但似乎像我的CSS以某种方式阻止我的标题链接像链接一样行事。你不能点击它们，悬停效果不起作用。CSS防止链接的行为像链接
他们在我的页脚上正常工作，我的导航文本修饰已应用，所以我不确定是什么让它表现得像它不是链接。我只在Chrome中测试过，所以我甚至不担心兼容性问题。我在做HTML5错误吗？或者它是一种奇怪的规则，就像你不能使用悬停效果和内联块一样？我不熟悉不够与它尚未学会了所有这些细微之处还...
这里的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="atext">+Mara</a></li>
<li><a href="#" class="atext">Gmail</a></li>
<li><a href="#" class="atext">Images</a></li>
<li><a href="#" class="aicon"><img src="images/options.png" width="35px"></a></li>
<li><a href="#" class="aicon"><img src="images/bell.png" width="35px"></a></li>
<li><a href="#" class="aicon"><img src="images/plus.png" width="35px"></a></li>
<li><a href="#"><img src="images/photo.jpg" width="40px" class="rounded_img"></a></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li><a href="#">Advertising</a></li></span>
<span class="left"><li><a href="#">Business</a></li></span>
<span class="left"><li><a href="#">About</a></li></span>
<span class="right"><li><a href="#">Settings</a></li></span>
<span class="right"><li><a href="#">Terms</a></li></span>
<span class="right"><li><a href="#">Privacy</a></li></span>
</ul>
</footer>
</body>
</html>
而CSS：
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
任何帮助将大大赞赏。谢谢！
哦，我还没有开始使用JavaScript，所以我想避免使用JavaScript！
这里是一个小提琴：http://jsfiddle.net/Lvfmwhvu/
你可能有重叠的链接的元素。寻找一个大的负值。你的浏览器的检查员会帮忙。 – isherwood 2015-03-31 14:31:35