2-8项目作业，麻烦老师帮忙检查一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
margin-top: 20px;
width: 1200px;
height: 50px;
margin: 0 auto;
padding-top: 20px;
}
.nav h1{
width:150px;
font-weight:lighter;
font-size: 30px;
float: left;
height: 50px;
line-height: 50px;
}
.nav .rigth-nav{
float: right;
width: 510px;
height: 50px;
position: relative;
}
.nav ul{
float: left;
width: 400px;
height: 50px;
}
.nav ul li{
width: 80px;
height: 50px;
float: left;
list-style: none;
line-height: 50px;
text-align: center;
}
.nav ul li.current{
color:#f01400 ;
}
.nav .nav-hr{
position: absolute;
left: 0;
bottom: 0;
width:80px;
height: 3px;
background-color: #f01400;
}
.nav .rigth-nav a{
float: right;
width: 110px;
height: 50px;
background-color: #000;
color: white;
text-decoration: none;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="nav">
<h1>慕课手机</h1>
<div class="rigth-nav">
<ul id="navList">
<li data-n="0" class="current">首页</li>
<li data-n="1">外观</li>
<li data-n="2">配置</li>
<li data-n="3">型号</li>
<li data-n="4">说明</li>
</ul>
<div class="nav-hr" id="navHr"></div>
<a href="javascript:;">立即购买</a>
</div>
</div>
<script>
//获取元素
var navList=document.getElementById("navList");
var navHr=document.getElementById("navHr");
var lis=document.querySelectorAll("#navList li");
//导航栏列表的每一项的鼠标进入事件委托给父元素ul
navList.onmouseover=function(e){
if(e.target.tagName.toLowerCase()=="li"){
//获取当前li的data-n属性值
var n=Number(e.target.getAttribute('data-n'));
//让下划线移动到当前列表项的下面
navHr.style.transition="left .5s ease 0s";
navHr.style.left=80*n+"px";
//排他先让所有的列表项的class为空
for(var i=0; i<lis.length; i++){
lis[i].className='';
}
//让当前的列表项拥有current类
e.target.className="current";
}
}
</script>
</body>
</html>
正在回答
同学你好，思路是没有问题的，下划线宽度太大，与题目略有偏差：
将ul外面的盒子宽度调小一点，修改参考如下：
将ul本身的宽度也调小一点
修改每个li的宽度，并给与间隔宽度
修改下划线的宽度与li宽度相等，并且给与定位：
修改js中下划线的滑动位置，由于margin-left:30px;所以起始位置需要从30开始；
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星