xBlog 背景相关代码

## 简约平替版: ### 第一步:CSS 代码 - 粘贴到 style.css 文件中 ``` /* ========================================== 动态背景 ============================…

导航栏滚动收缩 CSS代码 JS 代码 迭代记录

## 🎨CSS代码: ### 1. ✅️导航栏滚动收缩样式 - 2026年1月6日 ```css :root { /* 导航栏滚动缩放 */ --header-height-expanded: 135px; --header-height-shrunk: …

前端常见的十一种布局

> 前端布局常见的有很多种,不同的应用场景有不同的布局方式,下面就来简单介绍一下吧。 * 静态布局 * 浮动布局 * 定位布局 * 栅格布局(Grid / CSS Grid) * 表…

代码块 CSS 代码 JS代码 迭代记录

## 🎨CSS 代码: ### 1. 🔄代码块 CSS 样式 - 2026年1月1日 ``` /* ========================================== 代码块 - 需置于 文章详情页 样式下 ============…

导航栏滚动收缩功能迭代代码 2026年1月6日

## 导航栏滚动收缩第一版 ### CSS 代码: ``` :root { /* 导航栏滚动缩放 */ --header-height-expanded: 135px; --header-height-shrunk: 80px; --transition-du…

汇聚 ✈️ YAML

## YAML 文件代码: ```yaml # ====================== # 锚点规则定义 # ====================== rule-anchor: # 订阅配置 更新时间 节点延迟测试时间 P: &P ty…

公用JS函数文件记录

## 兼容版 √ - Edge Chrome + Safari ``` // assets/script.js // ============================= // 全局滚动管理器 // ============================= const S…

通用卡片容器样式记录

## ⭐低性能设备兼容版 ### 1. claude 优化版 √ ```css /* ========================================== 通用卡片容器 - claude优化版 √ =======================…

彻底拆解微软sculpt ergonomic人体工程鼠标

描述症状为:用一段时间就会断链,但是让它休息下就好了。我到手测试发现接收器电脑正常识别,无断链情况,说明问题在鼠标本体身上,猜测某个供电原件过热短路导…

临时笔记

## 控制台测试帧率 ``` // 在控制台执行,查看帧率 (function() { let frameCount = 0; let lastTime = performance.now(); function countFrames() { frameCoun…

博客页面滚动卡顿分析

## 🔴 核心问题 你的页面在 Edge 浏览器上滚动不流畅,主要有以下几个原因: --- ## 1. **CSS 动画与过渡冲突(最严重)** ### 问题代码位置 `style.css` 中的多…