我猜由于某种原因HTML和CSS文件没有链接。这是一个简单却令人沮丧的问题。我检查了拼写、文件夹等。css文件也出现在谷歌浏览器的检查元素部分的源选项卡。
HTML代码:
<!doctype html>
<html lang="en">
<head>
<title>Home Page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>CMP- Climate Monitoring People</h1>
<div class="Menu">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Chapters</a>
<a href="#">Contact Us</a>
</div>
</body>
</html>
CSS代码:
.nav {
background: #fff;
margin-left: -38px;
overflow: hidden;
}
.nav a{
padding: 14px 16px;
text-decoration: none;
text-align: center;
color: #000;
font-size: 1.7em;
display: block;
float: left;
}
.nav a:hover{
background: #ddd;
color: blue;
}
Thanks in advance:)
这个问题来自于你在CSS中的目标类。它目前不存在于你的HTML中。只要把class="Menu"改成class="nav"就行了。
.nav {
background: #fff;
margin-left: -16px;
overflow: hidden;
}
.nav a{
padding: 14px 16px;
text-decoration: none;
text-align: center;
color: #000;
font-size: 1.7em;
display: block;
float: left;
}
.nav a:hover{
background: #ddd;
color: blue;
}<!doctype html>
<html lang="en">
<head>
<title>Home Page</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>CMP- Climate Monitoring People</h1>
<div class="nav">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Chapters</a>
<a href="#">Contact Us</a>
</div>
</body>
</html>在您的css文件中，您正试图使用名称nav的类选择器，该选择器不存在，因为您已声明类名称为菜单。所以你的代码应该如下所示:
.Menu {
background: #fff;
margin-left: -38px;
overflow: hidden;
}
.Menu a{
padding: 14px 16px;
text-decoration: none;
text-align: center;
color: #000;
font-size: 1.7em;
display: block;
float: left;
}
.Menu a:hover{
background: #ddd;
color: blue;
}