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

尚美源码教程库提供精美的网站源码教程,小程序、公众号、H5、APP、游戏、直播、支付、区块链、商城、影音、小说等源码信息大全。
用户必须遵守《计算机软件保护条例(2013修订)》第十七条:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。鉴于此条例,用户从本平台下载的全部源码(软件)教程仅限学习研究,未经版权归属者授权不得商用,若因商用引起的版权纠纷,一切责任均由使用者自行承担,本平台所属公司及其雇员不承担任何法律责任。
尚美源码教程库 » 2022/1/2: JS DOM循环精灵图,红宝书第一章,某马css部分知识框架
赞助VIP 享更多特权,立即登录下载海量资源
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡