开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。...谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS...题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略 谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题 谈谈一些有趣的...CSS题目(七)-- 消失的边界线问题 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案 所有题目汇总在我的 Github 。...九、巧妙的实现 CSS 斜线 使用单个标签,如何实现下图所示的斜线效果。也就是如何使用 CSS 画斜线? ? 这种类似于表格的斜线效果,细细研究一下,还是有一些挺有趣的方法可以实现之。
今天要介绍一种很简单的使用 CSS 控制动画播放与暂停的小技巧。使用好了,可以在很多实际场景得以运用。 我们先来看个例子,本例子是我在闲逛 Codepen 时看到了,很有意思: ?...本例子 CodePen Demo -- CSS Beer![1] 上面整个过程都是由 CSS 完成。抛开如何用 CSS 实现上述一些 UI 效果。...本文主要讲的是如何只用 CSS 控制一次动画的行进,暂停与开始。 拆解分析需求 上述动画控制要完成的效果是: 页面 render 后,无任何操作,动画不会开始。...CodePen Demo -- CSS控制动画行进[2] 总结一下 嗯,整个过程其实非常简单。理解了这种方法后,就可以随意加到你想的任何动画中,再抛一个类似的 Demo: ?...CodePen Demo -- CSS 控制动画行进[3] 非常有用的一个小技巧,赶紧 GET 起来。
在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果!...巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思路非常有意思。...当 n 无限趋近于无穷时,所有矩形的面积就等于曲边图形的面积: ? 利用这个思路,我们也可以通过多个 div 在 CSS 中模拟出一条曲边,也就是波浪线。 Step 1....i<120; i++) div.g-item 对于 CSS 代码,只需要改动动画延迟的时间即可,120 个子 div 的负延迟都控制在 1s 内: // 12 -- 120 $count: 120...CSS 还是非常有趣的~ ? 最后 好了,本文到此结束,希望对你有帮助 ? 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
1.source目录下创建css目录,再创建grep.css(名字随意,只要保证与引用时对应),添加以下代码(之前自定义过css的,直接在原css文件添加以下代码) html {-webkit-filter...grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);} 2.在主题配置文件中引用,本站使用的betterfly...主题,引用方法如下(其他主题引用方法请自行查看文档),在主题配置文件中inject.head配置项引用即可 如下图配置
边框有一些特殊的属性,可以采用边框来实现对话框的效果,而且兼容性杠杠的,不过在ie6下面可能会遇到兼容性问题,在后面分析它。...可以看到边框的效果,4个等腰梯形。我们设置的各个方向边框高度就是每个等腰梯形的高。...前文提到了ie6的兼容性问题,我们在 .t-bd1中使用了ie6的属性值hack,将solid边框的背景色设置为环境色,否则在ie6下边框颜色设置为transparent的部分呈现黑色。...网络上有一篇文章提到在ie6下给需要透明色的边框设置border-style: dashed可以实现相同的目的,但是我的实验效果不是很理想。...技巧在于border-color:#F3961C #F3961C transparent transparent ; 也可以利用该技巧实现复杂的呈现,主要是两个div之间的相互覆盖: .t-bd3{width
给定一个长度为 的数列 ,每次可以选择一个区间 ,使下标在这个区间内的数都加一或者都减一。...求至少需要多少次操作才能使数列中的所有数都一样,并求出在保证最少次数的前提下,最终得到的数列可能有多少种。 输入格式 第一行输入正整数 。...接下来 行,每行输入一个整数,第 行的整数代表 。 输出格式 第一行输出最少操作次数。 第二行输出最终能得到多少种结果。...假设序列为: 9 13 11 14 则差分序列为: b1 b2 b3 b4 b5 9 4 -2 3 0 我们让 b2, b3, b4 都为 0 就行了 但是对差分的操作必须是成对的...- pos 和 neg 中取小的值,即可以进行多少对 (bi +1, bj -1) 的操作 一下把两个数往0接近 - 然后加上 abs(pos - neg) 即还差多少是配不到对的,需要配合
之前在这篇文章中 -- 《老生常谈之 CSS 实现三角形》,介绍了 6 种使用 CSS 实现三角形的方式。 但是其中漏掉了一个非常重要的场景,如何使用纯 CSS 实现带圆角的三角形呢?...图形拼接 不过,上文提到了,使用纯 CSS 实现带圆角的三角形,但是上述第一个方法其实是借助了 SVG。那么仅仅使用 CSS,有没有办法呢?...当然,发散思维,CSS 有意思的地方正在于此处,用一个图形,能够有非常多种巧妙的解决方案! 我们看看,一个圆角三角形,它其实可以被拆分成几个部分: ?...,虽然部分有些繁琐,但是也体现了 CSS ”有趣且折磨人“ 的一面,具体应用的时候,还是要思考一下,对是否使用上述方式进行取舍,有的时候,切图也许是更好的方案。...更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
看下面的 DEMO,我们可以利用 -webkit-text-stroke,给文字二次加粗: 文字加粗CSS 文字加粗CSS 文字加粗CSS 文字加粗CSS...当然,这也难不倒强大的 CSS(SVG),让我们来尝试下。 尝试方法一:使用文字的伪元素放大文字 第一种尝试方法,有点麻烦。...我们可以给二次加粗的文字添加一个文字阴影: 文字加粗CSS p { font-size: 48px; letter-spacing: 6px; font-weight...直接上代码: 文字加粗CSS <feMorphology in="...并且,这里<em>的</em> SVG 代码可以任意放置,只需要在 <em>CSS</em> 中利用 filter 引入即可。 本文不对 SVG 滤镜做过多<em>的</em>讲解,对 SVG 滤镜原理感兴趣<em>的</em>,可以翻看我上述提到<em>的</em>文章。
数年前在一个 C# 开发的项目中,我用了这样的方法:定义一个 logging 基类,所有需要用到日志的类都继承这个基类,这个基类中定义一个 LogHandler 事件,该事件用于实现具体的记录日志动作,...同时可以通过将类 A 的 LogHandler 委托挂到类 B 的 LogHandler 上,实现将两个类的日志信息添加到一起。...显然将两个日志的 FileHandler 指向同一个日志文件是不可取的,存在并发抢占文件的风险。...logging 中定义了一个名为 root 的 Logger 作为所有 Logger 的根节点,root 的 parent 属性为 None。root 是全局的。...,比如 name = 'a.b',这时如果已经存在了名为 a 的 Logger,则 a.b 为 a 的子节点,如果不存在名为 a 的 Logger,则 a.b 为 root 的子节点。
这几天,公司项目不怎么忙,然后利用些业余的时间,想仿一个 app。下面介绍一下如果获取其他 app 的图片资源: 在 MacX 下载 iTools 软件,并安装,直接在百度上搜也能找到。 ?...Paste_Image.png 左边有网络资源和手机资源,点击网络资源下的苹果应用,在右上角搜索你要仿写的 app,点击下载,此时如果你连着 iPhone 显示的就不是下载而是安装,此时会提示你输入 apple...Paste_Image.png 选中下载的软件,然后点击上面的那一排按钮中的导出,保存到桌面上。 ?...Paste_Image.png 在桌面上找到下载好的 ipa 文件,右键该文件,选择一个解压软件打开该文件,切记不要使用 iTunes 打开,此时该路径下便会有个文件夹名为项目名称的文件夹。...Paste_Image.png 把解归档的文件夹进行打开就好了,资源都在里面,随便拿,有时候是乱的需要自己整理。 ? Paste_Image.png 以上就是总结好的,神器 iTools 的巧妙使用。
怎么拒绝那种不懂行业爱瞎指挥的领导? 有两个方法,不说一个不字,还能让领导自己拒绝自己。 第一个叫不喊难处,只列流程,就是用来拒绝那种不专业的需求。...举个例子,我们之前做的项目,领导临时加派另一个开发任务,回复我们说是客户的临时需求,但是很明显这是不符合流程的,而且要求我们3天时间搞定上线,在面对这种不符合流程的情况下,先答应下来了,但是我们按照流程走的时候发现是需要多部门配合的...第三个推荐合适的人来拒绝 有时候,我们拒绝领导,会让领导陷入困境,他本来已经想好让你来做这件事情,你的拒绝,只能让他重新再考虑,这个时候,我们要学会给领导减轻压力,巧妙的推荐合适的人来完成。...如此,既给领导解决了问题,又巧妙的推掉了事情。 其实很多事情并没有我们想象中的那么困难,关键在于一个交流的问题。...领导也是人,在工作中也会出错,我们不要把领导看成是万能的,一个真正英明的领导,会接受建议和批评,而我们需要做的,除了思考清楚自己能否胜任,更重要的是掌握好说话的艺术与适度。
this.planService.writeBpa(planId); // 清空response // response.reset(); // 设置response的Header...response.setCharacterEncoding("UTF-8"); //Content-Disposition的作用:告知浏览器以何种方式显示响应返回的文件...,用浏览器打开还是以附件的形式下载到本地保存 //attachment表示以附件方式下载 inline表示在线打开 "Content-Disposition: inline...; filename=文件名.mp3" // filename表示文件的默认名称,因为网络传输只支持URL编码的相关支付,因此需要将文件名URL编码后进行传输,前端收到后需要反编码才能获取到真正的名称...attachment;filename=" + URLEncoder.encode("bpa_out.dat", StandardCharsets.UTF_8)); // 告知浏览器文件的大小
数组的结构 一个数组在 PHP 内核里是长什么样的呢?...PHP 的数组是不定长度但 C 语言的数组定长的,为了实现 PHP 的不定长数组的功能,采用了「扩容」的机制,就是在每次插入元素的时候判断 nTableSize 是否足以储存。...,因为我们进行foreach的时候还要根据插入的顺序遍历出来,所以我们 第一个元素 $a['foo']=1肯定存在第0的位置,这里的key位foo,但是实际上存的是指向zend_string的指针,然后会把...,所以算出这个值需要维护索引的数组 需要注意的是,即使是整数索引的数组,PHP也必须维持它的顺序。...所以如果一个元素以一个”错误“的顺序(例如逆序)插入到数组中,那么packed hashtable就不会被用到 数组的增删改查运行过程实战 我们先看一段代码 <?
解决问题的思路 这种问题解决方法有很多,比如:可以使用递归,我们写一个函数,功能如下:使用表2中的上手编号在表2中的档案号中进行查找;判断该档案号是否有上手编号;如果有继续调用我们写的函数自身,如果没有...,则递归结束,返回需要的一串编号的值。...虽然上述方法大概能够解决这个问题,但是我们可以使用FME来优雅的、巧妙的解决这个问题,解决方式如下: 将问题进行一点转换(用词不一定准确啊) 如果我们需要的是一个这样的编号串:编号,上手编号,上上手编号...编号与上手,上手与上上手,这两条线段的共有节点就是上手这个节点,我们可以根据这样的关系,将短的线段连接起来,形成长线段,长线串起的一串节点对应的编号,就是我们需要的值(我问了兜兜,不存在什么重复,也就是说...生成的点 ? 因为表1与表2展示的数据没找兜兜要,所以就不连了,今天到此结束。
即使没有让 Visual Studio Code 成为每个开发人员的强大工具的大量扩展,Microsoft 的开源编程编辑器默认情况下也加载了许多巧妙的功能。...但是,其中一些有用的功能并不明显,即使对于经验丰富的用户也是如此。而且,随着 VS Code 的每次新版本发布,更多便捷的功能被推出——通常会保持在水线以下。...以下是 10 个你可能不知道的有用的 Visual Studio Code 提示和快捷方式。从初学者到经验丰富的资深用户,对各个等级的 VS Code 开发者都具有吸引力。...这样做会在当前光标上方或下方的行中插入光标——这对于在文本列中工作很有用。 另一个巧妙的技巧:你可以通过按 Ctrl-Shift-L 在所选文本的每个实例中插入光标。...类似地,VS Code 有自己的内部进程资源管理器,可让您查看在代码编辑器中运行的所有子进程的列表——每个窗口、扩展、外部生成的进程等。
②、HashSet:底层采用哈希表算法,里面添加的元素无序不可重复。 ③、HashMap:底层也是采用哈希表算法,但是里面添加的元素是 key-value 的形式。...那么我们在日常编程中就可以好好利用这些集合的原理,简化我们的编程思路。 一、如何统计一字符串中每个字符出现的次数? 解析:给定一串字符串,统计每个字符出现的次数。...j---num个等等 很明显,这种格式首先第一个统计的字符是不能重复的,而出现的个数我们可以不用管。那么很容易联想到 Map 的集合原理,key-value。...我们将统计的字符放在 Map中是一种很好的实现方式。...HashMap 的实现类,这里打印出来的字符统计是无序的。
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。...谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣的CSS...CSS题目(七)-- 消失的边界线问题 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案 谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线 谈谈一些有趣的CSS题目(十)-...- 结构性伪类选择器 谈谈一些有趣的CSS题目(十一)-- reset.css知多少 谈谈一些有趣的CSS题目(十二)-- 深入探讨 CSS 特性检测 @supports 与 Modernizr 所有题目汇总在我的...哪些 CSS 属性可以动画?,上面的截图是不完整的支持 CSS 动画的属性,完整的可以戳左边。
最近拜读了一些Java Map的相关源码,不得不惊叹于JDK开发者们的鬼斧神工。他山之石可以攻玉,这些巧妙的设计思想非常有借鉴价值,可谓是最佳实践。...二 初始化与懒加载 初始化的时候只会设置默认的负载因子,并不会进行其他初始化的操作,在首次使用的时候才会进行初始化。...cap的最小2的整数次幂。...因为在JVM的内存模型中,每个线程有自己的工作内存,也就是栈中的局部变量表,它是主存的一份copy。...x)) break; // Fall back on using base } CounterCell的设计很巧妙
位运算要多想到与预算和异或运算,并常常将两个数对应位上相同和不同分开处理 一、x&(x-1)消除x二进制中最右边的一个1。...这个比较厉害,比如统计某个 二、与和异或的巧妙结合的思想 与运算可以取出两个二进制数中都有1的部分,异或可以求出两个二进制数中只有一个有1的部分,所以运用位运算的时候可以将两个数用与和异或拆成两部分分别运算...1、(x&y)+((x^y)>>1)来求x、y的平均数 分析如下: 第一步:x,y对应位均为1,相加后再除以2还是原来的数,如两个00001111相加后除以2仍得00001111。...第二部,对应位有且只有一位为1,用“异或”运算提取出来,然后>>1(右移一位,相当于除以2),即到到第二部分的平均值。 第三部,对应位均为零,因为相加后再除以二还是0,所以不用计算。...三部分汇总之后就是(x&y)+((x^y)>>1) 2、用位运算求两个数的和 一样的思想只不过要用的递归 1 int add(int a,int b) 2 { 3 if(b==0) 4 return
vite 是新兴的构建工具,它相比 webpack 最大的特点就是快。 那它是如何做到这么快的呢? 因为 vite 在开发环境并不做打包。...比如图中有 css 插件来编译 css、esbuild 插件来编译 ts/js 等。...那不会导致开发时的代码和生产环境不一致么? 不会。 能做到这一点也很巧妙。 看下 build 时的 rollup 插件: 是不是似曾相识?...处理用的插件都一样,又怎么会开发和生产不一致呢? 这也是 vite 的巧妙之处。...插件可以在开发服务和 rollup 里同时跑,这些功能实现都挺巧妙的。
领取专属 10元无门槛券
手把手带您无忧上云