关于javascript:202212-JS-DOM循环精灵图红宝书第一章某马css部分知识框架

写在前头

在我决定走前端时,大略是21年寒假,那时加入了学校的ACM集训,在保持了一个寒假期间,我也意识到本人不是“小镇做题家” 。当然也没那做题的脑子。 之前都是始终偶然趣味来了学学前端。

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

春招倒计时

明天是2022年的第2天。筹备春招的第五天。明天感觉划水了,视频看得少

每日小结

无效学习工夫

4h

学习内容

明天将某马的html,css板块敲了一部分(2天的内容) 做了常识框架

也看了红宝书(JavaScript高级程序设计)的第一章。
必定记不到,然而看了网课后,看什么DOM,BOM都行云流水,不卡壳了。

目前程度

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

JavaScript:还在上着某马的课

2022.1.1

代码毛糙笔记 — 晓得本人每天学了啥就行,哈哈哈。
目录
css板块敲了一部分


红宝书(JavaScript高级程序设计)的第一章


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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理