也就是在当天，我给自己的博客 github 上面提交了一个 issue，也就是需要给博客添加一套暗色主题并支持主题切换。但是人都是有拖延症的，这一拖，两个月就过去了，我的主题切换功能才终于上线了。...A：有了新的主题样式，想要做到切换的功能，可以通过 js 实现，具体就是 js 定义方法，界面搞个主题切换的按钮，点击按钮触发切换方法，把新的主题 css 文件加载到当前页面即可。...添加一个样式值就够了，这样也是可以实现主题切换的。...cookies的使用 既然实现了主题切换，那么如何存储用户切换的主题状态，这是最重要的一点，毕竟你总不能让用户每次刷新页面都需要重新切换主题吧。...前端使用cookies 首先来说说前端如何使用 cookies，这里我使用了一个 js-cookies.js 的插件，关于这个插件的使用可以自行查看 官方文档，比较简单，一看就会。
在本文中，我们将探讨许多可用的工具（围绕HTML和CSS），从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。...实上，当媒体查询与这些功能一起使用时，它更像是一种补充，而不是一种完整的方法。让我们看看它是如何工作的。...HTML提供了元素，该元素可以根据所添加的媒体查询来指定要渲染的确切图像资源。...媒体查询会根据图片的大小适当地添加: 大于等于1000px的视口加载picture.png 601px到999px之间的视口加载image-lg.png 介于401px和600px之间的视口加载picture-mid.png...超越媒体查询 以上，我们只研究了许多真正强大且相对较新的HTML和CSS功能，这些功能为我们提供了更多（可能更有效）的响应方式构建方法。 这些新的东西并不是取代我们一直以来所做的事情。
基于成本的优化器（CBO）设计YashanDB的查询优化器采用成本基（CBO，Cost Based Optimizer）模型，基于丰富的统计信息对查询计划进行评估选择。...优化器考虑索引的聚集因子，聚集因子低的索引扫描效率更高。函数索引支持对表达式进行索引，扩展了优化器的访问路径，简化复杂查询。索引的可见性、可用性也会被优化器纳入决策，配合统计信息能够优化访问计划。...节点内并行进一步利用多核CPU资源对stage进行切分，实现多线程并发。内存管理和任务调度机制协调这些并行执行单元，显著提升查询吞吐。...访问约束实现了大数据查询中有效缩减计算范围的功能，利用语义关系压缩数据集，显著降低IO开销和CPU成本。7....查询优化实用建议维护准确的统计信息：定期及时收集表、列、索引统计，使用动态采样提升采集效率，确保优化器正确评估执行代价。
第一步 在优聚集个人中心，生成每个人的专属token ? 第二步 复制个人专属代码 ? 第三步 新建一个浏览器书签 名称：随意 地址：上面复制的代码 ?...可能的问题 1、找不到新建书签的路径 可以先随便添加一个网站的书签： ? 然后再修改【地址】为上面的那串代码： ?...另外，建议将此书签放在浏览器顶级文件夹中【顶级：即下图的收藏夹栏】，这样就可以一键添加至优聚集 ? 效果 ? ?...注意事项 切记，勿将携带个人身份标识的链接添加至公共盒子 切记，勿将携带个人身份标识的链接添加至公共盒子 切记，勿将携带个人身份标识的链接添加至公共盒子 切记，勿将携带个人身份标识的链接添加至公共盒子...携带个人身份标识： 即：比如本功能提供的代码中的 token 字段即属于个人身份标识： ?
那么，我们自己的网站如何适配暗色/亮色模式呢？首先说一下最基础的媒体查询，然后带大家了解一下我的适配方案（纯JS、CSS和HTML的前端操作）。...媒体查询的优缺点 很多文章会介绍你直接使用媒体查询来适配暗色模式；的确高版本的浏览器，可以提供媒体查询功能，使用CSS，加入媒体判断即可： /\* 常规浅色模式下的网页背景颜色及文本颜色 \*/ body...不存在暗色模式标识符 用户进入网站，若之前没有手动点击网站上切换暗色/亮色按钮（不存在暗色模式标识符），则使用媒体查询检测用户是否有开启暗色模式，同步系统配色。...: #424242; } 派生 因为我们是直接在标签内添加CSS叠加，所以，按照样式的优先级来说，在CSS内使用，我们就需要使用派生方法写样式，如： /\*暗色模式span标签\*/ ....，如Mac用户的外观自动： 在系统自动切换暗色/亮色的同时，如何让网站也一同切换？
文件上传和下载是Web开发中非常基础的功能，但在实际开发中，我们经常需要实时显示文件上传或下载的进度。这篇文章将介绍如何使用Springboot实现文件上传和下载，并为其添加实时进度条的功能。...@RequestParam注解来指定文件上传的参数名，并将文件保存到磁盘或者进行其他操作。...最后，我们返回一个简单的字符串作为响应内容。添加进度条为了实现上传进度条功能，我们需要使用JavaScript和Ajax来实现。...添加进度条添加下载进度条功能与上传进度条类似，我们仍然可以使用XMLHttpRequest对象和JavaScript来实现。...具体来说，我们为xhr对象添加了progress事件处理程序，以便在文件下载时实时更新进度条。结论本文介绍了如何使用Springboot实现文件上传和下载，并为其添加实时进度条的功能。
1，摘要 【本文目标】 通过本文实践，可以使用AlphaWallet钱包完成Repsten Test Network的ERC20的代币转账，冻结，锁仓投放等功能的验收测试。...2）已发布ERC20的代币，不熟悉的参考《第七课 技术小白如何在45分钟内发行通证(TOKEN)并上线交易》 3）会发布使用锁仓合约，不熟悉的参考《第十九课 代币锁仓后逐步释放的ERC20智能合约实践...” 2） 转账/查询 切换到ACCOUNT1账号下，转账10000个CLB给ACCOUNT2 转账成功后,等待2分钟，可以看到ACCOUNT2已经有1万个CLB存在了。...使用https://www.myetherwallet.com/#contracts进行账户冻结调用。...，跟imToken相比，它有以下功能让辉哥着迷： 1） 支持ERC875代币功能，能进行门票转账等； 2） 支持ERC721代币功能，能进行非同质化物品转让（还未测试）； 3） 支持ERC20代币功能
伪类/媒体查询不生效：内联样式无法直接设置伪类（如 :hover）或响应式媒体查询（需通过 CSS 类或 @media 实现）。 ...，适合需要全局动态调整的场景（如主题切换）。...伪类与媒体查询：内联样式无法直接设置伪类（如 :hover），需通过 CSS 类配合 JS 事件（如 mouseover/mouseout）模拟。...总结表格 方法适用场景优点缺点element.style动态计算样式、覆盖特定样式直接控制内联样式无法处理伪类/媒体查询，易耦合classList 添加类复用样式、分离逻辑与样式维护方便，支持伪类/...媒体查询需提前定义 CSS 类CSS 变量全局动态调整（如主题切换）灵活，支持级联更新需现代浏览器支持 根据具体需求选择方法：优先用 classList 管理预定义样式，动态计算时用 element.style
暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。...CSS 的媒体查询 prefers-color-scheme 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。...) 方法可以用来查询 指定的媒体查询字符串解析后的结果。...结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配。.../package/postcss-css-variables) 插件来自动解析 CSS 变量对应的色值，并在原始 CSS 定义之上添加一条新的 CSS 样式，做到对不支持 CSS 变量浏览器的兼容。
DevTools 中有一个动画面板，默认情况下它是关闭的，很多人可能不太清楚这个功能。它可以让你控制和操纵 CSS 动画，并且可视化这些动画是如何工作的。...一旦触发，它们将被添加到列表中。你能看到这些动画块如何显示。在动画本身上，DevTools 会向我们展示哪些属性正在更改，例如 background-color 或 transform。...打开方式 选择Network面板 在资源面板中选择Img 右键单击将其复制为数据URI（已编码为base 64） 媒体查询 ? 媒体查询是自适应网页设计的基本部分。...Devtools会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形: ? 那怎么使用呢？...其实也很简单： 点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 keys/values ?
， 欢迎fork & star 效果演示 引言 在前两篇教程中，我们学习了如何使用HarmonyOS NEXT的ColumnSplit组件构建课程学习平台的基本布局，以及如何添加交互功能和状态管理...在HarmonyOS NEXT中，我们可以使用以下技术实现自适应布局： 技术 描述 使用场景 媒体查询 根据设备屏幕尺寸和方向应用不同的样式 在不同尺寸的设备上使用不同的布局 百分比布局 使用百分比值设置组件尺寸...使用媒体查询实现响应式布局 媒体查询允许我们根据设备屏幕尺寸和方向应用不同的样式。...'#121212' : '#f5f5f5') // 根据主题设置其他样式 } } 通过AppStorage和@StorageProp，我们可以在应用的不同组件之间共享主题设置，实现全局的主题切换功能...使用@BuilderParam实现布局定制，创建高度可定制的组件 封装高级组件，如课程播放器组件和课程笔记组件，提高代码的可维护性和复用性 实现主题切换功能，允许用户在浅色主题和深色主题之间切换 实现多语言支持
在另一篇博文中，Mads Stoumann详细介绍了如何使用SVG和CSS重新创建Apple的暗黑模式图标。这证明了他在此领域的深厚技术和创新能力。...总的来说，这个网站提供了许多关于使用CSS和SVG进行网站设计和开发的有用信息，特别是关于暗黑模式的实现。这对那些希望在自己的网站上实现暗黑模式的开发者来说是非常有价值的资源。...这是一个浅色模式演示，在Safari中展示了可用的系统颜色： 如果我们切换到深色模式，某些颜色会完全改变（就像我们已经遇到的 Canvas 和 CanvasText ），而其他颜色只会稍微改变： 使用系统颜色进行黑暗模式是一种简化的黑暗模式体验...使用 prefers-color-scheme 媒体查询 要为亮色和暗色模式指定特定颜色，我建议使用 CSS 自定义属性，然后使用 prefers-color-scheme 媒体查询更新这些属性。...Css 使用一些全新的CSS技术，我们可以在不使用JavaScript的情况下创建一个切换器。
如何切换深色模式 iOS：“设置”--“显示与亮度”--“外观”，选择“深色” Android：“系统设置”--“显示”--“深色模式”。...，只影响浏览器默认样式 更多信息可查阅 W3C 文档 《CSS Color Adjustment Module Level 1》 2.通过 CSS 媒体查询 prefers-color-scheme CSS...，建议使用CSS变量对颜色值进行管理 3.图片适配 利用picture+source标签，设置不同模式下的图片 url。...返回的MediaQueryList 可被用于判定Document是否匹配媒体查询，或者监控一个document 来判定它匹配了或者停止匹配了此媒体查询。...4.2addListener() MediaQueryList接口的addListener()方法向MediaQueryListener添加一个侦听器，该侦听器将运行自定义回调函数以响应媒体查询状态的更改
); } CSS媒体查询 CSS媒体查询是实现响应式网页设计的重要工具，它允许根据设备的特定特性来应用不同的样式规则。...使用 @media 规则可以实现这一功能，通过这个规则可以定义一个或多个条件，当这些条件满足时，相应的样式代码块将会被应用到文档上。...：样式固定，用户无法自定义设置主题样式 JS媒体查询 JS同样拥有媒体查询的方法 matchMedia() 。...传入一个被用于媒体查询解析的字符串，返回一个用来媒体查询新的 MediaQueryList 对象，其中的 matchs 属性值就是匹配结果。...1的主题切换方案，结合JS媒体查询来实现跟随系统主题切换的功能。
推荐文章：『学习笔记』配置 Nginx 实现站点限流与防止 DDOS 攻击-腾讯云开发者社区-腾讯云这篇文章详细阐述了如何使用Nginx配置实现站点限流与防止DDOS攻击，介绍了Nginx限流模块的功能及配置方法...本文将深入探讨响应式设计的原则、工具和技术，并通过实例展示如何在H5 App中实现多屏幕适配。核心内容1. 响应式设计原则灵活性：布局应能够根据不同屏幕尺寸和分辨率进行自适应调整。...流动性：内容应根据容器大小进行流动排列，而不是固定位置。媒体查询：使用CSS媒体查询来针对不同屏幕尺寸应用不同的样式。优先级：确保在较小屏幕上显示最重要的信息，避免内容过载。2....使用媒体查询（@media (max-width: 768px)）来调整小屏幕上的布局，隐藏菜单项，并在点击汉堡菜单图标时显示。添加了一些基本的样式，如背景颜色、文本颜色、悬停效果等。...JavaScript：添加了一个简单的JavaScript函数toggleMenu，用于切换导航栏菜单的显示状态。
使视口可以通过任意一侧的大手柄随意调整大小 特定设备。 将视口锁定为特定设备确切的视口大小，并模拟特定设备特性 媒体查询 媒体查询是自适应网页设计的基本部分。...要查看媒体查询检查器，请在三圆点菜单中点击 Show Media queries。DevTools会在样式表中检测媒体查询，并在顶端标尺中将它们显示为彩色条形 ? 用彩色标记的媒体查询示例如下： ?...快速预览媒体查询 点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式 查看关联的 CSS 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 元素面板（Elements）...快速向样式规则添加背景色或颜色 Styles 窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式 样式规则的右下角有一个由三个点组成的图标...功能断点 调用 debug(functionName) 来给函数 functionName 进行断点调试 function sum(a, b) { let result = a + b; // DevTools
CSS 容器查询 介绍样式查询之前，我们先来回顾容器查询。 CSS 容器查询（Container Queries）是一项新的 CSS 功能，允许开发人员根据元素的大小来应用样式。...这意味着，开发人员可以为不同大小的设备或浏览器窗口应用不同的样式，而无需使用媒体查询或使用 JavaScript 来检测设备大小。...在下面的示例中，我们有一个包含不同统计组件的仪表板。 基于包装器，我们需要切换组件的主题。 目前，我们可以使用特殊类根据它们的容器为自定义统计组件添加样式。...让我们探讨一下如何用样式查询来实现上述内容。 首先，我们需要在特殊包装器上定义一个切换按钮。然后，我们可以检查该开关是否处于激活状态，并对状态组件进行相应的设计。...-- Description --> 要对它们进行样式设置，我们可以使用 CSS 变量并检查它是否已切换，然后相应地添加样式。
) 方法可以用来查询指定的媒体查询字符串解析后的结果。...结合 CSS 变量和 matchMedia 的查询结果，设置对应的 CSS 主题颜色。该方法更灵活，可以单独抽离主题色进行适配。...当切换深色模式时，系统会根据适配的颜色和图片资源进行查找和自动切换对应模式下的颜色和资源文件。...主题背景和样式 主题背景和样式应避免使用旨在于浅色主题背景下使用的硬编码颜色或图标，您应改用主题背景属性（首选）或适合在夜间使用的资源，以下是需要了解的两个最重要的主题背景属性： ?...Flutter 这里以 Flutter 为例，简单介绍下跨平台开发框架如何适配深色模式。Flutter 定义主题有两种方式：全局主题或使用 Theme 来定义应用程序局部的颜色和字体样式。
我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。...因为它的媒体查询宽度是大于1300px。 不仅如此，当内容低于预期时，我们还会面临一个问题。有时，UP主可能只会添加一篇文章，而设计是包含其中的三篇。...第二种情况下(Case 2)也是一样的问题 如果使用容器查询，我们可以通过查询父组件来决定如何显示特定组件来解决这些问题。考虑下图，它展示了我们如何使用容器查询来修复这个问题。...另外，我添加了contain属性。然后，如果容器宽度大于180px，将显示用户名。 另一个类似的用例是侧导航。我们可以切换导航项标签的位置，从在新行或旁边的图标。...当容器很小时，导航项标签是如何从一个新行切换的，当有足够的空间时，导航项标签是如何靠近导航图标的。 示例地址：https://codepen.io/shadeed/pe...
除了屏幕宽度媒体查询外，其实还存在非常多不同功能的媒体查询！ 下面我会列出一些在未来，我认为会越来越被提及使用到的 @media 规则。...prefers-contrast 调整内容色彩对比度 prefers-contrast 该 CSS 媒体功能是用来检测用户是否要求将网页内容以更高或者更低的对比度进行呈现。...prefers-reduced-data 该 CSS 媒体查询功能是用于告知用户代理，希望减少页面的流量请求。...@layer 级联层如何使用呢？ 通过 @layer 级联层管理样式优先级 @layer 级联层最大的功能，就是用于控制不同样式之间的优先级。...同一 DOM 的不同布局形态如果想要变化，需要依赖诸如媒体查询来实现。 像是这样： 通过浏览器视窗大小的变化，借助媒体查询，实现不一样的布局。
云服务器
ICP备案
对象存储
实时音视频
云直播
