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

最近在做主题的时候把HarmonyOSSans字体嵌到了里面，但是中文字包体积实在是太大，一个HarmonyOS_Sans_SC_Regular字体达到了7.87M。于是想到了通过将ttf格式字体转换为woff2格式来减少体积。woff...

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

css阶梯函数steps()是animation-timing-function属性的另一种函数值，以帧的方式过渡，可形成定格动画。语法：animation-timing-function:steps(number,[end|start])参数说...

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

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

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

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

项目开发过程中，前端设计改来改去，这时往往会先把新的效果做出来，等项目做完，就会有一些遗弃的CSS代码。或者扒站的时候，有时候只是想扒一点小地方，如果一点一点的扒对应的CSS也是不小的工作量。这时候UnCSS-Online这个神器就派上用场了。打开网址：...