用 CSS Grid 实现楼层平面图应以网格线锚定科室位置，用 data-dept-id 统一管理科室标识，单数据源驱动楼层切换与 UI 同步，强化无障碍支持（aria-label、role="gridcell"、tabindex），避免硬编码 URL 和绝对定位。
用 CSS Grid 布局实现楼层平面图，别用绝对定位硬拖
绝对定位写科室位置看着快，但一换屏幕尺寸、一楼层加个新诊室，整个布局就错位。真正靠谱的做法是把每层楼当作一个 grid 容器，用行列线定义固定坐标区域。
比如一层门诊大厅设为 grid-area: "hall"，B超室占两列设为 grid-area: "ultrasound / 2 / 4 / 3"（起始行/列/结束行/列），所有科室位置由网格线锚定，缩放或响应式时自动对齐。
- 避免用
top/left手动计算像素值——改一个科室就得重算全部 - 楼层切换时只替换
grid-template-areas字符串，不用重写 HTML 结构 - IE11 不支持
grid-area的斜杠语法，如需兼容，改用grid-row+grid-column分开写
点击科室跳转到对应医生列表，用 data-* 属性传参而不是写死 URL
很多实现直接给每个科室 <a href="doctors.html?dept=cardiology">，结果一改科室英文名或后端路由，全得手动搜替换。更稳的方式是用 data-dept-id 绑定内部标识符，跳转逻辑收口在统一 JS 里。
示例：<div class="room" data-dept-id="dept-004" data-dept-name="心内科">心内科</div>，点击时读取 dataset.deptId，再查映射表生成真实 URL 或触发 SPA 路由。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
data-dept-id应与医院 HIS 系统科室编码一致，避免前端自编一套 ID - 不要把科室名称拼进 URL 作参数（如
?name=放射科），中文易乱码，且搜索/分享时不可靠 - 如果页面本身是静态 HTML，可预渲染医生列表片段，用
display: none隐藏，点击再show()，省去额外请求
楼层切换按钮状态同步不靠 classList.toggle，用单数据源驱动
常见 bug 是点“2F”按钮高亮了，但平面图没切过去；或者切过去后，“3F”按钮还残留 active 样式。根源在于按钮状态和视图状态各自维护，不同步。
正确做法是声明一个 currentFloor 变量（或用 localStorage 持久化），所有操作都先更新它，再批量更新 UI：按钮的 aria-pressed、当前楼层图的 visibility、URL hash（如 #floor=2）。
- 监听
hashchange事件，从 URL 恢复初始楼层，保证刷新后状态不丢 - 禁用原生
<button>的默认 focus 样式（outline: none），否则键盘导航时用户找不到焦点在哪 - 移动端慎用
click事件监听楼层按钮——iOS Safari 对快速双击有 300ms 延迟，改用touchstart并preventDefault()
无障碍访问被忽略最多的三个点：楼层图无文字替代、科室名没语义化、键盘无法顺序跳转
科室导航页常被当成“纯展示”，但视障用户依赖屏幕阅读器理解空间关系。一张没有 alt 或 aria-label 的楼层 SVG，读出来就是“图片”，他们不知道 B 超室在左上角还是右下角。
必须做三件事：给楼层图加 aria-labelledby 指向标题；每个科室容器用 <button> 而非 <div>，并设 aria-describedby 关联简介；用 tabindex="0" 确保键盘 Tab 键能按视觉顺序遍历科室（不是 DOM 顺序）。
- SVG 内部文字不要用
<text>直接写“CT室”，而要用<title>+<desc>提供结构化描述 - 科室按钮的
aria-label别只写“点击进入”，要包含位置信息，例如"B超室，位于1楼东侧，可预约上午时段" - 如果用了 CSS
display: grid布局，某些旧版读屏器可能跳过隐式网格项，显式加role="gridcell"更稳妥
实际交付时最容易漏的是键盘焦点管理——用户按 Tab 进入楼层图后，焦点卡在第一个科室，但按 Shift+Tab 却退回到地址栏，中间没有“返回上一层”或“查看楼层说明”的入口。这个细节不测试根本发现不了。
