麻烦老师帮忙检查一下啊谢谢

来源: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回答

好帮手慕言

2019-08-10

同学你好,顶部导航第一项的背景颜色默认是垂直铺满的。

http://img.mukewang.com/climg/5d4e5ccf0001b8f407600155.jpg

建议:可以定义一个类名,样式为padding-bottom: 5px; 给第一个导航项加上类名

代码参考:

http://img.mukewang.com/climg/5d4e5cfe0001f2ca03610101.jpg

http://img.mukewang.com/climg/5d4e5d1400014dee06680256.jpg

祝学习愉快~

0

0 学习 · 40143 问题

查看课程