实用技巧 技巧css
html+css3+anime.js实现线条来回滑动且渐隐动画
效果： 代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=devic ......
html+css3+anime.js实现文字故障动画
记录一个很酷的动画，效果如图： 是基于html+css3+anime.js实现的，看了眼代码，其实是默认文字的div中定位了几个相同的文字块，利用clip-path这个属性去裁剪展示其中的一部分，用于展示故障的效果，动画则是使用anime.js去循环改变X与Y轴的位置，同时调整绘制的颜色，demo代 ......
Learn Git in 30 days—— 第 30 天：分享工作中几个好用的 Git 操作技巧
写的非常好的一个Git系列文章，强烈推荐 原文链接：https://github.com/doggy8088/Learn-Git-in-30-days/tree/master/zh-cn 终于来到了最后一天，这篇文章将分享几个好用的 Git 操作技巧，或许可以节省你不少 Git 版控过程的时间。 如 ......
字符串拼接小技巧
常用写法下： String name=name+"("+id+")" 像上面这种情况可以使用String.format()快速实现字符串的拼接： String name=String.format("%s(%s)", name, id.toString()); ......
CSS-04
定位 将盒子定在一固定位置 组成 定位模式+边偏移 定位模式 static-静态定位(标准流)（相当于无定位） relative-相对 absolute-绝对（脱标） fixed-固定（脱标） 相对定位 相对位置 position: relative; top: 100px; 相对自己的位置移动 ......
基本技巧——分数规划 学习笔记
基本技巧——分数规划 学习笔记 引入 分数规划用来求一个分式的极值。 具体的，给定 \(n\) 个元素，每个元素有属性 \(a_i,b_i\)，求一个集合 \(P\in[1,n]\)，最大／最小化比率：$$\dfrac{\sum_{i\in P}a_i}{\sum_{i\in P}b_i}$$ 求解 ......
非常实用的Flex布局
[非常实用的Flex布局 - 个人博客|沧沧凉凉的小站](https://www.cclliang.com/2020/10/01/%E9%9D%A2%E8%AF%95/%E9%9D%9E%E5%B8%B8%E5%AE%9E%E7%94%A8%E7%9A%84Flex%E5%B8%83%E5%B1%8 ......
css设置backgroud：url(),无效
react项目中，使用styled-components编写样式，给元素添加背景图不生效。 background直接设置十六进制颜色或者颜色的英文名称都是可行的，但是使用url无作用，那就是url问题了，于是我想换一种思路，能不能把图片import进来，放进url里，避免错误的路径呢，于是 哎嘿，好 ......
CSS 还原拉斯维加斯球数字动画
我的小册 《CSS 技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的 CSS 内容，可以猛击 - LINK。 最近大家刷抖音，是否有刷到拉斯维加斯的新地标 「Sphere」： 场馆内部的视觉效果非常惊人，其中一个效果让我虎躯一震： 我的第一想法就是，这个看起来用 CSS 也可以实现嘛？还有 ......
差分技巧学习指南
前置芝士 二维差分数组 \(1≤q≤100000,1≤n,m≤10^3,1≤x1≤x2≤n,1≤y1≤y2≤m,1≤a_{i,j},c≤10^5\) void solve(){ int n,m,q; cin>>n>>m>>q; vector<vector<ll>> a(n+1,vector<ll>( ......
数组问题技巧学习指南
前置芝士 求解两个有序数组的第 K 小乘积 先统计分负数乘积个数neg、正数乘积个数pos以及乘积为0的个数 zero， 然后分三种情况讨论： k≤negk，我们可以二分负数答案，统计不超过二分值的乘积个数； neg<k≤neg+zero，此时返回0； k>neg+zero，我们可以二分正数答案，统 ......
CSS:@keyframes和animation
一、@keyframes定义动画 通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% ......
2前端开发css
form表单 '''获取前端用户数据并发送给后端服务器''' <from action = ""></from> #需要再form标签内部编写获取用户数据标签 #1属性action 控制数据的提交地址 方式1：写全路径 action = "http://www.aa7a.cn/user.php" 方 ......
CSS-03
去掉li前面的项目符号：list-style：none 圆角边框 border-radius: 12px;可以是px或百分比 若将正方形改为圆形，则：border-radius: 50%;或者将其设为宽度的一半。 盒子阴影 box-shadow: 8px 10px 10px 10px rgba(0, ......
CSS - 放大缩小淡入淡出效果
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Zoom in and out Animation</title> <style> @-webkit-keyframes zoomIn { f ......
[学习笔记] 有关CSS响应式设计的单位
em 和 rem 单位：em 和 rem 是相对于元素的字体大小计算的单位。em 单位是相对于父元素的字体大小，而 rem 单位是相对于根元素（通常是 <html> 元素）的字体大小。em 和 rem 单位可以用于实现相对于字体大小的自适应布局。 vw 和 vh 单位：vw 和 vh 是视口宽度和视 ......
小技巧 | 渐变消失遮罩的多种实现方式
我的小册 《CSS 技术揭秘与实战通关》上线了，想了解更多有趣、进阶、系统化的 CSS 内容，可以猛击 - LINK。 在知乎看到一题比较有意思的题目。 题目大致是如何实现下述图片的效果，如果使用 div 前置遮挡的话，会影响 div 后面的按钮，使其无法被点击。 本文将简单介绍几种这个效果的实现方 ......
前端url的几种实用情况
一 相对地址转绝对地址 使用场景：某个函数需要在使用的时候传递一个 地址，函数内部会利用这个地址 进行某些操作 （比如生成worker，生成image，数据转化等） 如下：如果直接使用相对位置，会根据url 进行拼接。但当 一些利用利用了router的单页项目，页面的url 并不能获取到 真实的fi ......
VSCode 小技巧 配置代码模版 vscode snippets
第一步 mac 输入 shift + command + p （windows 输入 ctrl + shift + p）, 输入snippets, 点击如下图选项。 第二步，选中新建全局代码片段文件。 第三步，输入一个全局配置文件名，例如 snippet.config 第四步，进行配置 { // P ......
检索及使用技巧
检索方法: 对于词组加双引号,可以固定搜索. "quotation marks". 使用通配符，可以在单词中间、前缀、后缀使用。 * 表示0或者很多个字母 ？表示一个字母 $ 表示0或者1个字母 对于某个单复数\后缀等形式，可以加*号来扩大搜索范围 布尔操作和近似搜索 Boolean and pro ......
你不知道的几个JavaScript 高阶技巧
三元运算符 基础： let hungry = true; let eat; if (hungry true) { eat = 'yes'; } else { eat = 'no'; } 高阶： let hungry = true; let eat = hungry true ? 'yes' : 'n ......
26个CSS超实用技巧
1.文字溢出显示省略号 单行文字： 一定要设置宽度 p{ • width:200px; • overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文字溢出显示省略号p{display:-webkit-bo ......
Mybatis-Plus 中的使用技巧
什么是 Mybatis-Plus MyBatis-Plus (opens new window)（简称 MP）是一个 MyBatis (opens new window)的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。 官网链接：https://baomidou. ......
Tailwind CSS 速查
Tailwind CSS 提供了大量的实用程序类，这些类名都是使用缩写的方式，以更简洁地表述其含义。以下是一些常用的 Tailwind CSS 缩写及其对应的意义： 布局 w: width max-w: max-width h: height max-h: max-height m: margin ......
【前端开发】新版Chrome浏览器接口mock调试技巧，超实用
给大家分享一个 Chrome117 更新中最实用的一个功能：在 Network 面板中发送 mock 请求。 修改返回响应数据 想要修改接口返回的数据，设置成特定的数据，首先打开 网络(Network) 面板，找到你需要Mock的接口，右键然后选择替换内容(Override content)： 这时 ......
什么？？？CSS也能原子化！
原子化CSS是一种CSS的架构方法，倾向于使用用途单一且简单的CSS，通常是根据视觉效果进行类的命名，不同于BEM规则的CSS，原子的意思就是将CSS进行拆分，每个样式都有一个唯一的CSS规则 ......
web前端html+css页面内容的六种隐藏方式
一、使用透明度 语法：opacity:0 注意：元素消失，但是还会占据空间，只是视觉看不出来 <style> .box{ width: 100px; height: 100px; background-color: aquamarine; opacity: 0; }</style><div clas ......
[工具使用小技巧]1
目录修改jupyter notebook粘贴来的图片的大小正确方法下一个 修改jupyter notebook粘贴来的图片的大小 本地的notebook服务器里，在文件里切成代码框（markdown模式）写笔记时，有时候会需要贴图片。 jupyter notebook很方便的一点在于可以直接复制粘贴 ......
前端 ( HTML + JS + CSS )
以下大多都摘自菜鸟教程：https://www.runoob.com/ HTML 简介 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 (markup t ......