likes
comments
collection
share

2022/1/2： JS DOM循环精灵图，红宝书第一章，某马css部分知识框架

作者站长头像
站长
· 阅读数 32

写在前头

在我决定走前端时，大概是21年暑假，那时参加了学校的ACM集训，在坚持了一个暑假期间，我也认识到自己不是“小镇做题家” 。当然也没那做题的脑子。 之前都是一直偶尔兴趣来了学学前端。

大一折腾了很多其他的玩意(钱，嘻嘻嘻)，也赚到没几个硬币。现在大二开始好好准备春招。每天公众号打卡，没人看也无所谓。

春招倒计时

今天是2022年的第2天。准备春招的第五天。今天感觉划水了，视频看得少

2022/1/2： JS DOM循环精灵图，红宝书第一章，某马css部分知识框架

每日小结

有效学习时间

4h

学习内容

今天将某马的html，css板块敲了一部分（2天的内容） 做了知识框架

也看了红宝书（JavaScript高级程序设计）的第一章。肯定记不到，但是看了网课后，看什么DOM,BOM都行云流水，不卡壳了。

目前水平

HTML,CSS：看了某马的html，css网课，全敲完了一遍。菜鸟教程也看了一遍。

JavaScript：还在上着某马的课

2022.1.1

代码粗糙笔记 -- 知道自己每天学了啥就行，哈哈哈。目录 css板块敲了一部分

2022/1/2： JS DOM循环精灵图，红宝书第一章，某马css部分知识框架红宝书（JavaScript高级程序设计）的第一章

2022/1/2： JS DOM循环精灵图，红宝书第一章，某马css部分知识框架DOM：P210～p212

15-循环精灵图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

</html>