abstract：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/jQuery/jQuery-3.3.1.js"></script>
<script>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*150
$('.box').stop().animate({left:$x+'px'},100)
},
function(){
$('.box').stop().animate({left:'0px'},100)
}
)
})
</script>
<style>
*{padding:0;margin:0;}
a{text-decoration: none;}
ul{list-style: none;position:relative;font-size: 15px;}
li{float:left;cursor:crosshair;width:150px;height: 30px;text-align:center;line-height:30px;color: #fff;font-weight: bold;}
.nav{width:500px;position:relative;margin:20px auto;height:32px;box-shadow: 5px 10px 15px rgb(149, 231, 146);background:pink;border-radius:5px }
.box{width:100px;height:2px;background:red;position:absolute;top:30px;border-radius: 2px;}
</style>
</head>
<body>
<div>
<ul>
<li name="0"><a href="#">首页</a></li>
<li name="1"><a href="#">产品</a></li>
<li name="2"><a href="#">关于我们</a><ll/li>
<li name="3"><a href="#">联系我们</a></li>
</ul>
<div></div>
</div>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-01-16 14:17:15
Teacher's summary：你这是没写完吗？等会自己运行一下自己的代码 下划线跟随导航的效果没有哦
