网站使用APlayer+MetingJS实现音乐播放 刷新页面保持音乐播放进度

最近一直在瞎折腾gebilaoli.com这个站点,前几天有突然想给他加个在线播放音乐的功能。于是想到了APlayer。APlayer是一个简约且漂亮的HTML5音乐播放器,支持多种模式,包括播放列表模式、吸底模式。使用也很简单,只需要在页面内加上相关代码...

CSS 使用 font-weigh 根据粗细程度选择不同的字体

看到这个标题,有人第一反应可能是font-weigh不就是是控制字体粗细的吗?为什么要选择不同字体包?因为很多字体不包含粗细级别,设置font-weight是无效的!我们来看下面这个例子使用同一个字体,font-weight分别设置为600、500、40...
CSS 使用 font-weigh 根据粗细程度选择不同的字体

使用 CSS 的 steps() 动画让哥哥动起来,🐔🍐🌞🍓

css阶梯函数steps()是animation-timing-function属性的另一种函数值,以帧的方式过渡,可形成定格动画。语法:animation-timing-function:steps(number,[end|start])参数说...
使用 CSS 的 steps() 动画让哥哥动起来,🐔🍐🌞🍓

CSS 文字等宽显示,避免数字变化时的抖动

为数字设置font-feature-settings:"tnum",可以让数字等宽显示,从而避免数字变化时的抖动。比如某些手机的系统字体竟然不等宽!!!别看了,说的就是你,MiSans!!!<!doctypehtml>&...
CSS 文字等宽显示,避免数字变化时的抖动

常用正则表达式收集

先推荐一个正则表达式可视化小工具:https://tool.yeelz.com/devtool/37.html对正则阅读有障碍的同学可以借助这个工具将正则可视化,从此爱上读正则号码相关手机号(以1开头):/^(?:(?:\+|00)86)?1\d{10}$...
常用正则表达式收集

如何更优雅的使 footer 保持在页面的最底部

几个月前(恍如昨日~~)写过一篇如何优雅的使footer保持在页面的最底部的水文。使用flex布局实现了页脚始终在容器底部。这几天在做一个页面时用到了Grid网格布局,突然想到,用Grid布局实现粘性页脚貌似更简单啊。什么是Grid网格布局Grid布局能将...
如何更优雅的使 footer 保持在页面的最底部

CSS 伪类和伪元素区别及常用伪类伪元素

伪类(pseudoclass)和伪元素(pseudoelement)都是前端开发中经常接触的概念,但是这两个概念特别容易搞混。什么是伪类、伪元素?伪类:以冒号(:)开头,用于选择处于特定状态的元素。伪元素:以双冒号(::)开头,用于在文档中插入虚构的元...
CSS 伪类和伪元素区别及常用伪类伪元素

如何优雅的使footer保持在页面的最底部

今天看到拓源的ZBLOG群里有人问为什么纯净主题的footer不在最底部。看了一下截图,发现是因为他的文章太少了,content部分不够多,于是在页面下方会留出部分的空白比较暴力的解决办法就是给主体部分加一个最小高度比如:section{min-hei...
如何优雅的使footer保持在页面的最底部

用details写一个纯HTML5的折叠菜单

details是HTML5新增的一个有趣又没用的标签,因为它兼容性实在有点差,按照百度来的说法,details只兼容Chrome,Safari8+,Opera26+details标签用于描述文档或文档某个部分的细节,更容易理解的一种用法:折叠菜单例...
用details写一个纯HTML5的折叠菜单
Top