原文链接：基于Hexo键入分享功能前言本站基于Hexo搭建，用的?hexo-theme-butterfly主题v3.7.1，请注意最新的?hexo-theme-butterfly版本已经更新到v4.2.2。如果你是v3.7.1之外的版本，可能有些地方会有出入，请留意。注意：我的博客根目录路径为【G:/hexo-blog/blog-demo】，下文所说的根目录都是此路径，将用[BlogRoot]代替。如果不清楚根目录路径，请回到教程基于Hexo从零开始搭建个人博客（二），查看你执行hexoinitxxx这条命令时所选择的路径，例如我选择的路径是【G:/hexo-blog】，我的博客根目录即为【G
作者：郑啟龙摘要：对于MYSQL的INNODB存储引擎的索引，大家是不陌生的，都能想到是B+树结构，可以加速SQL查询。但对于B+树索引，它到底“长”得什么样子，它具体如何由一个个字节构成的，这些的基础知识鲜有人深究。本篇文章从MYSQL行记录开始说起，层层递进，包括数据页，B+树聚簇索引，B+树二级索引，最后在文章末尾给出MYSQL索引的建议。文章涉及较多基础知识，内容较为枯燥，因此采用较多的图片补充说明，希望能对读者有帮助。A.一条记录存储格式：COMPACT行记录结构mysql是关系型数据库，每一行记录都是表结构定义的关系的显示表达。在脑中很直观地想到，记录存储时也可能按行存储。的确，m
作者：郑啟龙摘要：对于MYSQL的INNODB存储引擎的索引，大家是不陌生的，都能想到是B+树结构，可以加速SQL查询。但对于B+树索引，它到底“长”得什么样子，它具体如何由一个个字节构成的，这些的基础知识鲜有人深究。本篇文章从MYSQL行记录开始说起，层层递进，包括数据页，B+树聚簇索引，B+树二级索引，最后在文章末尾给出MYSQL索引的建议。文章涉及较多基础知识，内容较为枯燥，因此采用较多的图片补充说明，希望能对读者有帮助。A.一条记录存储格式：COMPACT行记录结构mysql是关系型数据库，每一行记录都是表结构定义的关系的显示表达。在脑中很直观地想到，记录存储时也可能按行存储。的确，m
上一次写过一篇UML|类图相关的文章，平时规范开发会用的上，或者是写什么文档，就还是需要画图，就像毕业设计就是如此。希望能够帮助到大家。注：本文中所用画图软件为MicrosoftVisio.一、概述时序图更多只是一种叫法，平常我们所说的顺序图、序列图也是在称呼它。时序图是基于交互的对象行为建模，是UML用于描述对象之间信息的交互过程的方法，是描述对象间协作关系的模型。时序图用于捕获系统运行中对象之间有时间顺序的交互，是由生命线和消息组成。时序图将交互关系表示为一个二维图。纵向是时间轴，时间沿竖线向下延伸。横向轴代表了在协作中各独立对象的类元角色。类元角色用生命线表示。当对象存在时，角色用一条虚
最近，有群友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局：他用了60多个标签，而他的同学，只用了6个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑DOM的消耗的同时，也需要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。当然，仅仅从用更少的标签完成这个布局的角度而言，我们能够把标签数压缩到多少呢个？（不考虑和）答案是1个。本文就尝试使用一个标签完成这个效果，当然，这仅仅是探索CSS的极限，不代表我推荐在实际业务中这样去写。我们对整个布局进行一下拆分，大致可以分为三部分：网格+虚线交叉十
终于，在漫长的等待下，容器查询（CSSContainerQueries）将在Chrome105版本得到正式的支持！而目前，我们也能在ChromeCanary版本中，或者在Chrome93~104通过开启EnableCSSContainerQueries特性抢先体验。响应式过往的痛点在之前，响应式有这么个掣肘。同一DOM的不同布局形态如果想要变化，需要依赖诸如媒体查询来实现。像是这样：通过浏览器视窗大小的变化，借助媒体查询，实现不一样的布局。但是，在现如今，大部分PC端页面使用的是基于Flex/Grid的弹性布局。很多时候，当内容数不确定的时候，即便是相同的浏览器视窗宽度下，元素的布局及宽度可能
最近我在CodePen上看到了这样一个有意思的动画：整个动画效果是在一个标签内，借助了SVGPATH实现。其核心在于对渐变（Gradient）的究极利用。完整的代码你可以看看这里--CodePenDEMO--tothefuture?ByJaneOri]源代码还是非常非常复杂的，并且叠加了复杂的SVGPATH路径。我尝试着将其稍微拆分成几小块，运用不同的CSS高阶技巧从另外一个方面方向重新实现了一遍。因为整个过程还是有非常多有意思的CSS技巧，本文就给大家分享一下。实现上半部分背景加落日首先，我们来实现上半部分的背景加落日效果：大家可以先停顿思考下，这里让你来实现，会如何去做？需要多少个标签？好
最近接到一个很有意思的需求，能否做到当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法。什么意思呢？来看看这么一种情况：我们有一个垂直方向溢出滚动的容器，以及一个水平方向溢出滚动的容器：如果使用的是非触控板（大部分用户没有触控板），而是使用鼠标来进行操作，会发现，这两个容器中，只有垂直方向溢出滚动的容器，是可以响应鼠标滚轮的：垂直方向溢出滚动的容器，正常响应鼠标滚轮，可滚动内容水平方向溢出滚动的容器，不会响应鼠标滚轮，不可滚动内容那么，这里可能就是一个用户痛点。如果在一些特定场景下，确实有横向滚动的内容，譬如横向的图片内容展示等。又想使用鼠标滚轮对内容进行滚动，能否做到呢？那是必须的，
本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。首先，我们来看这样一个图形：一个矩形，没什么特别的，代码如下：div{width:200px;height:40px;background-color:#000;}如果，我们现在需要给这个矩形的两端加上圆角，像是这样，该怎么做呢：Soeasy，不过就是加个border-radius而已：div{width:200px;height:40px;+border-radius:40px;background-color:#000;}好，那如果，不再是直线，而是一条曲线，希望曲线两端，带有圆角，像是这样，又该怎么办呢：到这，基本上触及了传统CSS
在WeGame的PC端官网首页，有着非常多制作精良的基于滚动的动画效果。这里我简单截取其中2个比较有意思的转场动画，大家感受感受。转场动画1：转场动画2：是不是挺有意思的，整个动画的衔接是基于滚轮的滚动触发的。我猜测是使用了类似TweenMaxJS的动画库实现。当然，这两处酷炫有意思的转场动画，基于最新的CSS@scroll-timeline规范，也是可以大致实现的。本文就将尝试使用纯CSS，模拟上述的两个转场动画。当然，关于CSS最新的CSS@scroll-timeline规范，如果你还没有详细了解过，可以先看看我的这篇文章来了来了，它终于来了，动画杀手锏@scroll-timeline转场
