老师帮忙检查一下
来源：2-2 编程练习
慕娘6107863
2019-12-19 14:52:28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
color: #FFFFFF;
text-decoration: none;
}
header{
height: 80px;
background: #000000;
}
header> .content{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
header> .content >a{
display: block;
float: left;
margin: 20px 25px;
font-size: 30px;
}
header> .content>nav{
float: right;
overflow: hidden;
}
header> .content>nav>a{
line-height: 73px;
display: block;
float: left;
width: 73px;
text-align: center;
font-size: 18px;
}
header > .content > nav > a.Home{
background-color: red;
}
header > .content > nav > a.Course{
background-color: yellow;
}
header > .content > nav > a.Actual{
background-color:green;
}
header > .content > nav > a.Plan{
background-color: blueviolet;
}
header > .content > nav > a.FAQ{
background-color: orange;
}
header > .content > nav > a.Nontes{
background-color: blue;
}
header > .content > nav > a.Home:hover,
header > .content > nav > a.active {
padding-bottom: 7px;
}
</style>
<body>
<header>
<div class="content">
<a href="#"><img src="images/00040.png"alt="logo" /> MYMOOC</a>
<nav>
<a href="#" class="Home">Home</a>
<a href="#"class="Course">Course</a>
<a href="#"class="Actual">Actual</a>
<a href="#"class="Plan">Plan</a>
<a href="#"class="FAQ">FAQ</a>
<a href="#" class="Nontes">Nontes</a>
</nav>
</div>
</header>
</body>
</html>
1回答
-
好帮手慕夭夭
2019-12-19
同学你好，当鼠标移入导航时（第一个除外），没有设置下填充。
如下修改：
把home类名去掉，选择所有的导航
另外，练习题中提供了在线图片。建议后练习的时候如果提供了素材，使用素材中的。不然使用本地图片老师这边看不到效果哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题