- 用TailwindCSS写一个响应式卡片栅格，说明utility-first思路和移动端优先的断点前缀（grid-cols-1 sm:grid-cols-2 lg:grid-cols-3）如何替代手写媒体查询。 用TailwindCSS写一个响应式卡片栅格，说明utility-first思路和移动端优先的断点前缀（grid-cols-1 sm:grid-cols-2 lg:grid-cols-3）如何替代手写媒体查询。
- H5 CSS Grid 二维布局详解摘要：CSS Grid 是浏览器原生的二维布局系统，能同时控制行与列，远超 Flexbox 的一维能力。本文从基本概念、容器属性、项目属性到实战模式，帮你掌握现代网页布局利器。 一、Grid vs FlexboxFlexbox 是一维布局：要么沿主轴排，要么沿交叉轴排，适合导航栏、按钮组等单行/单列场景。Grid 是二维布局：可以同时定义行和列，适合整体... H5 CSS Grid 二维布局详解摘要：CSS Grid 是浏览器原生的二维布局系统，能同时控制行与列，远超 Flexbox 的一维能力。本文从基本概念、容器属性、项目属性到实战模式，帮你掌握现代网页布局利器。 一、Grid vs FlexboxFlexbox 是一维布局：要么沿主轴排，要么沿交叉轴排，适合导航栏、按钮组等单行/单列场景。Grid 是二维布局：可以同时定义行和列，适合整体...
- 先看最硬核的一手：翻牌只用一条 transition塔罗交互的视觉核心是翻牌。这个项目用经典 CSS 3D 双面翻转实现：/* style.css */.tarot-card { width: 130px; height: 200px; position: relative; transform-style: preserve-3d; transition: transform .7... 先看最硬核的一手：翻牌只用一条 transition塔罗交互的视觉核心是翻牌。这个项目用经典 CSS 3D 双面翻转实现：/* style.css */.tarot-card { width: 130px; height: 200px; position: relative; transform-style: preserve-3d; transition: transform .7...
- 很多应届生第一次写 UI 自动化，代码是能跑，但活不长。今天页面调了一下布局、把某个 div 换成了 section，第二天回归一跑，用例红了一片。你去问「是不是登录坏了」，结果点进去一看，功能好好的，是定位找不着元素了。这就是「选择器地狱」：用例的正确性和页面的实现细节死死绑在一起，页面一动，用例就碎。面试官让你现场看一段自动化代码，第一眼看的往往不是你断言了多少东西，而是你怎么定位元素—... 很多应届生第一次写 UI 自动化，代码是能跑，但活不长。今天页面调了一下布局、把某个 div 换成了 section，第二天回归一跑，用例红了一片。你去问「是不是登录坏了」，结果点进去一看，功能好好的，是定位找不着元素了。这就是「选择器地狱」：用例的正确性和页面的实现细节死死绑在一起，页面一动，用例就碎。面试官让你现场看一段自动化代码，第一眼看的往往不是你断言了多少东西，而是你怎么定位元素—...
- 作品简介：将 CSV、TSV 或竖线数据转换为 Markdown 表格，支持表头与对齐Markdown 表格生成器（Markdown Table Generator）把 CSV、TSV 或竖线分隔的数据快速转换为对齐规范的 Markdown 表格。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有处理在浏览器本地完成。功能特性自动识别分隔符：优先识别 Tab，其次竖... 作品简介：将 CSV、TSV 或竖线数据转换为 Markdown 表格，支持表头与对齐Markdown 表格生成器（Markdown Table Generator）把 CSV、TSV 或竖线分隔的数据快速转换为对齐规范的 Markdown 表格。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有处理在浏览器本地完成。功能特性自动识别分隔符：优先识别 Tab，其次竖...
- 作品简介：基于D2Q9晶格玻尔兹曼模型与BGK碰撞算子，实时高保真计算圆柱扰流、卡门涡街脱落及气动力遥测。FluidLBM Pro · 玻尔兹曼格子流体力学与卡门涡街仿真实验室> 基于 D2Q9 离散速度模型与单松弛时间 BGK 碰撞算子的纯前端原生高保真计算流体力学 (CFD) 仿真平台。---🌟 作品简介FluidLBM Pro 是一款探索介观动力学理论、非定常流动分离、纳维-斯托克斯... 作品简介：基于D2Q9晶格玻尔兹曼模型与BGK碰撞算子，实时高保真计算圆柱扰流、卡门涡街脱落及气动力遥测。FluidLBM Pro · 玻尔兹曼格子流体力学与卡门涡街仿真实验室> 基于 D2Q9 离散速度模型与单松弛时间 BGK 碰撞算子的纯前端原生高保真计算流体力学 (CFD) 仿真平台。---🌟 作品简介FluidLBM Pro 是一款探索介观动力学理论、非定常流动分离、纳维-斯托克斯...
- 作品简介：支持四则运算、括号、幂与数学函数的安全表达式求值器，不使用 eval表达式计算器（Expression Evaluator）安全地计算数学表达式，支持四则运算、括号、幂、取模、常用数学函数与常量。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，使用自建解析器求值，不调用 eval。功能特性运算符：+ - * / %（取模）^（幂，右结合）数学函数：sqrt、... 作品简介：支持四则运算、括号、幂与数学函数的安全表达式求值器，不使用 eval表达式计算器（Expression Evaluator）安全地计算数学表达式，支持四则运算、括号、幂、取模、常用数学函数与常量。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，使用自建解析器求值，不调用 eval。功能特性运算符：+ - * / %（取模）^（幂，右结合）数学函数：sqrt、...
- 作品简介：基于二维弹性板波动方程与亥姆霍兹特征值，驱动微粒受势能梯度自组织沉降形成克拉尼声学驻波图形。ChladniPlate Pro · 克拉尼声学驻波与节线物理实验室> 基于二维弹性平板波动方程与亥姆霍兹特征模态分析的克拉尼声学节线粒子流仿真平台。---🌟 作品简介ChladniPlate Pro 是一款探索经典声学、板壳振动模态、二维驻波干涉以及节线（Nodal Lines）几何自组... 作品简介：基于二维弹性板波动方程与亥姆霍兹特征值，驱动微粒受势能梯度自组织沉降形成克拉尼声学驻波图形。ChladniPlate Pro · 克拉尼声学驻波与节线物理实验室> 基于二维弹性平板波动方程与亥姆霍兹特征模态分析的克拉尼声学节线粒子流仿真平台。---🌟 作品简介ChladniPlate Pro 是一款探索经典声学、板壳振动模态、二维驻波干涉以及节线（Nodal Lines）几何自组...
- 作品简介：数字模式与符号模式互转，支持 setuid、setgid 与 sticky 等特殊权限位Linux 权限计算器（chmod Calculator）在数字模式（如 755）与符号模式（如 -rwxr-xr-x）之间互相转换，支持 setuid、setgid、sticky 特殊权限位。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端。功能特性可视化权限位：所有者 ... 作品简介：数字模式与符号模式互转，支持 setuid、setgid 与 sticky 等特殊权限位Linux 权限计算器（chmod Calculator）在数字模式（如 755）与符号模式（如 -rwxr-xr-x）之间互相转换，支持 setuid、setgid、sticky 特殊权限位。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端。功能特性可视化权限位：所有者 ...
- 作品简介：基于偏微分方程与离散拉普拉斯算子的高精度图灵斑图反应扩散形态发生实验室。ReactionDiffusion Pro · 图灵斑图反应扩散与生物形态发生实验室> 基于 Gray-Scott 非线性偏微分方程与五点离散拉普拉斯算子的高精度形态发生仿真平台。---🌟 作品简介ReactionDiffusion Pro 是一款探索阿兰·图灵 (Alan Turing) 1952 年提出的... 作品简介：基于偏微分方程与离散拉普拉斯算子的高精度图灵斑图反应扩散形态发生实验室。ReactionDiffusion Pro · 图灵斑图反应扩散与生物形态发生实验室> 基于 Gray-Scott 非线性偏微分方程与五点离散拉普拉斯算子的高精度形态发生仿真平台。---🌟 作品简介ReactionDiffusion Pro 是一款探索阿兰·图灵 (Alan Turing) 1952 年提出的...
- 作品简介：基于辛积分求解器的高精度N体天体引力与拉格朗日平衡点动力学仿真实验室。GravityOrbital Pro · N体天体轨道动力学与拉格朗日点实验室> 基于二阶辛几何积分 (Velocity Verlet) 与共转有效势阱的高精度天体力学仿真平台。---🌟 作品简介GravityOrbital Pro 是一款探索多体万有引力相互作用、经典轨道力学、限制性三体问题、拉格朗日平衡点 ... 作品简介：基于辛积分求解器的高精度N体天体引力与拉格朗日平衡点动力学仿真实验室。GravityOrbital Pro · N体天体轨道动力学与拉格朗日点实验室> 基于二阶辛几何积分 (Velocity Verlet) 与共转有效势阱的高精度天体力学仿真平台。---🌟 作品简介GravityOrbital Pro 是一款探索多体万有引力相互作用、经典轨道力学、限制性三体问题、拉格朗日平衡点 ...
- 作品简介：可视化调节阴影偏移、模糊、扩散与颜色，支持多层叠加并生成 CSS 代码CSS 阴影生成器（Box Shadow Generator）可视化调节 box-shadow 的偏移、模糊、扩散、颜色与透明度，支持多层阴影叠加，并实时生成可直接粘贴使用的 CSS 代码。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端。功能特性多层阴影：支持 1 至 6 层阴影叠加，各层... 作品简介：可视化调节阴影偏移、模糊、扩散与颜色，支持多层叠加并生成 CSS 代码CSS 阴影生成器（Box Shadow Generator）可视化调节 box-shadow 的偏移、模糊、扩散、颜色与透明度，支持多层阴影叠加，并实时生成可直接粘贴使用的 CSS 代码。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端。功能特性多层阴影：支持 1 至 6 层阴影叠加，各层...
- 作品简介：可视化编辑线性、径向与锥形渐变，实时预览并生成可复制的 CSS 代码CSS 渐变生成器（Gradient Generator）可视化编辑线性、径向与锥形渐变，并实时生成可直接粘贴使用的 CSS 代码。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有计算在浏览器本地完成。功能特性三种渐变类型：线性 linear-gradient、径向 radial-gra... 作品简介：可视化编辑线性、径向与锥形渐变，实时预览并生成可复制的 CSS 代码CSS 渐变生成器（Gradient Generator）可视化编辑线性、径向与锥形渐变，并实时生成可直接粘贴使用的 CSS 代码。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有计算在浏览器本地完成。功能特性三种渐变类型：线性 linear-gradient、径向 radial-gra...
- 作品简介：按 WCAG 计算前景与背景对比度，判定 AA/AAA 等级并推荐文本色颜色对比度检查器（WCAG Contrast Checker）按 WCAG 2.1 计算前景色与背景色对比度、判定可读性等级的网页工具。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有计算在浏览器本地完成。功能特性对比度计算：依据 WCAG 2.1 相对亮度公式，输出 1:1 至 2... 作品简介：按 WCAG 计算前景与背景对比度，判定 AA/AAA 等级并推荐文本色颜色对比度检查器（WCAG Contrast Checker）按 WCAG 2.1 计算前景色与背景色对比度、判定可读性等级的网页工具。纯 HTML/CSS/JavaScript 单文件实现，零依赖、零后端，所有计算在浏览器本地完成。功能特性对比度计算：依据 WCAG 2.1 相对亮度公式，输出 1:1 至 2...
- H5 CSS 动画与渲染性能动画能够帮助用户理解页面状态变化，但实现不当会造成掉帧、耗电增加和滚动卡顿。浏览器每一帧可能经历脚本执行、样式计算、布局、绘制和合成。优化动画的关键，是尽量缩小每帧需要重新计算的范围，并避免主线程长任务阻塞下一帧。 一、理解渲染阶段不同 CSS 属性会触发不同工作：改变尺寸和位置关系，通常会触发布局。改变背景、阴影等视觉属性，通常需要重新绘制。改变变换和透明度，... H5 CSS 动画与渲染性能动画能够帮助用户理解页面状态变化，但实现不当会造成掉帧、耗电增加和滚动卡顿。浏览器每一帧可能经历脚本执行、样式计算、布局、绘制和合成。优化动画的关键，是尽量缩小每帧需要重新计算的范围，并避免主线程长任务阻塞下一帧。 一、理解渲染阶段不同 CSS 属性会触发不同工作：改变尺寸和位置关系，通常会触发布局。改变背景、阴影等视觉属性，通常需要重新绘制。改变变换和透明度，...
上滑加载中
推荐直播
-
华为云码道Agent集成与鸿蒙实战2026/08/11 周二 19:00-21:00
王一男-华为云码道产品规划专家；李炎-华为云码道产品专家；彭江敏-华为云鸿蒙端云一体化开发专家
本次直播带你解读华为云码道7月份产品新特性、新功能。更有专家演示码道Agent Space × 钉钉机器集成实战，从0到1打通消息通道；码道鸿蒙端云一体化实战，快速搭建员工签到系统。
回顾中 -
华为云开发者AI素养直播课·第五期2026/09/04 周五 16:00-18:00
林华鼎-华为云AI开发者运营负责人；蒋春阳-华为云AI开发者案例开发专家
本期直播内容： AI工具体验营 · 第5-8课连讲。Agent-Team 多智能体协作完成毕业设计实践
回顾中 -
华为云开发者AI素养ClassRoom·第六期2026/09/08 周二 19:00-20:00
樊渊-2026华为软件挑战赛冠军
高手来了：看软挑高手解析二维排样问题—从工业难题到算法突破
回顾中
热门标签