请老师检查

来源：2-8 项目作业

tobeabee

2023-01-28 02:31:58

<!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>
        header h3 {
            float: left;
        }

        header .right_part {
            float: right;
        }

        header .right_part nav {
            float: left;
            position: relative;
        }

        header .right_part nav ul {
            list-style: none;
            margin-right: 10px;
            overflow: hidden;
        }

        header .right_part nav ul li {
            float: left;
            margin: 0 10px;
        }

        header .right_part nav .bottomline {
            position: absolute;
            top: 40px;
            left: 48px;

            width: 36px;
            height: 3px;
            background-color: #f01400;
            transition: all 0.2s ease 0s;
        }

        header .right_part .buy_btn {
            float: left;
            background-color: black;
            color: white;
            font-size: 20px;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin-right: 100px;
        }
    </style>
</head>

<body>
    <header>
        <h3>
            慕课手机
        </h3>
        <div class="right_part">
            <nav>
                <ul id="list">
                    <li>首页</li>
                    <li>外观</li>
                    <li>配置</li>
                    <li>型号</li>
                    <li>说明</li>
                </ul>
                <div class="bottomline" id="bottomline"></div>
            </nav>
            <div class="buy_btn">立即购买</div>

        </div>
    </header>
    <script>
        var list = document.getElementById('list');
        var lis = list.getElementsByTagName('li');
        var bottomline = document.getElementById('bottomline');

        list.onmouseover = function (e) {
            if (e.target.tagName.toLowerCase() == 'li') {
                console.log(e.target);
                var num = 5;//li的数量
                for (var i = 0; i < num; i++) {
                    if (e.target == lis[i]) {
                        lis[i].style.color = '#f01400';
                        bottomline.style.left = 48 + i * 52 + 'px';
                    }else{
                        lis[i].style.color = '#000';
                    }
                }
            }
        }
    </script>
</body>

</html>

写回答

1回答