用语义化标签（header/nav/article/footer）配合flex和grid可构建专业、可维护、响应式的SaaS首页；header用flex实现逻辑分组对齐，功能区依结构选grid或flex，价格区用article而非table，footer需语义化分组确保无障碍。
直接用 flex + grid 搭配语义化标签就能做出专业、可维护、响应式的 SaaS 首页，不需要 JS 控制结构，也不该用 table 或 position: absolute 堆砌。
header 区域怎么固定主标题+按钮+导航对齐
关键不是“居中”，而是让 logo、导航项、CTA 按逻辑分组并保持视觉权重清晰。常见错误是把所有东西塞进一个 div 然后靠 text-align: center 或 float 强行排布，结果移动端一缩就错位。
- 用
<header>包裹整体，内部嵌套<nav>和独立的 CTA 容器（比如<div class="cta-group">） - 给
<header>设display: flex+justify-content: space-between，左边放 logo，右边放 nav + CTA - 导航项之间用
margin-left: 1.5rem比用gap更可控（IE11 兼容性好）；CTA 按钮用margin-left: auto推到最右，比text-align: right可靠 - 避免在
<header>上设固定高度——内容字体缩放或换语言（如中文变长）时会溢出
功能模块区用 grid 还是 flex
三栏图文介绍（图标+标题+短描述）这类重复结构，grid 是更自然的选择；但如果是「主功能区 + 侧边客户评价」这种不对称组合，flex 更轻量、更易控制宽度比例。
- 纯卡片列表：用
display: grid+grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，自动适配列数，不用写媒体查询 - 主内容+侧边栏：用
display: flex，主区域flex: 1，侧边栏flex: 0 0 280px，再加min-width: 0防止长 URL 把容器撑爆 - 别在 grid 容器里混用
float或absolute子项——它们不参与网格轨道计算，调试时会消失不见
价格套餐对比表为什么不能用 table
<table> 的语义是“二维数据关系”，而价格卡片本质是平行的功能模块，不是行列强关联的数据集。用 table 会导致响应式断裂、无障碍阅读顺序混乱、样式覆盖成本高。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
<section>包裹整个价格区，每个套餐用<article>，内部结构保持一致（<h3>标题、<ul>特性列表、<button>CTA） - 横向排列用
display: flex，移动端切flex-direction: column；每张卡片设flex: 1+max-width: 360px防止单张过宽 - 突出推荐款？不要删 HTML 或加
display: none，改用border: 2px solid #007bff+transform: scale(1.02)视觉强化，语义和结构完全保留
footer 怎么塞进联系方式又不破坏语义
页脚不是“随便堆信息的地方”，它需要明确表达归属、法律和联络意图。硬塞一堆 <div> + <p> 会让屏幕阅读器读成一串无结构文本。
- 用
<footer>作为根容器，内部按逻辑分组：<address>包含公司地址和邮箱（语义上表示“联系人”），<nav aria-label="Legal links">放隐私政策、服务条款等 - 社交图标用
<ul class="social-links">，每个<li>包一个带aria-label的<a>，别用图片或 icon font 代替可访问文本 - 避免在
<footer>里写position: absolute拉底——父容器高度塌陷时，它会盖住上面的内容；用margin-top: auto配合 flex 布局更稳妥
真正难的不是写出能看的首页，而是让结构在缩放 200%、禁用 CSS、只用键盘导航时依然成立。语义标签不是装饰，flex 和 grid 的值也不是魔法数字——它们都得对得上内容的逻辑层级和用户的真实操作路径。
