★ FEATURED ARTICLE 简介面向前端初学者与需要商城类页面练习项目的开发者这份压缩包提供一套完整H5商城静态界面可用于仿写训练、课程设计、UI还原与组件拆分参考。包内共289个文件以png、jpg图片素材和html页面为主配合js交互脚本、css样式表及psd设计源文件覆盖从视觉稿到页面实现的常见素材压缩包约98.76MB。内容围绕电商前端展示展开包含首页轮播与导航、商品列表与详情、购物车、个人中心、登录注册及结算支付等页面并体现响应式布局、表单验证、过渡动画等H5与CSS3特性便于读者理解多页面站点的结构组织与样式复用方式。已有764人学习下载适合用来对照页面效果梳理HTML结构、CSS布局和JavaScript交互逻辑也可作为二次开发与课堂案例的基础素材。1. 三天交付一个可点击商城原型这份完整的h5商城样式静态界面到底装了什么上周有个做运营的朋友找过来说他们要在一次活动前给合作方看一版手机端商城的可点击原型设计图已经出了但前端排期排不进去。我翻了翻他发来的压缩包是一套完整的h5商城样式静态界面首页、分类、列表、详情、购物车、个人中心六个页面全都在图片是切好的样式是写完的交互脚本也带了基础版。这种包在项目里通常叫“视觉还原包”或者“静态模板”它的价值不在于技术多深而在于替你省掉从零搭骨架的那两三天。适合谁用接私活需要快速出原型的人、刚学移动端想拿一个完整页面练手的人、还有想把页面直接接上接口做二次开发的人。下面我按拿到包之后的真实动作顺序把这套东西拆开讲。2. 解压之后的目录结构从 index.html 到 rem.js 的骨架怎么搭拿到一个静态包我的习惯是先不解压就双击看一眼压缩包内的目录层级因为目录结构往往比任何文档都更能说明作者的工程习惯。这套包的结构是典型的“多页应用 公共资源分层”做法没有构建工具没有 npm 依赖浏览器直接打开就能跑。对原型阶段来说这是优点对二次开发来说也意味着你需要自己决定要不要上构建链。2.1 目录分层与文件职责解压后的目录大致是这样h5-mall-static/ ├── index.html # 首页轮播 金刚区 楼层商品 ├── category.html # 分类页左侧一级分类 右侧二级分类 ├── list.html # 商品列表页排序筛选 双列商品流 ├── detail.html # 商品详情主图、SKU、图文详情、底部购买栏 ├── cart.html # 购物车勾选、数量加减、合计 ├── user.html # 个人中心订单入口、功能宫格 ├── css/ │ ├── base.css # 重置样式、CSS 变量、通用原子类 │ ├── common.css # 头部、底部 tabbar、按钮、弹层 │ └── page/ │ ├── index.css # 首页专属样式 │ └── detail.css # 详情页专属样式 ├── js/ │ ├── rem.js # 750 设计稿的根字号计算 │ ├── common.js # Toast、弹层、防抖等公共方法 │ └── page/ │ ├── index.js # 首页交互 │ └── cart.js # 购物车计算 ├── images/ # 切图与占位图 └── lib/ # 轮播、图标字体等第三方静态资源这个分层的关键在于base.css和common.css的边界。base.css只放重置、变量和全局字体common.css放跨页面复用的组件样式比如底部 tabbar、通用按钮、价格文字。页面级样式单独放page/下避免一个文件改到最后谁也不敢动。我在实际项目里也基本沿用这个划分唯一的调整是会再加一个css/theme.css专门管主题色方便以后换配色。js目录同理rem.js必须最先加载common.js次之页面脚本最后。这个顺序如果乱了页面脚本里读到的根字号就是默认的 16px整个页面尺寸会全部错位这是新手最常见的翻车点之一后面避坑章会展开。2.2 移动端适配viewport、rem 与设计稿换算这套包用的是 750px 设计稿 rem 的方案。index.html的 head 里通常有这两行!-- 禁止用户缩放保证 1px 与设计稿对齐 -- meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno !-- 告诉浏览器页面按 750 设计稿来同时兼容 iOS 刘海屏 -- meta nameformat-detection contenttelephoneno真正干活的是js/rem.js核心逻辑就这么几十行// 以 750px 设计稿为基准让 1rem 100px设计稿像素方便口算 (function (doc, win) { var docEl doc.documentElement; var designWidth 750; // 设计稿总宽 var baseFont 100; // 基准字号0.2rem 就等于设计稿上的 20px function refreshRem() { var clientWidth docEl.clientWidth; if (!clientWidth) return; // 限制最大宽度避免在平板或 PC 上元素被拉得过大 var width Math.min(clientWidth, 750); // 例如 375 宽的屏幕375 / 750 * 100 50px1rem 50px docEl.style.fontSize (width / designWidth) * baseFont px; } refreshRem(); // 横竖屏切换、窗口尺寸变化时重新计算 win.addEventListener(resize, refreshRem, false); // 从缓存恢复页面比如返回上一页时补算一次 win.addEventListener(pageshow, function (e) { if (e.persisted) refreshRem(); }, false); })(document, window);这里的参数含义要记牢designWidth是设计稿宽度baseFont决定换算比例。选 100 是为了口算方便设计稿上 20px 直接写成0.2rem48px 写成0.48rem。如果你们设计稿是 640 的把designWidth改成 640其余不用动。Math.min(clientWidth, 750)这一句是我个人会保留的它让页面在 PC 浏览器里预览时不会被拉到离谱的宽度方便开发阶段调试。写样式时就要严格按设计稿像素除以 100 来写而不是凭感觉估。比如卡片间距设计稿 24px就写padding: 0.24rem。养成这个习惯后切换机型基本不用再单独调。2.3 第三方库怎么引、按什么顺序引这套包的轮播用的是lib/下的 Swiper 静态文件图标用的是本地 iconfont。入口页面的引用顺序一般是!-- 1. 基础样式最先变量和重置先落地 -- link relstylesheet href./css/base.css link relstylesheet href./css/common.css link relstylesheet href./css/page/index.css !-- 2. 轮播库的样式放在页面样式之前避免覆盖困难 -- link relstylesheet href./lib/swiper/swiper.min.css !-- 3. 脚本放在 body 底部rem 必须先执行 -- script src./js/rem.js/script script src./lib/swiper/swiper.min.js/script script src./js/common.js/script script src./js/page/index.js/script顺序错了会怎样最常见的两种一是rem.js放到页面脚本后面页面初始化时算尺寸用的还是默认字号二是 Swiper 的 CSS 放在页面 CSS 后面你想覆盖它的分页器样式就得加!important。这类问题排查起来不复杂但第一次遇到会耗掉半小时。还有一点静态包里lib/通常是完整版库文件如果你只是用它的轮播没必要保留所有模块。二次开发阶段可以换成按需引入或者干脆用原生写一个简单的横向滚动减少首屏加载体积。原型阶段就用现成的别在这上面花时间。3. 核心页面拆解首页楼层、商品卡片与详情页的 DOM 是怎么拼的静态界面包的质量七成看首页和商品卡片。首页决定了第一眼观感商品卡片决定了整个商城的复用程度。这套包的写法是把首页拆成若干个section楼层商品卡片抽成一个独立的a标签结构详情页和购物车各自带一点交互脚本。3.1 首页楼层一个 section 就是一层首页的结构非常直白从上到下是搜索头部、轮播、金刚区、限时秒杀、商品楼层。每个楼层用一个section包裹楼层标题和“更多”入口放在同一行!-- 限时秒杀楼层结构固定换成其他楼层只需改 class 和数据 -- section classfloor floor--seckill header classfloor__head h2 classfloor__title限时秒杀/h2 a classfloor__more href./list.html?tagseckill更多/a /header div classfloor__body !-- 横向滚动容器内部商品项由 JS 渲染或静态复制 -- ul classgoods-scroll li classgoods-scroll__item a classgoods-card href./detail.html?id1001 img classgoods-card__img src./images/goods-01.jpg alt商品图 loadinglazy p classgoods-card__price¥59.00/p /a /li /ul /div /sectionfloor这个类名就是楼层的抽象秒杀、新品、推荐都用同一套结构只是数据不同。这种“结构复用、数据驱动”的写法在静态包里已经埋好了二次开发时你只需要把goods-scroll__item用模板字符串循环出来就能直接对接接口返回的列表。loadinglazy这个属性值得留着首屏之外的商品图不参与初始加载弱网下首屏会快不少。它的兼容性在现代手机浏览器上已经没什么问题不需要额外引入懒加载库。3.2 商品卡片整个商城复用最多的最小单元商品卡片的 HTML 结构我建议在任何商城项目里都按这个粒度拆分媒体区、标题、描述、价格。这套包的写法是a classgoods-card href./detail.html?id1001 div classgoods-card__media img src./images/goods-01.jpg alt商品图 loadinglazy span classgoods-card__badge限时价/span /div div classgoods-card__body h3 classgoods-card__title纯棉短袖T恤 夏季新款 宽松版型/h3 p classgoods-card__desc亲肤面料 多色可选/p div classgoods-card__price span classprice price--main¥59.00/span span classprice price--origin¥129.00/span /div /div /a对应的样式里有两处是移动端必须处理好的/* 媒体区用比例盒占位图片没加载完也不会导致布局跳动 */ .goods-card__media { position: relative; aspect-ratio: 1 / 1; background: #f5f5f5; } .goods-card__media img { width: 100%; height: 100%; object-fit: cover; } /* 标题固定两行超出省略避免长短标题把卡片撑得高低不齐 */ .goods-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; min-height: 2.8em; /* 两行高度固定一行的标题也占满两行 */ }aspect-ratio在这个场景下比传统的 padding-top 百分比方案更直观现代手机浏览器支持没问题。如果你需要兼容更老的机型可以退回padding-top: 100%加绝对定位的写法效果一样。卡片外层的a标签直接带href跳详情这是静态包的好处不用写跳转脚本。二次开发接路由时把这个href换成路由跳转也就一行的事。3.3 详情页主图切换、SKU 选择与底部购买栏详情页是动画和状态最多的一页。静态包里通常已经包含主图切换、规格选择、数量加减这几个基础交互// 主图切换点击缩略图把大图 src 换掉同时切换选中态 var thumbs document.querySelectorAll(.thumb-item); var mainImg document.querySelector(.detail-main-img); thumbs.forEach(function (item) { item.addEventListener(click, function () { //>// 购物车最小数据结构id、单价、数量、是否勾选 var cartList [ { id: 1001, price: 59, count: 1, checked: true }, { id: 1002, price: 89, count: 2, checked: false } ]; // 合计只统计被勾选的条目单价 × 数量累加 function calcTotal(list) { var total list.reduce(function (sum, item) { return item.checked ? sum item.price * item.count : sum; }, 0); return total; } // 数量加减最小为 1最大可以按库存限制 function changeCount(id, delta) { var item cartList.find(function (g) { return g.id id; }); if (!item) return; item.count Math.max(1, item.count delta); renderCart(); } // 全选让所有条目跟随全选框状态 function toggleAll(checked) { cartList.forEach(function (item) { item.checked checked; }); renderCart(); }这份逻辑是静态包里最有复用价值的部分。reduce算合计、find定位条目、Math.max兜底数量三个点覆盖了购物车 80% 的交互。二次开发对接接口时把cartList换成接口返回的数据把renderCart换成真实的 DOM 渲染这套计算逻辑基本不用动。有一点要注意价格如果涉及优惠券、满减、运费就不能用单价乘数量这么简单得把每个商品的“实际应付”算出来再累加。静态包不会做到这一步这是你二次开发要补的。4. 样式系统拆解CSS 变量、公共组件类与 750 设计稿的换算规则静态包的前端水平看目录是看结构看样式文件才是看功底。这套包在base.css里做了 CSS 变量和原子类两层抽象common.css里则沉淀了按钮、价格、标签、弹层这些跨页组件。这层设计决定了你二次开发时是改几行变量还是全局搜索替换。4.1 CSS 变量一次改主题整站生效base.css顶部的变量通常长这样:root { /* 主题色主色、辅助色、强调色 */ --color-primary: #ff4d4f; --color-primary-light: #ff7a7c; --color-accent: #ff9500; /* 文字主文字、次要文字、占位文字 */ --color-text: #1f1f1f; --color-text-sub: #666666; --color-text-weak: #999999; /* 背景与分割线 */ --color-bg: #f5f5f5; --color-card: #ffffff; --color-border: #eeeeee; /* 圆角与间距跟着 rem 走 */ --radius-sm: 0.08rem; --radius-md: 0.16rem; --space-sm: 0.16rem; --space-md: 0.24rem; }用变量的好处是换配色不用改几十个文件。比如客户嫌主色太红只要把--color-primary改成别的色值按钮、价格、标签、选中态会一起变。这里的命名我建议再加一层语义比如--color-price、--color-link而不是所有地方直接引用--color-primary否则以后想单独调价格颜色就会牵连到按钮。间距变量要谨慎用。写padding: var(--space-md)比写0.24rem可读性好但如果设计稿里间距并不是整齐的几档硬套变量反而别扭。我的习惯是只把高频且稳定的间距抽成变量其余直接写数值别为了抽而抽。4.2 公共组件类按钮、价格、标签的两三行写法common.css里的组件类一般不做过度抽象保持“一个类就是一个视觉效果”/* 主按钮通栏购买、提交订单都用它 */ .btn { display: flex; align-items: center; justify-content: center; height: 0.88rem; border-radius: 0.44rem; font-size: 0.32rem; border: none; } .btn--primary { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); color: #fff; } .btn--plain { background: #fff; color: var(--color-primary); border: 1px solid var(--color-primary); } /* 价格主价和划线原价分开避免用删除线混排 */ .price--main { color: var(--color-primary); font-size: 0.36rem; font-weight: 600; } .price--origin { color: var(--color-text-weak); font-size: 0.24rem; text-decoration: line-through; margin-left: 0.08rem; } /* 标签新品、秒杀、包邮这类角标 */ .tag { display: inline-block; padding: 0 0.08rem; height: 0.32rem; line-height: 0.32rem; font-size: 0.2rem; border-radius: var(--radius-sm); } .tag--hot { background: #fff1f0; color: var(--color-primary); }按钮用flex居中而不是line-height是因为按钮里可能出现图标加文字的组合line-height对齐在这种场景下容易偏。价格拆成主价和原价两个类而不是在一个元素里用span套删除线是因为很多商城的价格区要做“会员价”“到手价”多层展示拆开更好扩展。标签类要注意一个细节height和line-height必须一致否则文字会在小尺寸角标里上下不居中。这个问题在 2 倍屏上不明显在 3 倍屏上会一眼看出来属于典型的“真机一看就露馅”。4.3 安全区与 1px 边框移动端样式的两个固定动作底部 tabbar 和购买栏必须处理 iPhone 的底部安全区/* 底部固定栏给 Home 指示条留出空间 */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; height: 1rem; padding-bottom: constant(safe-area-inset-bottom); /* 兼容旧 iOS */ padding-bottom: env(safe-area-inset-bottom); /* 标准写法 */ background: var(--color-card); border-top: 1px solid var(--color-border); }constant()是给早期 iOS 的兜底现在主流程写env()就行但两者一起写没坏处。关键是box-sizing要是border-box否则加了 padding 之后实际高度会超出预期。另一个固定动作是 1px 边框。直接用border: 1px solid在 2 倍屏上会渲染成 2 个物理像素看起来偏粗。静态包里常用伪元素加scaleY的方案/* 顶部或底部分割线视觉上是 1 物理像素 */ .hairline-bottom { position: relative; } .hairline-bottom::after { content: ; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-border); transform: scaleY(0.5); transform-origin: 0 100%; }用的时候给需要分割线的元素加hairline-bottom类即可。这套写法在 iOS 和主流安卓上表现一致比border-image方案更好维护。如果整站都用建议放进common.css作为通用工具类。5. 真机避坑清单移动端 H5 适配最容易翻车的 5 个点静态包在 PC 浏览器里预览往往一切正常一到真机就开始出各种玄学问题。下面这五条是我这几年在移动端 H5 上反复踩到的按“现象 → 原因 → 解决”记下来遇到时直接对照。5.1 真机上字号偏大或偏小页面整体比例不对现象本地 Chrome 手机模拟器看着正常用手机打开后所有元素都放大了约 1.5 倍或者整体缩得很小。原因rem.js没有在页面脚本之前执行或者viewport的initial-scale被写成了固定值。还有一种情况是页面被某些内置浏览器强制按 980px 宽度渲染根字号算出来就不对。解决确认rem.js是head里第一个脚本且meta viewport的content是widthdevice-width, initial-scale1.0。真机上用调试工具看document.documentElement.style.fontSize的值375 宽的屏幕应该是 50px对不上就说明计算没跑或者被覆盖了。5.2 1px 边框在某些安卓机上显示不出来或特别粗现象分割线在 iPhone 上很细在部分安卓机上要么看不见要么变成 2px 粗线。原因transform: scaleY(0.5)在低版本安卓 WebView 里对亚像素渲染支持不好再叠加设备像素比不是整数就会出现忽粗忽细。解决优先用上面的伪元素方案如果目标机型很老退回到border: 1px接受它在 2 倍屏上略粗但至少稳定可见。不要在同一套页面里混用两种方案否则不同模块的线宽会不一致。5.3 100vh 底部被浏览器地址栏挡住现象全屏弹层或详情页用height: 100vh在移动浏览器里底部内容被地址栏遮住用户滑不到。原因移动浏览器的100vh包含地址栏区域地址栏收起展开时视口高度会变但vh单位不跟着变。解决弹层用position: fixed; inset: 0;代替100vh它跟随的是可视视口。如果必须用高度用 JS 读取window.innerHeight写到 CSS 变量里并在resize时更新。这个坑我在弹窗组件上翻过一次改完后就固定用fixed方案了。5.4 点击有 300ms 延迟弹层后面的页面还能滚动现象按钮点下去要等一下才响应打开弹层后手指在遮罩上滑动底下的商品列表跟着滚。原因老版本浏览器为了判断双击缩放保留了 300ms 点击延迟滚动穿透是因为遮罩只盖住了视觉层没有锁住body的滚动。解决300ms 延迟在现代浏览器加viewport后基本消失如果还有检查是不是没写widthdevice-width。滚动穿透用打开弹层时给body加overflow: hidden并记录当前滚动位置关闭时恢复。更稳妥的做法是给body加position: fixed; top: -scrollTop关闭时还原这样 iOS 上也不会穿透。5.5 商品图加载后页面跳动首屏白屏时间长现象打开列表页图片一张张加载出来每加载一张下面的内容就往下跳一次弱网下首屏长时间空白。原因图片没有预设宽高浏览器不知道要给它留多大位置加载完才撑开。首屏图片太多且没有懒加载全部挤在初始请求里。解决图片容器用aspect-ratio或padding-top提前占位img加width: 100%; height: 100%; object-fit: cover。首屏之外的图片加loadinglazy。首屏关键图可以用preload提示浏览器优先加载但不要给所有图都加反而会拖慢。这五条里前两条几乎每个静态包都会遇到后三条更多出现在二次开发把静态页改成动态渲染之后。排查时养成一个习惯先看根字号再看视口最后看具体元素的盒模型九成的样式问题都出在这三层。6. 二次开发路线把静态数据换成接口把页面拆成可复用组件静态包直接上线是不现实的真正的价值在于它给了你一套写好的结构和样式你只需要补数据和逻辑。我的改造顺序通常是先把商品卡片抽成渲染函数再把页面里的写死数据替换成接口请求最后处理加载态和空态。以首页秒杀楼层为例改造前是静态复制多个li改造后是一个模板函数加一次请求// 把商品卡片抽成模板函数参数是接口返回的单条数据 function goodsCardTpl(item) { return li classgoods-scroll__item a classgoods-card href./detail.html?id${item.id} div classgoods-card__media img src${item.cover} alt${item.title} loadinglazy /div div classgoods-card__body h3 classgoods-card__title${item.title}/h3 p classprice price--main¥${(item.price / 100).toFixed(2)}/p /div /a /li; } // 请求楼层数据并渲染接口失败时降级为静态占位 function loadFloor(floorId, container) { fetch(/api/floor?id floorId) .then(function (res) { return res.json(); }) .then(function (data) { container.innerHTML data.list.map(goodsCardTpl).join(); }) .catch(function () { container.innerHTML li classgoods-empty加载失败点击重试/li; }); }这段代码有两个细节值得说。接口价格通常以分为单位返回展示时要除以 100 并固定两位小数别在前端用浮点数直接乘除容易出现59.00000001这种展示。另一个是catch里一定要给用户一个可点击的重试入口而不是只显示“加载失败”静态包没有这个习惯但真上线后弱网用户不少这个降级能少很多客诉。改造时有一个对照表可以帮你在过程中检查是否漏项静态包原有的部分改造后应该变成检查点写死的商品li模板函数 接口渲染空数组时是否展示空态写死的图片路径接口返回的cover字段图片加载失败是否有占位图写死的价格文本分转元的格式化函数是否统一保留两位小数页面内联的点击事件事件委托绑定到列表容器动态插入的元素是否可点击静态页之间的a跳转保留href或换路由带参数跳转后详情页能否取到 ID最后说一个验证习惯。这套静态包改完之后我不会只在模拟器里看而是固定走一遍真机打开、切到弱网、快速上下滑动、打开弹层再关闭、返回上一页再进来。这几步能覆盖掉大部分布局和状态残留问题。有一次我没走返回再进来这一步结果购物车页面的合计在从详情页返回后没有刷新用户看到的是旧数字这种问题在模拟器上很难复现。从那以后我每次改完涉及状态同步的页面都强制把“返回再进入”走一遍确认数据重新拉取、DOM 重新渲染。希望这套拆解能帮你把这套 H5 商城静态界面更快地用起来。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
