切换导航条作业

登录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>切换导航栏</title>
</head>
<style>

  *{ padding: 0; margin: 0; font-family: "微软雅黑"; list-style: none; text-decoration: none;}

  .nav{ width: 100%; height: 50px; background: #555; margin-top: 100px; }

  .nav ul{ width: 1000px; height: 50px; margin: 0 auto; overflow: hidden;}

  .nav li{ float: left; }

  .nav li a{ position: relative; top:0px; text-align: center;}

  .nav li a,.nav li i,.nav li b{ display: block;}

  .nav i,.nav b{ color:azure; padding: 0 30px; line-height: 50px;}

  .nav i{ font-style: normal}

  .nav b{ font-weight: 300; background: #555;}

  /*.nav li:hover a{ top:-40px;}*/

</style>

<script src="../js/jquery-1.11.3.min.js"></script>

<script>

  $(function(){

$(".nav li").hover(function(){

$(this).find("a").stop().animate({top:-40},300)

},function(){

$(this).find("a").stop().animate({top:0},300)

})

  })

</script>

<body>

<div class="nav">

  <ul>

<li><a href="#">

   <i>你好</i>
   <b>Hello</b>

</a></li>

<li><a href="#">

   <i>欢迎你</i>
   <b>Welcome to you</b>

</a></li>

<li><a href="#">

   <i>来到这里</i>
   <b>Come here</b>

</a></li>

<li><a href="#">

   <i>准备好了吗</i>
   <b>Are you ready</b>

</a></li>

   </ul>

</div>

</body>
</html>

[作业] 切换导航条作业

本帖子中包含更多资源

共0个回复最后回复于 2018-9-5 20:52

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 切换导航条作业

本帖子中包含更多资源

共0个回复 最后回复于 2018-9-5 20:52

共0个回复最后回复于 2018-9-5 20:52