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