简介这是一套面向前端初学者与电商项目练习者的完整H5商城静态界面源码基于HTML5、CSS3与JavaScript构建重点解决移动端电商页面视觉还原与布局练习的需求。资源包共289个文件包含156张png与34张jpg图片素材、31个js脚本、19个css样式表、16个html页面以及15个psd设计稿和若干map、txt等辅助文件压缩包约98.76MB覆盖首页、商品详情、分类浏览、购物车、个人中心与支付流程等核心模块。其中CSS文件涉及轮播、商品列表、购物车、用户中心等页面样式JS负责交互逻辑PSD便于二次修改设计。已有763人学习下载适合作为前端练手项目帮助读者理解响应式布局、组件化结构与页面间跳转关系快速搭建可复用的商城前端骨架。1. 完整的h5商城样式静态界面从切图到可交付的落地路径很多前端同学接到「完整的h5商城样式静态界面」这类需求时第一反应是打开编辑器直接写 HTML结果写到商品详情页就发现样式互相污染、单位混乱、真机上字体忽大忽小。这个标题说的不是某个具体项目而是一类高频交付物一套不依赖后端接口、纯静态资源就能在手机浏览器里跑起来的商城前端骨架覆盖首页、分类、商品列表、商品详情、购物车、个人中心这几个核心页面。它解决的是「后端还没好、设计稿已定稿、老板要看效果」这段空窗期的交付问题适合前端新手练手、外包快速出原型、也适合作为组件库或模板的起点。静态不等于简陋真正难的是把移动端适配、样式隔离、图标方案、页面切换这四件事一次性做对后面接真实数据时才不用推倒重来。2. 移动端适配与目录结构先把地基打对再写样式2.1 为什么 rem viewport 仍是静态商城的稳妥选择移动端适配方案这几年换了好几茬vw、rem、px 媒体查询都有人用。做静态商城界面我一般会选 rem 配合动态根字号原因是它和设计稿的换算关系最直观设计稿宽度通常是 750px只要把根字号设成「屏幕宽度 / 7.5」那么设计稿上量到的 100px 直接写 1rem 就行切图时不用心算。vw 方案虽然更纯粹但在部分老版本安卓 WebView 里对 vw 的支持有坑静态页面往往要投放到各种环境稳妥优先。核心思路是用一段极短的脚本根据设备宽度设置html的font-size同时给根字号设上下限避免在超大屏平板上元素被拉得离谱。下面这段脚本放在head里越早执行越好防止页面先按默认字号渲染再跳变。// 动态设置根字号设计稿基准宽度 750px (function () { var docEl document.documentElement; var designWidth 750; // 设计稿宽度 var maxWidth 640; // 最大适配宽度超过按 640 算防止平板拉伸 function setRootFontSize() { var clientWidth docEl.clientWidth; if (!clientWidth) return; // 超过最大宽度时锁定保证大屏观感 var width Math.min(clientWidth, maxWidth); // 根字号 屏幕宽度 / (设计稿宽度 / 100) // 即设计稿 100px 对应 1rem docEl.style.fontSize (width / (designWidth / 100)) px; } setRootFontSize(); // 监听旋转和窗口变化重新计算 window.addEventListener(resize, setRootFontSize); window.addEventListener(orientationchange, setRootFontSize); })();逻辑说明designWidth / 100得到换算比例750 的设计稿就是 7.5屏幕宽 375 时根字号为 50px此时设计稿上 100px 的元素写成 1rem 正好是 50px视觉上等比缩放。参数说明designWidth改成你实际设计稿宽度即可maxWidth是防拉伸上限做纯手机端可以设成 640如果明确要兼容平板可以调大或去掉。注意这段脚本必须内联在 head 中外链会因加载顺序导致首屏抖动。2.2 目录结构怎么分才能让静态页面不变成一锅粥静态商城页面多、样式多目录一旦乱改一个按钮颜色要翻五个文件。我习惯按「页面 公共」两层来分公共层再拆成变量、重置、组件。下面这套结构在多个静态项目里验证过接后端时也容易迁移到构建工具。h5-mall-static/ ├── index.html # 首页 ├── category.html # 分类页 ├── list.html # 商品列表页 ├── detail.html # 商品详情页 ├── cart.html # 购物车 ├── user.html # 个人中心 ├── css/ │ ├── reset.css # 样式重置统一各浏览器默认值 │ ├── variable.css # 颜色、字号、间距变量 │ ├── common.css # 公共组件按钮、标签、导航栏 │ └── page/ │ ├── index.css │ ├── detail.css │ └── ... ├── js/ │ ├── flexible.js # 上面那段根字号脚本 │ └── common.js # 公共交互返回顶部、tab 切换 ├── images/ # 切图资源 └── iconfont/ # 字体图标逻辑说明variable.css用 CSS 自定义属性集中管理主色、圆角、间距改主题只动一个文件page/下每个页面一个样式文件避免首页样式污染详情页。参数说明如果项目要打包这套结构可以直接映射到 webpack 或 vite 的多入口配置不用重构。注意reset.css不要用网上那种几百行的重型重置移动端只需要清 margin、padding、设box-sizing: border-box、去掉列表样式即可写多了反而增加维护成本。2.3 用 CSS 变量统一视觉改主题不用全局搜索替换静态界面最怕设计改稿主色从橙红改成品牌蓝如果颜色散落在几十个文件里就是一场灾难。用 CSS 自定义属性把颜色、字号、圆角抽出来是成本最低的解法。/* variable.css */ :root { --color-primary: #ff5000; /* 主色改这里全局生效 */ --color-text: #333333; /* 主文字 */ --color-text-light: #999999;/* 次要文字 */ --color-bg: #f5f5f5; /* 页面背景 */ --radius-base: 0.16rem; /* 基础圆角 */ --gap-base: 0.2rem; /* 基础间距 */ --font-sm: 0.24rem; /* 小号字 */ --font-base: 0.28rem; /* 正文 */ --font-lg: 0.32rem; /* 标题 */ }逻辑说明:root上的变量全局可访问任何页面样式里写color: var(--color-primary)即可。参数说明字号用 rem 是为了跟随根字号缩放间距同理圆角用 rem 而非 px保证大屏上圆角比例协调。注意变量命名要有语义别用--red这种改主题时--color-primary一眼就知道该改哪个。3. 核心页面骨架首页、列表、详情三件套怎么写3.1 首页轮播、金刚区、商品流的布局要点首页是静态商城的门面结构上通常是顶部搜索栏、轮播图、分类金刚区、限时秒杀、商品瀑布流。静态页面里轮播不需要引第三方库用overflow: hidden加transform手写一个自动轮播就够减少依赖。金刚区是两行五列的图标网格用 flex 换行最省事。!-- 首页核心结构 -- div classpage-index !-- 搜索栏 -- header classsearch-bar div classsearch-input搜索商品/div /header !-- 轮播 -- div classbanner div classbanner-track idbannerTrack img srcimages/banner1.jpg alt img srcimages/banner2.jpg alt img srcimages/banner3.jpg alt /div div classbanner-dots idbannerDots/div /div !-- 金刚区两行五列 -- nav classgrid-nav a classgrid-item hreflist.html img srcimages/nav1.png alt span手机数码/span /a !-- 其余九项省略 -- /nav !-- 商品流 -- section classgoods-flow div classgoods-card img srcimages/goods1.jpg alt p classgoods-title商品名称占位/p p classgoods-price99.00/p /div /section /div逻辑说明轮播用banner-track横向排列图片JS 定时改transform: translateX()实现切换金刚区用 flex 布局flex-wrap: wrap配合每项width: 20%自动排成五列。参数说明轮播切换间隔一般 3 秒太快看不清、太慢显得卡金刚区图标尺寸建议 0.8rem 左右配 0.24rem 文字。注意图片一定要设width: 100%和display: block否则 img 默认行内元素会带底部间隙这是新手最常见的翻车点。3.2 商品列表页双列瀑布流与筛选栏列表页的核心是双列商品卡和顶部筛选栏。双列布局用 flex 或 grid 都行我倾向 grid因为间距控制更干净。筛选栏做静态时只需要视觉状态点击切换高亮即可。/* 列表页双列网格 */ .goods-list { display: grid; grid-template-columns: repeat(2, 1fr); /* 两列等宽 */ gap: var(--gap-base); /* 卡片间距 */ padding: var(--gap-base); } .goods-list .goods-card { background: #fff; border-radius: var(--radius-base); overflow: hidden; /* 防止图片溢出圆角 */ } .goods-list .goods-card img { width: 100%; display: block; aspect-ratio: 1 / 1; /* 固定正方形避免图片比例不一导致错位 */ object-fit: cover; }逻辑说明grid-template-columns: repeat(2, 1fr)让两列自动等分容器宽度gap统一控制横纵间距比 flex 手动算 margin 省心。参数说明aspect-ratio固定图片比例是关键静态页面图片尺寸不统一时不固定比例会导致卡片高度参差视觉很乱object-fit: cover保证图片裁剪填充不变形。注意aspect-ratio在很老的安卓上有兼容问题如果目标环境偏旧改用 padding-top 百分比占位法。3.3 商品详情页主图区、规格选择、底部操作栏详情页结构最复杂典型布局是顶部主图、中部商品信息、规格选择弹层、底部固定操作栏。底部栏用position: fixed固定在视口底部同时给页面主体加padding-bottom防止内容被遮挡这是必须成对出现的操作。/* 详情页底部操作栏 */ .detail-footer { position: fixed; left: 0; right: 0; bottom: 0; height: 1rem; display: flex; align-items: center; background: #fff; border-top: 1px solid #eee; /* 适配 iPhone 底部安全区 */ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .detail-main { /* 给底部栏留出空间数值略大于底部栏高度 */ padding-bottom: 1.2rem; }逻辑说明fixed定位让操作栏始终可见padding-bottom用env(safe-area-inset-bottom)适配全面屏底部横条不加的话按钮会被横条压住。参数说明底部栏高度 1rem 对应设计稿 100px主体 padding 给 1.2rem 留出余量。注意constant()和env()要写两遍前者兼容旧版 iOS后者是新标准顺序不能反。4. 图标、字体与图片静态资源的三个高频坑4.1 字体图标 vs SVG静态商城怎么选商城界面里购物车、搜索、返回、客服这些图标用量大方案无非三种切图 PNG、字体图标、内联 SVG。PNG 在 retina 屏上容易糊且改色要重新导出字体图标改色方便、体积小但多色图标支持差SVG 最灵活支持多色和任意缩放缺点是内联进 HTML 会让结构变长。我的选择是单色图标用字体图标多色或复杂图标用 SVG。字体图标引入后用::before伪元素加 unicode 即可改色直接改color。/* 字体图标基础用法 */ font-face { font-family: mall-icon; src: url(../iconfont/mall-icon.woff2) format(woff2); font-display: swap; /* 字体加载期间先用系统字体避免图标闪烁 */ } .icon { font-family: mall-icon; font-style: normal; font-size: 0.4rem; color: var(--color-text); } .icon-cart::before { content: \e601; } /* unicode 对应购物车图标 */逻辑说明font-display: swap让图标字体加载失败或延迟时页面先用系统字体渲染不会出现长时间空白。参数说明content里的 unicode 要和字体文件里定义的编码一致这个值在生成字体图标时确定。注意字体图标文件要放本地静态页面引外部 CDN 一旦网络波动图标全变方块这是血泪经验。4.2 图片懒加载与占位静态页面也要做静态页面图片多一次性全加载会让首屏很慢。用原生loadinglazy是最省事的懒加载方案配合固定宽高比占位避免图片加载完成后页面跳动。img srcimages/goods1.jpg loadinglazy width375 height375 alt商品图 stylewidth:100%;height:auto;逻辑说明loadinglazy让浏览器在图片接近视口时才加载减少首屏请求width和height属性给出原始比例浏览器据此预留空间防止布局偏移。参数说明width/height写设计稿实际像素即可CSS 里用百分比覆盖显示尺寸。注意loadinglazy对首屏图片不要用否则反而延迟首屏渲染首屏图应该正常加载。4.3 图片格式与压缩别让静态包体失控静态商城的图片资源往往占整个包体八成以上。常见做法是照片类用 WebP图标和纯色块用 SVG实在要兼容老环境再退回 JPG。WebP 在同画质下比 JPG 小 25% 到 35%对移动端流量敏感的场景很值。资源类型推荐格式说明商品照片WebP体积小主流移动浏览器已支持图标SVG / 字体图标矢量缩放不糊可改色背景纯色块CSS 渐变不占图片请求兼容兜底JPG用picture做格式回退逻辑说明用picture标签可以同时提供 WebP 和 JPG浏览器自动选支持的格式。参数说明压缩质量一般 75 到 85 之间再低肉眼可见噪点。注意不要为了极致压缩把商品图压出块状商城图直接影响转化清晰度优先于体积。5. 避坑与排查静态商城最容易翻车的五个地方5.1 真机上字体忽大忽小现象本地浏览器看着正常真机上文字大小不一致有的页面明显偏大。原因部分安卓浏览器或 WebView 会调整字体大小或者根字号脚本执行时机太晚首屏按默认字号渲染。解决在reset.css里加-webkit-text-size-adjust: 100%禁止系统字体缩放同时确保根字号脚本内联在 head 最前面不要等 DOMContentLoaded。5.2 1px 边框在 retina 屏上变粗现象设计稿上的细分割线在手机上看起来像 2px 甚至 3px。原因CSS 的 1px 在设备像素比 2 或 3 的屏幕上会被放大成物理 2px、3px。解决用transform: scaleY(0.5)配合伪元素画线或者直接用border: none加背景渐变模拟。静态页面里我一般用伪元素方案兼容性好。/* 0.5px 细线方案 */ .hairline-bottom { position: relative; } .hairline-bottom::after { content: ; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #eee; transform: scaleY(0.5); /* 缩放到物理 0.5px */ transform-origin: 0 100%; }5.3 底部固定栏遮挡内容现象详情页底部按钮挡住了最后一段商品描述用户滑到底看不到完整内容。原因只写了position: fixed忘了给主体加底部内边距。解决主体容器加padding-bottom数值等于底部栏高度加安全区高度两者必须成对维护改一个记得改另一个。5.4 轮播图切换时页面抖动现象轮播自动切换时整个页面轻微上下跳动。原因轮播容器高度由图片撑开图片未加载完时高度为 0加载后撑开导致布局变化。解决给轮播容器设固定高度或固定宽高比图片用object-fit: cover填充容器高度不依赖图片实际尺寸。5.5 点击态在 iOS 上不生效或出现灰色块现象按钮点击没有反馈或者 iOS 上点一下出现半透明灰色遮罩。原因移动端:hover不可靠且 iOS 默认给可点击元素加高亮。解决用:active做点击态并在全局加-webkit-tap-highlight-color: transparent去掉默认高亮再自己用:active定义背景变化。6. 从静态到可维护一套自检清单和交接习惯静态界面交付前我有一套固定的自检动作能挡掉八成返工。第一在 375、414、360 三个常见宽度下各看一遍重点看金刚区是否换行错位、底部栏是否遮挡。第二把所有页面的控制台打开确认没有 404 资源请求静态页面最怕图片路径写错本地能看是因为缓存换台机器就白屏。第三用浏览器设备模拟里的「慢速网络」跑一遍看首屏是否出现大面积空白图片懒加载和字体图标是否正常降级。第四检查所有可点击元素的点击区域移动端建议不小于 0.8rem太小的按钮手指点不准。交接时我会额外做一件事把variable.css里的变量整理成一张对照表写清每个变量控制什么交给后端或下一个接手的人。这样设计改稿时对方不用问我就能自己改主色。下面这张表就是模板。变量名控制内容典型值--color-primary主色、按钮、价格#ff5000--color-text正文文字#333333--radius-base卡片圆角0.16rem--gap-base卡片间距、页面边距0.2rem--font-base正文字号0.28rem还有一个容易被忽略的技巧静态页面里的交互状态选中、禁用、加载中最好一次性写全别等接后端时再补。比如规格选择弹层里的「已选中」状态静态阶段就用一个.is-active类写好样式接数据时只需要切换类名不用再动 CSS。我吃过这个亏早期做静态只画了默认态接接口时发现选中态、禁用态、售罄态全要补等于把样式重写一遍。最后说个习惯每写完一个页面我会把该页面的样式文件从头到尾读一遍删掉没用上的选择器和重复定义。静态商城页面多样式冗余积累起来很吓人一个按钮样式在三个文件里各写一遍改的时候漏掉一个就出现视觉不一致。保持每个页面样式文件干净是这套静态界面能长期维护的前提。希望帮到你。本文还有配套的精品资源点击获取