分页导航设计核心是清晰传达位置与状态，须用语义化HTML（nav+ul+li）、Flex布局、完整交互状态样式及足够点击热区。
分页导航的样式设计，核心不是“怎么好看”，而是“怎么让用户一眼看清当前在哪、能点哪、点了有什么反馈”。布局结构没理清，再 fancy 的 CSS 也救不了交互混乱。
用 nav + ul 而不是一堆 div
很多项目直接用 div 套 span 拼分页，结果键盘用户按 Tab 键跳不过去，屏幕阅读器读不出这是导航，SEO 也忽略它。语义错误会直接导致可访问性失效。
-
nav必须包裹整个分页区域，并加上aria-label="Pagination" -
ul是唯一推荐的容器，li包每个页码项（包括“上一页”“下一页”） - 避免
nav > div > ul这类冗余嵌套，nav下直接跟ul就够了 - 当前页用
class="active"，同时加aria-current="page"属性，这是屏幕阅读器识别当前页的关键
Flex 布局控制排列，别碰 float 或 inline-block
老式 float: left 或靠 display: inline-block + 负 margin 对齐，容易在小屏或字体缩放时错位，且无法响应式居中。Flex 是目前最稳的方案。
-
.pagination { display: flex; justify-content: center; }—— 居中对齐，不依赖外层容器 - 用
gap: 8px控制间距，比margin更干净（不用处理首尾边距） - 禁用项（如第一页时“上一页”不可点）用
pointer-events: none+opacity: 0.5，而不是只改颜色 - 移动端下，
gap可配合@media (max-width: 480px)缩小到4px，避免拥挤
链接状态样式必须区分三类：默认、悬停、激活
只给 .active 加背景色，其他状态全靠默认，用户根本分不清哪是可点、哪是当前、哪是禁用。CSS 伪类必须覆盖完整状态链。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
.pagination a:not(.active):hover—— 悬停时有明确视觉变化（比如背景色+边框色同步变） -
.pagination a.active—— 不仅背景色不同，文字颜色也要反白或高对比，确保 WCAG AA 合规 -
.pagination a:disabled或.disabled a—— 必须设cursor: not-allowed，并降低 opacity，不能只靠灰度 - 所有交互状态都要加
transition: background-color 0.2s, color 0.2s，生硬跳变会破坏操作感
箭头按钮和省略号的 HTML 写法很关键
“«”“»”“…” 这些符号如果直接写进 HTML，可能被截断、缩放失真，或在高 DPI 屏幕上模糊。它们不是装饰，是功能按钮。
- “上一页”“下一页”必须是
a标签，带href="#"或href="javascript:void(0)"，不能用span - 箭头符号建议用 Unicode 字符（如
«、»），或 SVG 内联，避免字体缺失问题 - 省略号
…必须包裹在li中，且加aria-hidden="true"，防止屏幕阅读器误读为“三点” - 如果页码太多（比如 1–50），动态生成时用 JS 插入省略号节点，不要硬编码在 HTML 里
最容易被忽略的是：分页按钮的点击热区。很多团队只设了 padding: 6px 12px，但在触屏设备上，这个尺寸远低于 48×48px 的最小可点击区域标准。实际部署前，务必用 Chrome DevTools 的「Sensors」面板切到移动模拟模式测一测真实点击体验。
