政府网站必须采用语义化HTML结构（如header/nav/main/aside/footer）替代table布局，用Flex/Grid实现响应式，禁用absolute做常规定位，以保障无障碍访问、SEO和多端适配。
政府网站必须兼顾语义正确、无障碍可访问、多端适配和内容权威性，不能靠视觉“堆效果”。用 table 做整体布局、滥用 position: absolute 控制模块位置、忽略 main 和 nav 等语义标签，是上线后被通报整改的高频原因。
为什么不能用 table 做页面主结构
表格标签的语义是「二维数据关系」，不是「让元素横平竖直」。政府网站需通过屏幕阅读器被视障用户完整获取信息流，而 <table> 会强制按行列顺序读取，打乱逻辑层级（比如把页脚内容插进中间一列里）。搜索引擎也会降权——它识别出你用 <code><tr><td> 包裹了「政务公开」栏目，但无法判断这是导航还是数据报表。
<ul>
<li>实际后果：W3C 验证失败、WCAG 2.1 AA 级不达标、部分省级政务平台审核直接驳回</li>
<li>替代方案：用 <code>header + nav + main + aside + footer 构建骨架，再用 CSS 控制排列
display: flex（加 -ms- 前缀），别退回到 float 清除浮动那套
display: flex 用在哪一层最稳妥
只在「容器级」设 display: flex，比如整个页面主体区域（main）、导航栏（nav）、栏目卡片组。别在 p 或 span 上乱加——它们不是容器，加了也无效。
- 常见错误：
.content-box { display: flex; }但子元素没设flex: 1或width，结果所有文字挤在左上角 - 侧边栏固定宽+主内容自适应写法：
.layout { display: flex; } .sidebar { flex: 0 0 240px; } .main-content { flex: 1; min-width: 0; }——min-width: 0很关键，否则长 URL 或中文不换行会撑破容器 - 移动端堆叠：用
@media (max-width: 768px) { .layout { flex-direction: column; } }，别依赖 JS 切换 class
Grid 布局该不该用在首页大屏
可以，但要控制粒度。首页顶部通栏（Banner）、政策速递卡片区、服务入口矩阵这类「区域明确、行列清晰」的模块，用 display: grid 比 Flex 更直观；但整页从 header 到 footer 全套 Grid，反而增加维护成本。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
grid-template-columns: 240px 1fr 320px，比grid-template-areas更易调整列宽和响应式断点 - 注意 gap：
gap: 16px替代子项margin，避免父子 margin 合并导致间距翻倍 - IE11 不支持 Grid？那就给
.homepage-grid加 fallback：display: -ms-grid; -ms-grid-columns: 240px 1fr 320px;，现代浏览器自动覆盖
绝对定位（position: absolute）只允许出现在哪
仅限脱离文档流的浮层类组件：右下角「在线客服」按钮、表单提交后的提示弹窗、地图上的信息气泡。把它用于「把搜索框钉在右上角」或「让页脚永远贴底」，是危险操作。
- 致命问题：父容器没设
position: relative，元素会相对 viewport 定位，缩放或滚动时错位 - 替代方案：搜索框放
header里用margin-left: auto推到右侧；页脚贴底用 Flex 的flex-direction: column+margin-top: auto - 如果真要用，务必加
inset: 16px（Safari 15.4+）或拆成top: 16px; right: 16px;，并测试 zoom 125% 下是否遮挡文字
真正难的不是写出三栏布局，而是让「政策解读」栏目在 NVDA 屏幕阅读器里按「标题→摘要→附件下载」顺序朗读，同时在 320px 宽手机上不出现横向滚动条——这两件事，都藏在语义标签和 Flex/Grid 的组合细节里，而不是某个炫酷 CSS 动画中。
