摘要：<html> <head> <meta charset="utf-8"> <title>jquery动画导航</title> <link rel=&q
<html>
<head>
<meta charset="utf-8">
<title>jquery动画导航</title>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav li").stop().animate({'marginLeft':'-65px'},1000);
$("li").hover(function(){
$(this).stop().animate({'marginLeft':'-2px'},500);
},function(){
$(this).stop().animate({'marginLeft':'-65px'},500);
})
})
</script>
</head>
<body>
<ul id="nav">
<li class="li1"><span class="fa fa-mobile"></span></li>
<li class="li2"><span class="fa fa-user-circle"></span></li>
<li class="li3"><span class="fa fa-address-card-o"></span></li>
<li class="li4"><span class="fa fa-snowflake-o"></span></li>
<li class="li5"><span class="fa fa-podcast"></span></li>
<li class="li6"><span class="fa fa-image"></span></li>
</ul>
</body>
</html>*{margin: 0px ; padding: 0px}
ul{ list-style: none;}
ul li{ text-align:center;width: 80px; height: 80px; margin: 15px 0 0 0; border:0px solid #ccc; line-height: 80px; border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
.li1{background: rgba(255,152,60,0.5)}
.li2{background: rgba(59,75,255,0.5)}
.li3{background: rgba(26,245,175,0.5)}
.li4{background: rgba(232,33,185,0.5)}
.li5{background: rgba(229,245,100,0.5)}
.li6{background: rgba(240,147,15,0.5)}
span{font-weight: 900;font-size: 100px;color: #fff;}奇怪，为什么font awesome 通过font-size 跟 font-weight 调整不大呢？
批改老师：查无此人批改时间：2019-04-26 13:29:02
老师总结：又看到你了，最近学的挺多呀。值调大一些，效果才会显示出来。继续加油。
