政府网站必须采用语义化HTML结构（如header/nav/main/aside/footer）替代table布局，用Flex/Grid实现响应式，禁用absolute做常规定位，以保障无障碍访问、SEO和多端适配。
政府网站必须兼顾语义正确、无障碍可访问、多端适配和内容权威性，不能靠视觉“堆效果”。用 table 做整体布局、滥用 position: absolute 控制模块位置、忽略 main 和 nav 等语义标签，是上线后被通报整改的高频原因。
为什么不能用 table 做页面主结构
表格标签的语义是「二维数据关系」，不是「让元素横平竖直」。政府网站需通过屏幕阅读器被视障用户完整获取信息流，而 只在「容器级」设 可以，但要控制粒度。首页顶部通栏（Banner）、政策速递卡片区、服务入口矩阵这类「区域明确、行列清晰」的模块，用 将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。 仅限脱离文档流的浮层类组件：右下角「在线客服」按钮、表单提交后的提示弹窗、地图上的信息气泡。把它用于「把搜索框钉在右上角」或「让页脚永远贴底」，是危险操作。 真正难的不是写出三栏布局，而是让「政策解读」栏目在 NVDA 屏幕阅读器里按「标题→摘要→附件下载」顺序朗读，同时在 320px 宽手机上不出现横向滚动条——这两件事，都藏在语义标签和 Flex/Grid 的组合细节里，而不是某个炫酷 CSS 动画中。 会强制按行列顺序读取，打乱逻辑层级（比如把页脚内容插进中间一列里）。搜索引擎也会降权——它识别出你用
包裹了「政务公开」栏目，但无法判断这是导航还是数据报表。
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 切换 classGrid 布局该不该用在首页大屏
display: grid 比 Flex 更直观；但整页从 header 到 footer 全套 Grid，反而增加维护成本。
grid-template-columns: 240px 1fr 320px，比 grid-template-areas 更易调整列宽和响应式断点gap: 16px 替代子项 margin，避免父子 margin 合并导致间距翻倍.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% 下是否遮挡文字
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
