老师我不太懂那个active?,前面写一个active,后面就可以了,不太理解nav那块部分?

老师我不太懂那个active?,前面写一个active,后面就可以了,不太理解nav那块部分?

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{
    padding: 0;
    margin: 0;
    color: white;
   }
   a{
    text-decoration:none;
   }
   header{
    height:80px;
    background: black;
   }
    header >.container{
    width: 1200px;
    margin: 0 auto;
    
   }
    header >.container > a{
     display: block;
     float: left;
     margin:20px 25px;
     height: 40px;
     font-size: 25px;
     }
   header >.container > a > img{
    height: 40px;
    width: 40px;
    margin-right: 10px;
    
   }
   
   header >.container > nav{
    float: right;
    line-height: 80px;
    height: 80px;
    margin-right: 50px;
   } 
   header >.container > nav >a{
     font-size: 24px;
     display: block;
     float: left;
     width: 110px;
     height:73px;
     text-align: center;
    }
   nav > a.Home{background:red ;}
   .Course{background:#ffcc00;}
   .Actual{background:green;}
   .Plan{background:#0000ff;}
   .FAQ{background:orange;}
   .Notes{background: #70db93;}

下面这个不太懂, activ不是只代表第一个吗?类名
   nav > a:hover,nav > a .active{
     padding-bottom: 7px;
     }
  </style>
 </head>
 <body>
  <header>
   <div class="container">
  
    <a href="#"><img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png" />MYMOOC</a>
    <!-- <span></span> -->
 
    <nav>
     <a href="#" class="Home active">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>
 </body>
</html>

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2020-02-12 18:59:11

同学你好,只有第一个设置了padding-bottom属性,其他的是在hover属性的时候(鼠标移入),添加的这个属性。

添加上这个属性,背景颜色就会包含这一块,不添加,下面的就是缺的,因为总的高度没有顶部导航条高,所以下面背景颜色会缺一点。若是添加下,占据的总高度就改变了,且背景颜色是包含内边距的,所以背景颜色在垂直方向上会覆盖顶部导航条的背景。

若是还是有哪里不理解,可以详细的描述下哦。

祝学习愉快~

好帮手慕糖 2020-02-12 16:36:12

同学你好,active是一个类,这个类是为了设置第一个元素默认是鼠标移入的状态(就是有padding-bottom这个属性),效果如下:

http://img1.sycdn.imooc.com//climg/5e43b8640949f76f03990141.jpg

但是同学的这个没有效果,是因为.active是a元素的类,不是它的子元素,不需要空格,例:

http://img1.sycdn.imooc.com//climg/5e43b7bb094ef02707460377.jpg

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

  • 提问者 前后1 #1
    后面的A也有显示,可是《nav》下面的》<a>只有一个有呀,为什么active下面的效果也有??,不太理解呀
    2020-02-12 17:02:07
  • 提问者 前后1 #2
    老师我不太懂?
    2020-02-12 18:21:57
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师