老师帮看一下布局怎么样，注释的理解对不对？

相关代码：

<!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;
        }

        .top {
            width: 1000px;
            height: 30px;
            margin: 20px auto;
        }

        .top span {
            float: left;
            width: 100px;
            height: 30px;
        }

        .top .top-nav {
            float: left;
            width: 800px;
            height: 30px;
            padding-left: 100px;
        }

        .top .top-nav ul {
            float: left;
            width: 500px;
            height: 30px;
            list-style: none;

        }

        .top .top-nav input {
            float: left;
            width: 100px;
            height: 30px;
        }

        .top .top-nav ul li {
            float: left;
            width: 40px;
            height: 30px;
            margin-right: 40px;
            text-align: center;
            cursor: pointer;
        }

        .top .top-nav ul li:last-child {
            margin-right: 0;
        }

        .hx {
            position: absolute;
            top: 50px;
            left: 807px;
            width: 35px;
            height: 5px;
            background-color: red;
            border-radius: 5px;
            transition: all .5s ease 0s;
        }
    </style>
</head>

<body>
    <div class="top">
        <span>慕课手机</span>
        <div class="top-nav">
            <ul id='top-ul'>
                <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>
            </ul>
            <input type="button" value='立即购买'>
        </div>
    </div>
    <div class='hx' id='hx'></div>

    <script>
        var topUl = document.getElementById('top-ul');
        var hx = document.getElementById('hx');
        var lis = topUl.getElementsByTagName('li');

        // 事件委托监听
        topUl.onmouseover = function (e) {

            if (e.target.tagName.toLowerCase() == 'li') {
                // 获得触碰到的li的data-n值
                var n = e.target.getAttribute('data-n');
                // 排他操作，让所有的li字体是黑色
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.color = '#000';
                };
                // 碰到的li字体才变成红色
                e.target.style.color = 'red';

                // 得到下划线的元素节点
                var hx = document.getElementById('hx');
                // 下划线left值跟n的值变化而变化
                hx.style.left = (807 + 80 * n) + 'px';
            }
        }
    </script>
</body>

</html>

要每天学习的小蓝同学 2021-05-14

源自：“仿穷游”首页动态项目 2-8 项目作业

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2021-05-14 13:50:42

同学你好，对于你的问题解答如下：

1、由于下划线是参考页面进行定位的，导致在同学电脑下查看布局可能是正确的，但是在其他电脑下查看，位置就不对的，如下图所示：

具体可以参考如下解析：

将下划线hx作为top-nav的子元素

然后给top-nav添加相对定位，让hx参考top-nav进行定位。

调整初始left属性值

调整left计算的方式即可

2、代码中的注释理解是正确的。

祝学习愉快~

收起回答

要每天学习的小蓝同学提问者 #1

明白了，因为我的下划线是参考window的，所以就是每个电脑打开的都不一样，但是参考top-nav这个盒子就不管怎么样位置都能对

2021-05-14 15:40:34
要每天学习的小蓝同学提问者 #2

老师我还有一个疑问，就是当时我是考虑放进去的。但是在top-nav大盒子里边，我让ul和input一起左浮动了，所以我要是把hx这个下划线盒子也放进去是否也要浮动？但是浮动之后还怎么绝对定位呢？因为我记得老师说，同一个盒子内的，要浮动就要一起浮动。

2021-05-14 15:43:57
好帮手慕慕子回复提问者要每天学习的小蓝同学 #3

同学你好，对于你的问题解答如下：
1、hx这个盒子放入top-nav中，不需要设置浮动，直接通过绝对定位设置hx的位置即可。
2、老师说的同一个盒子，要浮动就一起浮动，是推荐这样使用，但并不是必须要这样使用的，具体情况具体分析。
祝学习愉快~

2021-05-14 18:04:00