老师,我的导航栏背景颜色怎么显示不出来

来源:2-2 编程练习

李李明明

2020-04-10 17:04:17

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>IMOOC</title>
   <style>
       *{
           padding: 0;
           margin: 0;

       }
       a{
           text-decoration: none;
       }
       header{
           height: 50px;
           background-color: black;
           overflow: hidden;
       }
       header >.container{
           width: 1000px;
           margin: 0 auto;
           overflow: hidden;
       }
       header >.container >a{
           height: 40px;
           width: 40px;
           display: block;
           float: left;
           margin: 5px 25px;
       }
       header >.container >span{
           color: white;
           line-height: 50px;
           height: 50px;
           padding-left: 5px;

       }
  /*     header.container nav{
           overflow: hidden;
       }*/


       header .container nav {
           float: right;
           display: block;
           height: 50px;
           line-height: 50px;

       }
       header .container nav a{
           color: white;
           padding:20px ;
       }
       header .container nav a .Home{background:#433b90;}
       header .container nav a .Course{background:#017fcb;}
       header .container nav a .Actual{background:#78b917;}
       header .container nav a .Plan{background:#feb800;}
       header .container nav a .FAQ{background:#f27c01;}
       header .container nav a .Notes{background:#d40;}
       header .container nav :hover,:active{
           padding-bottom: 2px;
       }

   </style>
</head>
<body>
<!--  在此完成网页的HTML代码-->
<header>
   <div class="container">
       <a><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"></a>
       <span>MYMOOC</span>
       <nav>
           <a class="Home" href="#">Home</a>
           <a class="Course" href="#">Course</a>
           <a class="Actual" href="#">Actual</a>
           <a class="Plan" href="#">Plan</a>
           <a class="FAQ" href="#">FAQ</a>
           <a class="Notes" href="#">Notes</a>
       </nav>
   </div>
</header>
</body>
</html>

写回答

1回答

好帮手慕言

2020-04-10

同学你好,背景颜色没有显示,是因为a后面多了一个空格,去掉空格即可,如下:

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

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 40143 问题

查看课程