摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下划线跟随导航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
*{ margin:0px; padding:0px;}
.main{
height: 70px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-color: #CCC;
}
ul li{
list-style-type: none;
float: left;
margin-left: 25px;
margin-top:20px;
}
.xhx{
width: 65px;
height: 6px;
z-index: 10;
position: relative;
background-color: #2087ed;
top: 60px;
margin-left:65px;
}
#indexxhx{
width: 45px;
height: 6px;
z-index: 10;
position: relative;
background-color: #2087ed;
top: 65px;
}
</style>
<script>
$(function(){
$('li').hover(function(){
var x=parseInt($(this).attr('name'))*85
$('.xhx').stop().animate({left:x+'px'},200)
$(this).css("color","#2087ed")
},
function(){
$('.xhx').stop().animate({left:'0px'},200)
$(this).css("color",'black')
}
)
})
</script>
</head>
<body>
<div class="header">
<div class="main">
<ul>
<li style="margin-left:10px;">首页</li>
<li name='0'>域名注册</li>
<li name='1'>域名交易</li>
<li name='2'>虚拟主机</li>
<li name='3'>云服务器</li>
<li name='4'>企业邮箱</li>
<li name='5'>PVS主机</li>
<li name='6'>安全</li>
<li name='7'>主机租用</li>
<li name='8'>云建站</li>
<li name='9'>渠道合作</li>
</ul>
<div id="indexxhx"></div>
<div class="xhx">
</div>
</div>
</div>
</body>
</html><!--总结
z-index：元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序
parseInt()
hover()
animate()
stop()
-->
批改老师：查无此人批改时间：2019-01-14 09:44:43
老师总结：写的还可以。 parseInt() hover() animate() stop() 这些怎么没说作用？代码要缩进。继续加油
