纯HTML+CSS可实现清新文艺风404页：用body/main语义结构、系统细字体栈、低饱和冷色调（如#4a6fa5）、3.5rem轻量标题、hover透明度动效及极简浮动插画，全程克制删减。
直接用纯 HTML + CSS 就能做出清新文艺感的 404 页面，不需要框架、不依赖 JS，关键在留白、字体、配色和微动效的克制使用。
用 body 和 main 搭结构，别套 Bootstrap 样式
文艺感最怕“满”和“重”。避免用现成 UI 框架的默认 404 模板（比如带大按钮+图标+三行文案那种），从语义化标签起步：
-
body只设一个柔和背景色，比如#f8f9fa或极浅灰蓝#f0f4f8 -
main作为内容容器，用max-width: 600px限宽，居中 + 上下留白 - 标题用
h1，但去掉默认粗体和 margin，改用font-weight: 300和line-height: 1.4 - 避免用
div class="container"这类无意义包装——多一层就多一分“模板感”
选对字体：优先用系统自带的「细而有呼吸感」字体栈
加载自定义字体（比如 Google Fonts）容易拖慢首屏，也增加部署复杂度。文艺风更吃系统字体的质感：
- Mac 上用
-apple-system, BlinkMacSystemFont，Win 上用"Segoe UI"，再 fallback 到system-ui - 完整声明示例：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui; - 字号别小气：标题用
3.5rem，副文用1.25rem，行高统一设为1.6 - 绝对不要用
font-weight: bold，400或300才显轻盈
加一点“不动声色”的动效：只动 :hover 和 @keyframes 的透明度与位移
文艺 ≠ 静态，但动效必须收敛。404 页面不是 Landing Page，用户停留时间短，动效只为唤起一丝情绪：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 返回链接用
opacity: 0.7初始状态，:hover升到1，加transition: opacity 0.3s ease - 如果放一个极简插画（比如单线描边的月亮或云朵），可用
@keyframes float做 ±4px 的缓慢上下浮动，时长设6s，ease-in-out - 禁用所有旋转、缩放、颜色突变——这些会破坏静谧感
- 动效只作用于非核心元素；数字
404本身坚决不动
配色控制在三种以内，主色用低饱和冷调
高饱和暖色（如亮橙、明黄）会立刻把页面拉回“运营风”。文艺感靠的是色相弱、明度高、彩度低的组合：
- 主色推荐：
#4a6fa5（灰蓝）、#6b7280（石墨灰）、#e2e8f0（云灰） - 文字用深灰而非纯黑：
#334155比#000000更柔和 - 背景和文字对比度要 ≥ 4.5:1（可用 Chrome DevTools 的无障碍面板检查）
- 别加渐变背景——纯色最干净；若真想加，仅限
background: linear-gradient(to bottom, #f1f5f9 0%, #e2e8f0 100%)这种极淡过渡
真正难的不是代码，是删减：删掉多余字体、删掉冗余动画、删掉装饰性图标、删掉“点击即跳转”的强引导。文艺感藏在克制里，而不是堆砌里。
