这是一套可以直接拿去改的纯 HTML5 响应式商品列表页。顶部是玻璃质感的悬浮导航，右侧带一个明暗主题开关和购物车角标；主视觉区是品牌名与一行标语，背后是一整片缓慢自转的星空，鼠标一动，星空会轻微视差偏移，同时你的光标周围会跟着一团柔和的光晕。往下是八张商品卡片，图片、标题、价格、描述之外，每张还带不同形态的选项：色块单选、图标单选、称谓选择、字母输入，也有只标一行“全场包邮”或“限量发行”的。
鼠标移到卡片上，卡片整体浮起、图片放大，底部滑出一条加购按钮；点一下，右上角购物车数字加一并弹跳一下。图片采用了占位加懒加载：滚动到附近才真正开始下载，加载完再淡入。
这套商城布局值得留意的四处
星空是渐变画出来的，不是图片。用两层不同尺寸的重复径向渐变平铺成疏密不一的星点，外面再套一层缓慢旋转的容器，星空就动了起来，整页没有为此加载任何素材。
鼠标位置被写成了 CSS 变量。脚本只负责把归一化后的坐标写进两个自定义属性，视差偏移与光标光晕都由 CSS 读取这两个变量自行计算，脚本里没有任何样式赋值。
主题切换靠一个根属性。所有颜色都定义成变量，明暗两套值挂在根元素的属性选择器下，切换时只改一个属性值，几十处颜色同时过渡。
懒加载用交叉观察器实现。图片先放一个极小的占位图，真实地址存在数据属性里，进入视口附近才新建图片对象预载，载完替换并加上淡入类，之后停止观察。
三个决定这页质感的实现细节
其一，鼠标交互全部交给 CSS 更划算。脚本这部分只有三行：
document.documentElement.style.setProperty("--mouse-x", x);写变量的代价极小，而视差位移、光晕位置这些真正的计算与合成由样式引擎处理，还能天然享受硬件加速。相比在 JS 里逐个元素设 transform，这种写法在元素多时优势很明显，而且新增一个跟随鼠标的元素时不用改脚本，写条样式就行。
其二，懒加载没有直接给 img 换地址。而是先新建一个内存中的图片对象去加载，等它触发完成回调后再替换真实元素的地址。这样可以保证淡入动画开始时图片已经解码完毕，不会出现“淡入到一半才刷出内容”的闪烁。观察器还设置了负的下边距，让图片提前一点开始加载。
其三，选项区刻意做成了多种形态。色块单选、带表情图标的单选、二选一的称谓、单字母文本框——这些都是用原生表单控件加自定义样式实现的，没有引入组件库。对于要拿去改的模板来说，这比给一套统一控件更有用：真实商品的选项形态本来就千差万别，这里等于给了四种现成写法。
拿到源码后能改什么
配色集中在根元素的变量表里，明暗两套并列，包含页面底色、卡片底色、文字、主色、星点颜色与不透明度。想换品牌色，改主色那一组即可，导航、按钮、强调文字会一起跟上。星空在浅色主题下会自动换成偏绿的星点，这个思路值得保留——深色底用白点，浅色底用彩点。
商品卡片是重复的结构块，复制一份改内容即可。若要接后台，把卡片渲染成模板循环、把加购按钮的回调换成真实接口就行，购物车计数逻辑本身只有几行。
星空的旋转速度、视差幅度、光晕半径分别是几个独立数值：旋转在星空容器的动画时长上，视差幅度是那两个乘以像素的系数，光晕半径写在径向渐变的尺寸里。想更安静就把幅度和速度都调小，做成活动页则可以反过来。
运行提示：懒加载依赖交叉观察器，主题切换与变量跟随依赖 CSS 自定义属性，主流浏览器近年版本均支持。页面可直接双击 index.html 打开，图片位于同目录下的子文件夹中。建议使用近两年版本的 Chrome、Edge、Firefox 或 Safari。详细运行方法请参见压缩包内的帮助文档。
关于这套商品列表模板的常见问题
加购数据能存下来吗？
当前计数只在内存里。要持久化，可以在计数递增处同时写入本地存储，页面初始化时读回；接后台则替换成一次接口调用，注意加上失败回滚。
主题偏好能记住吗？
目前每次进入都默认深色。加记忆很简单：切换时把当前主题写入本地存储，初始化时优先读取存储值，没有再回落到默认值或跟随系统偏好。
手机上排版会乱吗？
卡片区用的是自适应网格，窄屏会自动减少列数。需要注意的是鼠标视差在触摸设备上不会触发，星空仍会自转，观感不受影响。
商品很多时会不会卡？
图片已经懒加载，主要开销来自卡片的阴影与模糊效果。商品数量很大时建议分页或滚动加载，并适当减弱卡片的模糊与阴影。
这套模板适合谁用
它适合做小型独立品牌的商品陈列页、众筹项目的产品展示、周边商城、礼品定制站点。深色加星空的调性偏精致，也很适合做限量款或联名系列的专题页。星空渐变、变量驱动的鼠标交互、主题切换与懒加载的完整写法都在源码里，注释清楚，下载后可查看。
