老师，麻烦优化一下
来源：2-8 项目作业
派大星爱学习
2023-02-16 18:34:01
<!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>项目作业</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
a {
list-style: none;
text-decoration: none;
}
.centwarp {
width: 1200px;
height: 80px;
margin: 0 auto;
}
.centwarp h1 {
color: black;
font-weight: 400;
line-height: 80px;
float: left;
}
.centwarp .nav_rt {
float: right;
width: 500px;
height: 80px;
position: relative;
}
.centwarp .nav_rt .carousel_list {
float: left;
/* z-index: 9999; */
}
.centwarp .nav_rt .carousel_list li {
float: left;
/* padding: 0 20px; */
margin-right: 42px;
line-height: 80px;
font-size: 20px;
font-weight: 350;
cursor: pointer;
}
.centwarp .nav_rt .carousel_list li a {
color: black;
}
.centwarp .nav_rt .carousel_list li a:hover {
color: red;
}
.centwarp .nav_rt .btn_bn {
float: right;
width: 90px;
height: 34px;
background-color: black;
color: white;
margin-top: 20px;
border: none;
border-radius: 3px;
}
.centwarp .nav_rt .box_bx {
width: 38px;
height: 3px;
background-color: red;
position: absolute;
bottom: 16px;
left: 82px;
transition: all .5s ease 0s;
}
</style>
</head>
<body>
<header>
<div class="centwarp">
<h1>慕课手机</h1>
<nav class="nav_rt">
<ul id="carousel_list" class="carousel_list">
<li><a data-n="0" href="javascript:;">首页</a></li>
<li><a data-n="1" href="javascript:;">外观</a></li>
<li><a data-n="2" href="javascript:;">配置</a></li>
<li><a data-n="3" href="javascript:;">型号</a></li>
<li><a data-n="4" href="javascript:;">说明</a></li>
</ul>
<button id="btn_bn" class="btn_bn">立即购买</button>
<div id="box_bx" class="box_bx"></div>
</nav>
</div>
</header>
<script>
(function () {
var carousel_list = document.getElementById('carousel_list');
var box_bx = document.getElementById('box_bx');
var idx = 0;
carousel_list.onmouseover = function (e) {
if (e.target.tagName.toLowerCase() == 'a') {
var n = e.target.getAttribute('data-n');
idx = n;
box_bx.style.left = 82 * idx + 'px';
}
}
})();
</script>
</body>
</html>
1回答
-
好帮手慕久久
2023-02-17
同学你好，代码是对的，不需要做大的优化，把下划线的初始位置设置到最左侧就行了：
祝学习愉快！
0
相似问题