请老师检查，请问还有哪里可以优化

来源：2-8 项目作业

Cynthia4660559

2022-03-09 00:54:40

<!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>
* {
padding: o;
margin: 0;
}
.center-wrap {
width: 1000px;
margin: 50px auto;
position: relative;
}
.title {
float: left;
font-size: 19px;
}
.nav-r {
float: right;
height: 36px;
}
.list {
list-style: none;
float: left;
}
.list li {
float: left;
margin-right: 50px;
margin-top: 7px;
cursor: pointer;
}
.list li.current {
color: #f01400;
}
.btn {
float: right;
background-color: black;
color: white;
height: 36px;
width: 100px;
font-size: 15px;
border-style: none;
cursor: pointer;
}
.dash {
background-color: #f01400;
width: 37px;
height: 3px;
position: absolute;
top:36px;
left:488px
}
</style>
</head>
<body>
<div class = 'center-wrap'>
<p class="title">慕课手机</p>
<div class = 'nav-r'>
<ul class = 'list' id = 'list'>
<li data-n = '1' class ='current'>首页</li>
<li data-n = '2'>外观</li>
<li data-n = '3'>配置</li>
<li data-n = '4'>型号</li>
<li data-n = '5'>说明</li>
</ul>
<button class = 'btn' id = 'btn'>立即购买</button>
</div>
<div class = 'dash' id="dash"></div>
</div>
<script>
var list = document.getElementById('list');
var btn = document.getElementById('btn');
var dash = document.getElementById('dash');
var lis = list.getElementsByTagName('li');
list.onmouseover = function (e) {
if (e.target.tagName.toLowerCase() == 'li') {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
var n = e.target.getAttribute('data-n');
dash.style.transition = 'left 0.3s ease 0s'
dash.style.left = 488+(n-1)*82+'px';
var currentlis = document.querySelector('li[data-n="'+n+'"]');
currentlis.className = 'current';
}
}
</script>
</body>
</html>

写回答

1回答