必须用 flex 布局并为每个导航项单独包裹容器，禁用 margin/top 实现上浮，改用 transform 过渡，同时兼顾 touch 设备兼容与 flex 项防压缩。

直接用 nav 里套 li + a 做横向导航，再硬加卡片悬浮效果，大概率会出视觉错位、阴影被截断、hover 不触发等问题。核心矛盾在于：传统横向导航依赖 float 或 display: inline-block，而卡片悬浮需要容器具备独立的 border-radius、overflow: hidden 和可控的 transform 空间——这两套布局逻辑天然冲突。

必须用 flex 容器包裹每个导航项

别把 hover 效果直接写在 a 标签上，它没有自己的渲染边界。每个导航链接得包一层 div 或 span，作为卡片载体：

<nav class="nav"><div class="nav-item"><a href="#home">首页</a></div>
  <div class="nav-item"><a href="#about">关于</a></div>
  <div class="nav-item"><a href="#contact">联系</a></div>
</nav>

• nav 设 display: flex，控制整体横向排列
• 每个 .nav-item 是独立卡片容器，设 border-radius: 6px、overflow: hidden、box-shadow
• a 标签只负责内容和点击，不参与造型；它的 display: block 和内边距决定可点区域大小

hover 动效必须禁用 margin-top / top

用 margin-top: -4px 或 top: -4px 实现“上浮”，会触发重排（reflow），尤其在导航项较多或字体加载中时，hover 瞬间卡顿明显。正确做法是：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 给 .nav-item 加 transform: translateY(0) + transition: transform 0.25s ease, box-shadow 0.25s ease
• .nav-item:hover 改为 transform: translateY(-3px) + 更强的 box-shadow
• 避免同时改 height 或 padding，它们都会导致重排

移动端悬停失效？得加 touch 兼容层

iOS Safari 和部分安卓 WebView 中，:hover 在触摸设备上默认不触发（除非模拟鼠标事件）。如果希望手指轻点也能看到卡片反馈：

• 给 .nav-item 加 cursor: pointer（提升可感知性）
• 在 JS 中监听 touchstart，临时加一个 .is-active 类，样式同步复刻 :hover 规则
• 或者更简单：用 @media (hover: hover) 区分支持 hover 的设备，对不支持的设备降级为常驻轻微阴影（不依赖交互）

最易忽略的是卡片间距与容器宽度的关系——flex 容器若没设 gap 或子项没设 flex-shrink: 0，缩放页面时卡片可能被压缩变形，导致圆角失效或阴影错位。务必确认 .nav-item 有 flex: 0 0 auto。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！