上一次写过一篇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转场
在平时，我非常喜欢利用CSS去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个10x10的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：虽然利用了随机，随机填充了每一个格子的颜色，看着有那么点意思，但是这只是一幅杂乱无章的图形，并没有什么艺术感。这是为什么呢？因为这里的随机属于完全随机，属于一种白噪声。什么是白噪声？噪声（Noise）实际上就是一个随机数生成器。那么，什么是白噪声呢？如果从程序员的角度去理解的话，可以理解为我们在JavaScript中使用的random()函数，生成的数大致在0~1内是完全随机的。而噪声的基础是随机
作者：刘邓忠Mysql是大家最常用的数据库，下面为大家带来mysql索引下推知识点的分享，以便巩固mysql基础知识，如有错误，还请各位大佬们指正。1什么是索引下推索引下推(IndexConditionPushdown，索引条件下推，简称ICP)，是MySQL5.6版本的新特性，它可以在对联合索引遍历过程中，对索引中包含的所有字段先做判断，过滤掉不符合条件的记录之后再回表，能有效的减少回表次数（目前我们使用的mysql版本较高，一般大家可能感觉这是正常的，但是mysql5.6之前都不是这样实现的，下面会细细道来）。1.1适用条件我们先来了解一下索引下推的使用条件及限制：只支持select。当需
在平时，我非常喜欢利用CSS去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个10x10的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：虽然利用了随机，随机填充了每一个格子的颜色，看着有那么点意思，但是这只是一幅杂乱无章的图形，并没有什么艺术感。这是为什么呢？因为这里的随机属于完全随机，属于一种白噪声。什么是白噪声？噪声（Noise）实际上就是一个随机数生成器。那么，什么是白噪声呢？如果从程序员的角度去理解的话，可以理解为我们在JavaScript中使用的random()函数，生成的数大致在0~1内是完全随机的。而噪声的基础是随机
