麻烦老师帮忙检查一下啊谢谢
来源:2-2 编程练习
佛系程序喵
2019-08-10 11:26:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
*{
margin:0;
padding: 0;
font-family: Arial;
color:white;
}
ul{list-style: none;}
a{text-decoration: none;
color: white;}
header{
width: 100%;
height: 80px;
background: black;
}
header .rongqi{
width: 1200px;
height: 80px;
margin: 0 auto;
}
header .rongqi > a{
line-height: 80px;
display: block;
float: left;
margin: 10px 5px;
font-size: 25px;
}
header nav{
float: right;
}
header nav a{
display: block;
float: left;
width:50px ;
height: 75px;
line-height: 75px;
padding: 0 20px;
text-align: center;
}
.Home{background: red;}
.Course{background: yellow;}
.Actual{background: green;}
.Plan{background: purple;}
.FAQ{background: orangered;}
.Notes{background: blue;}
header nav > a:hover{
padding-bottom: 5px;
}
</style>
</head>
<body>
<header>
<div class="rongqi">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png">
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="Notes">Notes</a>
</nav>
</div>
</header>
<!-- 在此完成网页的HTML代码-->
</body>
</html>
1回答
同学你好,顶部导航第一项的背景颜色默认是垂直铺满的。
建议:可以定义一个类名,样式为padding-bottom: 5px; 给第一个导航项加上类名
代码参考:
祝学习愉快~
相似问题