适用场景与信息架构半年之前你也许用 float、绝对定位和表格堆出过一个“能看”的电商首页；半年之后要加一个频道、做一次促销皮肤，页面就被牵一发而动全身。本文聚焦“可维护、可扩展”的电商首页实现：不追求像素级还原大厂视觉，而是在可控投入下，拿到清晰的信息架构、稳健的布局策略和可复用的样式骨架。适合读者与场景：需要从零搭一个电商站点首页（作业/项目起步），要求后续好维护。老页面用表格/float 写成，准备迁移到现代布局（Flex/Grid）。小团队/个人项目，无复杂构建工具也要能落地。首页的常见信息区块（建议的语义化结构）：header：顶部条（欢迎语/登录注册/购物车）、Logo、搜索框nav：主导航（频道/分类，可下拉或分组）main：hero/banner：活动位或渠道入口categories：频道/类目入口宫格products：今日推荐/人气好物（卡片栅格）footer：帮助、版权、备案等布局与样式的决策框架很多“难维护”的根因不是 CSS 写得不够多，而是决策点选错了。下面这张对比表，基本能涵盖首页常见的 80% 决策场景。历史做法推荐做法何时保留历史做法主要风险/成本用 table 做布局用 CSS Grid/Flex 布局仅当展示“真正的表格数据”结构与样式耦合，改一处崩全局大量 float 清除浮动Flex 一维、Grid 二维兼容极老旧浏览器（需业务允许）复杂性高、对齐困难、易塌陷绝对定位摆放搜索框等自然文档流 + gap + 对齐标注为“悬浮元素”且需脱离文档流适配断点时重算坐标，维护成本高固定像素宽度（px）流式宽度 + clamp + minmax需要严格 pixel-perfect 的埋点区失去响应式，移动端体验差fixed 导航条position: sticky需要“全局悬浮层”效果时仍用 fixedfixed 遮挡内容、层级与位移问题图片直接加载指定尺寸 + lazy loading首屏关键视觉累积布局偏移（CLS）、加载慢样式分散写在页面内组件化命名 + 变量仅做一次性 Demo 时命名冲突、全局污染、难抽象hover 展开二级菜单可点击、可键盘操作桌面端纯指针交互为主的内网工具移动端不可用、无障碍不通过结论很简单：非表格就不要用 table，能 Flex 就别 float，二维栅格用 Grid。固定像素坐标与绝对定位只在确有悬浮需求时使用，其他交给自然流与对齐系统。可运行骨架示例（示例代码）场景：我们需要一个可维护的首页骨架，要求响应式、可访问、有基础可扩展性；无需构建工具，单文件即可预览。示例代码：保存为 index.html 直接打开浏览器查看。!doctypehtmlhtmllang="zh-CN"headmetacharset="utf-8"metaname="viewport"content="width=device-width, initial-scale=1"title示例电商首页/titlestyle/* 设计令牌（CSS 变量） */:root{--brand:#7c3aed;/* 主色 */--brand-ink:#4c1d95;/* 主色深 */--text:#1f2937;/* 正文 */--muted:#6b7280;/* 次要文本 */--bg:#ffffff;/* 背景 */--surface:#f8fafc;/* 卡片背景 */--radius:12px;/* 圆角 */--container:1200px;/* 容器最大宽 */--gutter:16px;/* 栅格间距 */}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--surface)}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.container{max-width:var(--container);margin:0 auto;padding:0 16px}/* 顶部条 */.topbar{background:var(--bg);border-bottom:1px solid #e5e7eb}.topbar__inner{display:flex;align-items:center;justify-content:space-between;min-height:40px;font-size:14px;color:var(--muted)}.topbar__links{display:flex;gap:12px}/* 头部与搜索 */header.site-header{background:var(--bg)}.site-header__inner{display:flex;align-items:center;gap:24px;min-height:72px}.brand{font-weight:700;color:var(--brand-ink);font-size:20px;white-space:nowrap}.search{flex:1;display:flex;gap:8px}.search input[type="search"]{flex:1;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px}.search button{padding:10px 14px;border:0;border-radius:8px;background:var(--brand);color:#fff;cursor:pointer}.search button:hover{background:var(--brand-ink)}/* 导航（移动端折叠，桌面端展开） */nav.primary{background:var(--bg);position:sticky;top:0;z-index:10;border-bottom:1px solid #e5e7eb}.primary__inner{display:flex;align-items:center;justify-content
