本文首发于政采云前端博客：深色模式适配指南 背景 随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。 深色模式不仅可以大幅减少电量的消耗，减弱强光对比 ，还能提供更好的可视性和沉浸感。 那针对一款 App 应用（原生 + …

一.发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> CSS #send-btn{ display: flex; align-items: center; justify-cont…

定义和用法 定义 :first-line 伪元素向文本的首行添加特殊样式。 这个伪元素用于设置元素中的第一行文本的样式，而不论该行出现多少单词。 :first-line 只能与块级元素关联。可以应用到首字母的属性是有限的。 注释：下列属性应用于 :first-line 伪元素： font 属性 color 属性 background 属性 word…

定义和用法 定义 :first-letter 伪元素向文本的第一个字母(文字)添加特殊样式。 在 CSS2.1 之前，:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围，可以与任何元素关联。可以应用到首字母的属性是有限的。 注释：下列属性应用于 :first-letter 伪元素： font 属性 color 属性 bac…

语法 text-transform属性语法 text-transform: none | capitalize | uppercase | lowercase text-transform参数解释： none : 默认无转换发生 capitalize : 将文章中出现每个单词或拼音的第一个字母转换成大写，其余无转换发生 uppercase : 将文…

各小程序文档 支付宝小程序 各小程序JSSDK // 微信小程序 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> // 字节跳动(抖音、头条) &…

常用的页面布局，其实就那么几个。下面我会介绍5个经典布局，只要掌握了它们，就能应对绝大多数常规页面。 这几个布局都是自适应的，自动适配桌面设备和移动设备。代码实现很简单，核心代码只有一行，有很大的学习价值，内容也很实用。 我会用到 CSS 的 Flex 语法和 Grid 语法，不过只用到一点点，不熟悉的朋友可以先看看教程链接，熟悉一下基本概念。每一…

本文给大家带来JS中判断某个字符串是否包含另一个字符串的五种方法，有string对象的方法，match() 方法，RegExp对象的方法，test() 方法，exec() 方法，具体内容详情大家参考下本文 String对象的方法 方法一: indexOf() (推荐) var str = "123" console.log(st…

本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。 语…

定义一个random()函数，原理是 随机数和最大值减最小值的差相乘 最后再加上最小值。 function random(min, max) { return Math.floor(Math.random() * (max - min)) + min; } random(0, 100) // 生成 1-100 的随机整数