论坛
标题:
切换导航条作业
[打印本页]
作者:
小白的自学生涯
时间:
2018-9-5 20:52
标题:
切换导航条作业
<!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>
欢迎光临 论坛 (http://bbs.qinxue.com/)
Powered by Discuz! X3.1