请老师检查

来源：2-8 项目作业

慕UI4313976

2021-08-04 14:09:09

<!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;
        }
        .center-wrap{
            width: 1200px;
            height: 100px;
            margin: 0 auto;
        }
        .current{
            color:#f01400;
        }
        header{
            width: 100%;
            height: 100px;
            background-color: rgb(119, 233, 138);
        }
        header .logo{
            width: 100px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            float: left;
            background-color: #fff;
            margin-top: 20px;
        }
        header nav{
            width: 770px;
            height: 60px;
            background-color: rgb(240, 174, 174);
            float: right;
            margin-top: 20px;
            position: relative;
        }
        header nav ul li{
            list-style: none;
            float: left;
            width: 120px;
            height: 40px;
            background: rgb(179, 223, 99);
            margin-right: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        header nav .current-line{
            width: 120px;
            height: 2px;
            background-color: #f01400;
            margin-top: 60px;
            position: absolute;
            left:0;
            transition: all .5s ease 0s;            
        }
        header nav .btn{
            width: 120px;
            height: 40px;
            margin-top: 10px;
            background-color: #000;
            color:white;
            border-radius: 10px;
            border: none;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <header>
        <div class="center-wrap">
            <div class="logo">慕课手机</div>
            <nav>
                <ul id="nav-ul">
                    <li class="current">首页</li>
                    <li>外观</li>
                    <li>配置</li>
                    <li>型号</li>
                    <li>说明</li>
                </ul>
                <div class="current-line" id="current-line"></div>
                <button class="btn">立即购买</button>
            </nav>
        </div>
    </header>

    <script>
        var navUl = document.getElementById('nav-ul');
        var navUlLis = navUl.getElementsByTagName('li');
        var currentLine = document.getElementById('current-line');

        for(var i = 0; i < navUlLis.length; i++){
            navUlLis[i].setAttribute('data-n',i)
        }

        navUl.onmouseover = function(e){
            if(e.target.tagName.toLowerCase() == 'li'){
                for(var i = 0; i < navUlLis.length; i++){
                    navUlLis[i].className = '';
                }
                e.target.className = 'current';
                var len = e.target.getAttribute('data-n');
                currentLine.style.left = 120 * len + 10 * len + 'px';
            }
        }

        navUl.onmouseout = function(e){
            if(e.target.tagName.toLowerCase() == 'li'){
                for(var i = 0; i < navUlLis.length; i++){
                    e.target.className = '';
                }
            }
        }
    </script>
</body>
</html>