2022/1/2: 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-循环精灵图 Document * { 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; }

// 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'; }

提供优质的网站源码大全,小程序、APP、H5、支付、游戏、区块链、商城、直播、影音、小说、公众号等源码下载。
精品源码资源网 » 2022/1/2: JS DOM循环精灵图,红宝书第一章,某马css部分知识框架
赞助VIP 享更多特权,立即登录下载海量资源
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡