按钮

胶囊标签与徽标

顶栏导航

• 高度 48px（桌面 / 移动端同高），背景 #FFFFFF，box-shadow: 0 1px 6px rgba(20,40,80,0.08)
• Logo 高 34px，位于左侧；导航菜单 15px，颜色 var(--qj-ink)，间距 28px
• 软件库为下拉菜单：办公软件 / 设计软件 / 开发工具 / 影音娱乐 / 系统工具
• 移动端收起为汉堡菜单，点击从右侧滑出抽屉（含搜索框）

搜索

• 搜索条：白色底、阴影 var(--qj-shadow-card)，输入框背景 var(--qj-mist)、圆角 999px
• 搜索按钮：品牌蓝底白字、圆角 999px；结果页沿用文章列表卡片样式
• 空关键词不提交；移动端抽屉内嵌同款搜索框

Tab 文章流

加载骨架屏

Tab 切换骨架 · 交互演示

• 适用场景：首页 Tab 切换、软件库列表页、搜索结果等前端取数加载；首屏服务端直出的内容不设骨架。
• 无障碍：加载容器置 aria-busy="true"，骨架本身 aria-hidden，不向读屏软件朗读占位块。
• 超时兜底：加载超过 8s 仍未完成，骨架换成品牌蓝幽灵按钮「重新加载」，不让用户对着扫光干等。
• 减动效：系统开启「减少动态效果」时停用扫光动画，只保留静态底色占位。

文末固定模块P0

时效提示 · 非卡片单行条

12.5px 灰色小字＋时钟图标，不占卡片；超过 180 天未更新自动转警告色并加粗。

文章推荐 · Tab 卡（相关 / 随机二合一）

标题栏：蓝杠 h3 ＋ 右侧 Tab（激活态品牌蓝实心）；列表单行三单元（序号徽章＋标题＋类型 pill），去日期；卡片内顶部留白 8px，见卡片布局规范。

公告卡 · 标签推荐卡

公告可关闭并记住选择（同一设备不再重复出现）；标签推荐只取与本文相关的标签，最多 8 个。

三链按钮固定为品牌蓝描边幽灵按钮，指向站内对应说明页，位置与文案全站统一。

TOC 文章目录

阅读器组件

阅读时间估算 · 置于标题下方

Photoshop 2025 安装教程：下载、激活与常见报错处理

按正文字数估算阅读时长，12px 灰色小字排在标题正下方，只报时间、不抢标题。

marker 高亮 · 沿用公众号规范

安装前先关闭杀毒软件的实时防护，并确认安装路径不要带中文——这是九成安装失败的源头；本机另需预留 至少 8 GB 可用空间。

与公众号 [gzh_hl] 同一套：黄底 #FFF3C4 ＋ 文字 #8A5A00 加粗。网站与公众号共用这一套高亮，不另起一套。

图片灯箱 · 点击放大

正文配图点击后全屏灯箱查看，关闭钮为品牌蓝圆形按钮（本页右上角试用），点遮罩或按 Esc 也可退出。

折叠面板 · 长教程收起步骤

触发按钮只用品牌蓝文字按钮，不用整块色面；默认收起，正文主线保持干净。

代码块 · 一键复制

# 以管理员身份打开 PowerShell 后执行
winget install --id Bandisoft.Bandizip -e

深墨底＋浅蓝灰等宽字；复制按钮固定右上角、品牌蓝胶囊，点击后以 Toast 反馈结果。

顶栏搜索PHASE C 预留

管家｜契机库

搜索

• 搜索框为 999px 圆角胶囊：白底、--qj-line 描边，聚焦时描边转品牌蓝。
• 搜索按钮为品牌蓝实心胶囊，与搜索框同高，文案固定「搜索」二字。
• 移动端顶栏只留搜索图标，点击后整行展开搜索框，不挤压 Logo。

软件库 A–Z 索引页PHASE B

卡片构成：首字母字形块（雾蓝底＋品牌蓝字）＋软件名＋分类小字；点任意卡片进入该软件的聚合页（下载 / 安装 / 排错 / 教程）。暂无软件的首字母不显示筛选按钮。

信息密度与排版紧凑度P0

• 文末固定模块总计不超过 4 段（下载区、三链计入段数）。新增模块先回答「挤掉谁」，不做加法。
• 推荐列表单段 3–5 条封顶；第 6 条起收进「查看更多」折叠，默认不展开。
• 时效提示（上次编辑）、公告、标签推荐三类辅助卡片不得同时整段出现：按下方优先级只保留一段，其余合并进保留段或直接不渲染。

排序理由：时效警告直接关系内容可信度，永远第一；标签推荐纯属引流，三者冲突时第一个砍。

• 模块区自成一阶：标题 14–15px，次级信息 12–13px，行高 1.5–1.6，不借用正文字阶。
• 不把正文行高 1.8 套进推荐列表与卡片——列表项被正文行高撑开，是文末臃肿的头号来源。

• 每项最多 3 个信息单元：序号徽章 ＋ 标题 ＋ 类型 pill，到此为止。
• 标题单行截断（省略号收尾），不换行、不撑高；摘要、阅读数一律不进列表项。
• 不显示日期：同日批量发布的文章日期全站雷同，是纯噪声；时效信号由时效警告段统一表达，不塞进列表项。
• 项间距 8px，段内用 --qj-line 浅色虚线分隔；不用实线，不卡片套卡片。

样张（同时演示第 1 条的折叠阈值：默认 5 条，第 6 条起折叠）：

• 回到顶部全站只保留一套：用主题（Puock）右侧自带按钮组；插件侧不再自带回到顶部，只保留目录按钮一个 FAB。
• 目录按钮注入主题右侧按钮组顶部（class="p-block qja-toc-inject"），不再独立悬浮：复用主题白色方形按钮样式与 fa-bars 图标，与主题自带的评论 / 回到顶部 / 回到底部按钮同组垂直排列，永不相叠。回到顶部全站只用主题自带，插件侧不再重复造。
• 任何新悬浮元素先查下表登记 z-index，不临场随手写大数；同层元素靠位置分区，不靠层级互压。

点按钮组顶部的目录钮试试浮层。目录钮以 JS 注入主题按钮组顶部（class="p-block qja-toc-inject"），复用主题白色方形按钮样式——不再独立悬浮，不另起层级，永不与主题按钮叠放。

• 移动端文末模块区（正文结束 → 三链）总滚动距离不超过 2 屏；超预算先砍段数、再开折叠，不靠缩小字号硬塞。
• 公告卡片移动端默认只露两行正文 ＋ 一个小按钮（了解更多），整段公告不整段占屏。
• 公告可关闭并记住选择：点 × 关闭后，同一设备上不再重复出现；只有换新公告时才重新展示。

移动端公告样张：正文截断为两行。点右上 × 关闭——线上实现会记住这个选择，本页演示刷新后恢复。

卡片布局规范

对齐 · 横平竖齐

• 同行卡片强制等高：用 grid 的 stretch 特性，不手动定高；卡片内部纵向 flex，底部元素（日期、按钮）沉底对齐。
• 标题行数全版块统一：要么全部单行省略（nowrap＋ellipsis），要么全部两行钳制；同一版块内不混用，不允许一行、两行的卡片出现在同一行。
• 固定高度的标题 / 描述，height 必须是行高的整数倍：15px×1.5 取 45px（不得取 44px）、13.5px×1.5 取 41px、11px×1.4 取 31px——差 1px 也会裁掉下伸笔画（赢 / 藏 / 置）。
• 同版块图片比例统一：aspect-ratio 写死（推荐卡 16/9、专题 16/10、横滑卡 16/10），object-fit:cover；图片加载失败时底色占位，比例不塌。
• 叠加元素必须给底层留避让位：轮播圆点、角标等压在标题 / 图片上的元素，底层文字须预留 padding（轮播标题 padding-right:70px 给圆点让位），不允许文字被盖住。
• 新卡片版块先定三件套再写样式：aspect-ratio、标题行数（1 行或 2 行）、底部元素沉底；改字号 / 行高时同步检查固定 height 是否仍是整数倍。

反例：为"透气"给同行卡片写不同 min-height 人为制造错落；在标题上叠圆点又不留避让——这两类一律视为违反本规范。

留白与圆角 · 紧凑标准

信息密度优先：卡片呼吸感靠「小留白＋强对齐」，不靠大 padding。首页与文章页同一标准：

• 卡片内顶部留白统一 8px——卡片上沿到首个元素的距离一律 8px，不随卡片类型浮动。覆盖：首页版块卡、软件推荐卡标题（图下方）、横滑卡标题（图下方）、快捷入口、常用入口、横幅；文章页文末卡（文章推荐 / 公告 / 标签推荐）、目录面板、折叠面板头。
• 卡片圆角统一 12px（Token --qj-radius-card）。
• 只收紧顶部：底部 / 左右 padding 保持原值不动，避免版块之间挤成一团。
• 例外：专题卡标题为底部叠加（非顶部留白）；列表行、按钮、页面容器不是卡片，不在此列。