公告
学习笔记-CSS
CSS-2D-3D转换
2D 转换 transform:转换在CSS3中可以实现元素的移动(translate)、旋转(rotate)、缩放(scale)等效果 2D 转换 移动 translate: 2D移动可以改变元素在页面中的位置,类似定位 translate的优点:不会影响其他元素位置,对行内标签没有效果 1transform: translate(x,y); 或者分开写: translateX(50px); translateY(50px); 2D 转换 旋转 rotate:2D旋转可以让元素在2维平面内顺时针旋转或者逆时针旋转 rotate单位是 deg ,角度为: 顺时针、逆时针,默认是元素中心点 1transform:rotate(50deg) 2D 转换中心点 transform-origin: x 和 y 用空格隔开,x y 默认转换的中心点是元素的中心点 可以给x y 设置 像素 ...
学习笔记-CSS
前端168个单词
width height strong target blank table border caption thead tbody tfoot rowspan colspan text password radio file submit reset button input placeholder checked checkbox multiple select option selected textarea label style stylesheet class size weight normal bold italic family font indent align left center right decoration underline overline none margin line-height wight hover repeat background pos ...
学习笔记-CSS
CSS高级技巧
CSS高级技巧 CSS 属性书写顺序(重点): 布局定位属性:display / position / float / clear / visibility / overflow 自身属性:width / height / margin / padding / border / background 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-wor 其他属性CSS3:content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient … 1234567891011display: block;position: relative;float ...
前端技术栈
前端路线
前端路线免费且实用的 前端 刷题(面经大全)网站,👉点击跳转到网站。 建议先观看视频导读:https://www.bilibili.com/video/BV1nh411e7oG/ 可根据知识点前的符号按需选学,并获取知识点描述和学习资源。 ⭐️ 必学(追求速成) ✅ 建议学(重要知识) ❗ 面试重点 ❌ 一般没必要学习 💬 描述 📚 资源 🎯 目标 一、前端入门 💬 描述:学习前端基础三件套,建议从实战开始,边学边练,培养兴趣,快速入门。 📚 资源 freeCodecamp 在线编程:https://learn.freecodecamp.one/ 阿里云前端实战学习:https://edu.aliyun.com/roadmap/frontend W3Cschool 编程入门实战:https://www.w3cschool.cn/codecamp/ pink 老师前端入门教程 ...
Hexo
图床方案汇总
图床方案汇总目前 MarkDown 作为一种程序员必备的轻量级标记语言,避免了富文本编辑器换平台就要重新排版的繁琐,使我们可以专注于技术的输出,但使用 markdown 也有弊端,那就是图片的存储问题,markdown 文件要用到图片时必须是一个链接。各个平台都有自己的图片存储方法,在不使用图床的情况下,同一篇文章发布到不同的平台需要单独上传图片一次。如果都放本地这样实在是太麻烦了。 目前最好的解决办法就是使用图床来存储图片 常用免费图床盘点 图床 说明 sm.ms 无需注册,海外服务器【免费】 meotu 要注册,国内服务器【免费】 z4a 图床 要注册,国内服务器【免费】 imgtp 无需注册,国内服务器,最大支持 15MB【免费】 imgbed 无需注册,国内服务器,最大支持 20MB【免费】 聚合图床 要注册,国内服务器【免费】 牛图网 无需注 ...
Windows
Windows软件推荐
Windows软件推荐 Windows上的软件数不胜数,同一类型的软件众多。到底哪一款才是适合你自己的,只有自己亲自试用过才知道。以下是我比较喜欢的软件,特别推荐给各位。 下载工具:qBittorrent和Internet Download Manager 聊天软件:tim(虽然已经被腾讯放弃了,但是比起QQ那么臃肿,这个好用点)和 微信(store转製版) 截图软件: snipaste 这个必须推荐 编辑器: vscode 浏览器: chrome 视频播放器: potplayer 和 哔哩哔哩UWP 词典: 欧陆词典 和 GoldenDict 笔记:onenote 和 evernote (用这个截取网页的内容,onenote的web clipper太差) 简单视频製作:Adobe Premiere Pro (编辑视频) 4K Video Downloader(下载视频) Aegisu ...
Hexo
Hexo Butterfly主题配置
Hexo Butterfly主题相关配置关于部署Hexo的主题butterfly后,一些相关的配置 其实关于hexo主题的基础网上都挺详细,详情可见作者的教程 准备:将 butterfly/_config.yml 文件复制,重命名为 _config.butterfly.yml 放在hexo根目录下,在这个文件里做修改。 首页导航栏在 _config.butterfly.yml 下找到 menu : 12345678910menu: 首页: / || fas fa-home 归档: /archives/ || fas fa-archive 标签: /tags/ || fas fa-tags 分类: /categories/ || fas fa-folder-open #菜单||fas fa-list: #音乐: /music/ || fas fa-music ...
Qexo
Qexo测试
Qexo是一个快速、强大、漂亮的在线Hexo编辑器,支持在线新建编辑文章 新建编辑单独页面 友情链接 还支持页面管理 自定义图床等功能。当然,最让我心动的就是可以在线编辑发布文章 本文章由Qexo发送! 一篇测试文章! 如果您看见此篇说明自动部署成功! 💌本站镜像 PS:根据适合自己访问较快的镜像访问即可! 主站 Vercel镜像 Netlify镜像 Cloudflare镜像 Netlify自带域 Render节点 Gitee XC-Blog状态监控 GitHub Qexo管理
JavaScript
This指向与改变This指向
This指向与改变This指向This 的指向在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象。 例1: 12345678910var name = "windowsName";function a() { var name = "Cherry"; console.log(this.name); // windowsName console.log("inner:" + this); // inner: Window}a();console.log("outer:" + this) // outer: Window this 永远指向最后调用它的那个对象,我们看最后调用 a 的地方 ...
JavaScript
JS防抖与节流(类比游戏技能)
JS防抖与节流(类比游戏技能) 点击获取资料--2021最新前端面试题汇总 防抖生活中防抖的例子 酒店的自动开关门 感应到人自动开门,5s后自动关闭 如果5s的倒计时里有人来,那么这个5s重新开始计时 类比技能吟唱 知道释放一个法术(魔法)是需要吟唱时间的 比如死歌的R 比如波比的R 假设的技能没有CD 那么在技能还没有吟唱完的时候再一次使用技能会打断第一次施法,重新开始施法 在上次技能没释放的时候释放下一次技能,第一次施法被打断是很好理解的吧 重新施法,重新开始吟唱也是很好理解的吧 js中的防抖 如键盘输入等 就和上面两个例子中提到的一样。主要是用到了三点 addEventListener setTimeout clearTimeout 基础的html代码如下 12345678const button = document.querySelector(' ...