老师这样写可以吗？有哪里需要修改吗？

来源：2-8 项目作业

3颗猫饼干

2021-11-30 22:27:59

相关代码：

<!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;
            list-style: none;
            text-decoration: none;
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
            overflow: hidden;
        }

        .center-wrap {
            width: 1201px;
            margin: 0 auto;
        }

        .center-wrap .header {
            height: 100px;
            width: 100%;
        }

        .center-wrap .header h1 {
            float: left;
            width: 200px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

        .center-wrap .header .list {
            width: 800px;
            height: 100px;
            float: right;
            margin-left: 100px;
            position: relative;
        }

        .center-wrap .header .list ul {
            height: 100px;
            width: 800px;
        }

        .center-wrap .header .list ul>li {
            float: left;
            width: 40px;
            height: 30px;
            margin-right: 60px;
            margin-top: 35px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }
        .center-wrap .header .list ul .ljgm {
            width: 100px;
            height: 40px;
            line-height: 40px;
            background-color: black;
            color: #fff;
        }
        .center-wrap .header .list ul>li:last-child {
            margin-right: 0;
        }

        .center-wrap .header .list .line {
            width: 40px;
            height: 5px;
            background: #f01400;
            position: absolute;
            left: 0px;
            top: 65px;
            transition: left .5s ease 0s;
        }
    </style>
</head>

<body>
    <header>
        <div class="center-wrap">
            <div class="header">
                <h1>慕课手机</h1>
                <div class="list">
                    <ul id="ul-list">
                        <li data-n="0">首页</li>
                        <li data-n="1">外观</li>
                        <li data-n="2">配置</li>
                        <li data-n="3">型号</li>
                        <li data-n="4">说明</li>
                        <li class="ljgm">立即购买</li>
                    </ul>
                    <div class="line" id="line"></div>
                </div>
            </div>
        </div>
    </header>

    <script>
        var ulList = document.getElementById('ul-list');
        var lis = document.querySelectorAll('li');
        console.log(lis);
        var line = document.getElementById('line');

        for (var i = 0; i < lis.length - 1; i++) {
                lis[i].onmouseover = function (e) {
                    e.target.style.color = '#f01400';
                    var n = e.target.getAttribute('data-n');
                    // console.log(n);
                    line.style.left = n * 100 + 'px';
            }
        }

        for (var i = 0; i < lis.length - 1; i++) {
                lis[i].onmouseleave = function (e) {
                    e.target.style.color = 'black';

            }
        }


    </script>
</body>

</html>

写回答

1回答