简介以小米有品为蓝本的HTMLCSS购物网站练手项目适合前端初学者、网页设计课程学生作为作业参考与课程设计素材。项目完整覆盖电商站常见页面包括首页轮播、商品分类、商品详情、购物车、登录注册等用HTML搭建页面结构配合CSS实现字体配色、布局排版与媒体查询响应式效果兼顾手机、平板和桌面端展示。购物车页面包含商品列表与数量调整区域登录注册页涉及输入框、按钮等表单元素可帮助理解页面交互的组织方式。压缩包共48个文件含7个html页面、4个css样式表、31张png切图素材及js轮播脚本等整体约3.49MB解压后目录层级直观便于按页面逐一查看对照。已有3316人学习页面模块划分清楚尤其适合快速掌握电商类网站前端布局与样式设计思路。1. 手写一个“小米有品”购物网站HTMLCSS 静态电商页的完整底稿你可能在网上见过不少“XX商城网页源码”但点进去要么少图、要么样式全乱、要么页面之间根本跳不通。这份以小米有品为主题的购物网站源码包属于前端课程设计里完成度比较高的那一类首页、商品列表、详情页、购物车、登录注册、个人中心全都有HTML 文件和 CSS 文件是分离的还带了 Swiper 轮播库和一批小米产品图能直接打开看效果也能当模板二次开发。尤其适合正在做网页设计大作业、或者想搞懂一个电商站的页面到底由哪些部分拼起来的人——它的价值不是“能买能卖”而是把电商前端的信息架构和样式组织方式拆给你看导航怎么做、轮播怎么挂、商品卡片怎么排、购物车总价怎么算、登录表单怎么校验。项目本身不依赖后端所有交互都存在静态页面层面所以任何人只要有浏览器下载就能跑不需要配服务器。这份资源里值得研究的不只是 HTML 标签怎么堆而是 CSS 的组织思路全局 base、页面级 style01、还有登录页专属 Login.css 分层设计以及图片资源统一放在 images 目录下的路径约定。文章后面会先把文件结构过一遍再把每个核心页面的实现方式拆开最后把最容易翻车的图片路径、图标字体、CDN 依赖、浏览器兼容这几个点单独拎出来讲。2. 先拆压缩包文件结构、页面骨架与全局样式的设计逻辑拿到购物网站.rar解压后第一件事不是双击 index.html而是把目录结构列一遍。这个习惯能帮你判断一份源码是“能跑的作业”还是“只适合交差的演示”也能让你在后面替换图片、加页面时不至于把手伸进一堆混乱的文件名里。2.1 资源包结构从文件名反推页面地图购物网站.rar ├── html/ │ ├── Information.html # 个人中心 │ ├── commodity.html # 商品列表/分类页 │ ├── shopping.html # 购物车页面 │ ├── Login.html # 登录页 │ ├── register.html # 注册页 │ └── index.html # 首页 ├── css/ │ ├── base.css # 全局基础样式重置、公共类 │ ├── style01.css # 电商页面通用样式 │ ├── Login.css # 登录/注册页独立样式 │ ├── swiper-bundle.min.css ├── js/ │ ├── swiper-bundle.js # 轮播库完整版 │ └── swiper-bundle.min.js ├── images/ │ ├── 小米1.png ~ 小米23.png │ ├── 购物车.png、登录.png、查找.png、验证码.jfif │ ├── 商品.jpegbasetagimgScaleFwebp │ └── footer.png └── aa.html # 追加的散页可能是临时测试页从文件命名能看出三件事。第一HTML 页面按功能模块拆成了 6 个独立文件页面之间用a标签互跳这种多页面结构MPA是电商站的经典做法比单页应用SPA更适合初学者理解“页面切换”的本质。第二CSS 拆成了三层base.css负责重置浏览器默认样式和定义通用工具类style01.css承载了商品卡片、导航栏、页脚这些电商站高频组件的样式Login.css则只服务登录注册页避免把表单样式污染到其他页面。第三图片资源全部平铺在 images 目录下命名用的是中文拼音加序号配合img srcimages/小米5.png这种相对路径引用意味着你只要保持目录结构不变整体挪到任何地方都能正常显示。2.2 全站共用的 base.css为什么电商页一定要先做样式重置浏览器对 HTML 元素默认样式各有差异最典型的是ul的list-style和paddingFirefox 和 Chrome 渲染出的缩进不一样。base.css的作用就是把这些不一致抹平让后续样式在不同浏览器里表现一致。里面的深度清理规则值得抄到自己项目里* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } input, button { outline: none; border: none; background: none; }逻辑说明*通配符把全局内外边距清零box-sizing: border-box让width包含了padding盒模型不会因为加内边距而撑破布局——这是后面所有卡片、输入框能对齐的前提。a标签去掉下划线并继承父级颜色保证导航栏和商品链接的配色统一由外层控制不用每个链接单独写颜色。img设成块级元素并限制最大宽度防止图片在窄容器里溢出。input和button去边框去背景把样式控制权完全交给自己的类这在登录页和搜索框里特别明显。参数说明这套重置是“激进派”做法适合样式完全自定义的电商站如果是做后台管理面板表单控件保留原生边框反而更省事。实际使用时box-sizing: border-box这一条建议保留它能让百分比宽度和内边距共存时不出现横向滚动条。2.3 布局选型为什么首页用的是 Flex 加固定宽度容器查看 index.html 的顶层结构通常是一个div.container或.center包裹所有内容宽度设定在 1200px 左右并水平居中。这种“通栏背景 定宽内容”的布局是电商首页的标准范式导航栏、轮播、商品分区、页脚的背景色各自贯穿全屏但里面的内容都收在同一个 1200px 容器里视觉整齐又方便统一改宽度。商品卡片排序如果用了display: flex配合flex-wrap: wrap那么每个卡片指定width: 25%或calc(25% - 20px)就能自动换行排成四列。这里有一个关键的取舍点用 Flex 而不是 Grid是因为商品卡片的尺寸不要求严格等分Flex 的主轴对齐和justify-content: space-between可以让最后一行的卡片贴左排列视觉上更接近真实电商站的商品瀑布。CSS Grid 更适合行、列都要严格对齐的场景比如后台的表格类布局。如果项目里要增加响应式媒体查询的位置通常会放在 style01.css 的最底部media screen and (max-width: 768px) { .container { width: 100%; padding: 0 10px; } .goods-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .goods-item { width: 48%; margin-bottom: 10px; } }逻辑说明当视口宽度小于等于 768px容器不再固定 1200px而是占满全屏并留 10px 内边距商品卡片宽度变成 48%两列排列。这段代码说明了一个重要事实CSS 的响应式不改变 HTML 结构只通过媒体查询覆盖布局参数。3. 首屏三件套轮播图、导航栏与商品卡片的实现拆解电商网站首页的信息密度很高但视觉上却要让人觉得“乱中有序”。这份源码里承担这个任务的三块核心分别是 Swiper 轮播、吸顶导航和商品卡片网格。下面逐个拆出它们的实现方式和关键参数。3.1 Swiper 轮播的接入方式从 CDN 到本地化的完整流程Swiper 是目前前端用得最多的免费轮播库。这份源码把swiper-bundle.js和swiper-bundle.css放在了本地 js 和 css 目录说明作者考虑到了“演示环境可能没外网”的问题这个习惯值得学习。HTML 侧的结构固定为三段式一个swiper容器内部是swiper-wrapper包裹的多个swiper-slide每个 slide 放一张imgdiv classswiper mySwiper div classswiper-wrapper div classswiper-slideimg srcimages/小米1.png alt小米手机/div div classswiper-slideimg srcimages/小米5.png alt小米手环/div div classswiper-slideimg srcimages/小米13.png alt小米家电/div /div div classswiper-pagination/div /div逻辑说明swiper-wrapper是滑动轨道的核心所有 slide 会在这个轨道上横向排列。swiper-pagination是分页器小圆点放在容器内、wrapper 外由 Swiper 自动填充。要注意容器上的mySwiper类名它是 JS 初始化的唯一标识如果把它删掉滑动会失效。JS 侧初始化通常放在 HTML 底部script srcjs/swiper-bundle.js/script script var mySwiper new Swiper(.mySwiper, { loop: true, autoplay: { delay: 3000, disableOnInteraction: false, }, pagination: { el: .swiper-pagination, clickable: true, }, }); /script参数说明loop: true开启无限循环滑到最后一张后又平滑回到第一张autoplay.delay表示 3 秒自动切换一次disableOnInteraction: false允许用户在手动滑动后继续自动播放不做自动播放的场景要注意disableOnInteraction和delay的取值范围是否会冲突。如果你的页面里已经引入了 jQuery请不要让 Swiper 的初始化代码被 jQuery 的 ready 事件包裹避免在极少数情况下初始化顺序错乱。3.2 吸顶导航的实现position sticky 的一个参数值导航栏是电商页里信息密度最高的横向组件通常包含 Logo、搜索框、分类菜单和用户入口。这份源码的导航结构大致是 Logo 在左、搜索框居中、右侧是“登录”“购物车”链接。要把导航固定在页面顶部常见做法是position: fixed但这份源码如果用了position: sticky效果会更好。.nav { position: sticky; top: 0; z-index: 100; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }逻辑说明position: sticky的行为是“滚动到顶就吸住”它不需要像fixed那样额外给 body 加 padding-top 来补偿导航的高度也不会遮挡初始位置的页面内容。z-index: 100保证商品图片和轮播在滚动时不会盖住导航。如果你的浏览器里 sticky 失效最可能的原因是父级容器有overflow: hidden或设置了overflow-x: auto这两类属性会破坏 sticky 的参照系。排查方法删除该容器上的 overflow 属性或把 sticky 元素直接挂到 body 的直属子节点。3.3 商品卡片的 CSS 网格布局从图片尺寸到价格标签的规范商品区是首页的大头。每个商品卡片的结构通常是div classgoods-item a hrefcommodity.html img srcimages/小米6.png alt商品图片 h3小米手环 7/h3 p classprice¥249/p p classtag新品上市/p /a /div对应的核心样式.goods-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .goods-item { width: 24%; margin-bottom: 20px; background-color: #fff; border-radius: 8px; transition: transform 0.3s ease; } .goods-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }逻辑说明width: 24%配合justify-content: space-between可以做到四列等宽且两端对齐最后一行的商品如果不满四个依然靠左排列不拉伸。hover时向上平移 5px配合阴影形成“卡片抬升”的视觉反馈这是电商页很常见的交互细节成本极低但效果明显。参数说明价格标签如果用了大号红色粗体一般是在.price上设置font-size: 20px; color: #ff6700; font-weight: bold;这个色值正是小米的品牌橙。改颜色时全站统一搜索#ff6700即可替换不要一处一处手动调。4. 走进内部页面商品列表、购物车与登录注册的实现细节首页解决的是“吸引浏览”内部页面解决的是“驱动操作”。商品列表页承接点击跳转购物车页展示选品结果登录注册页完成用户入口。这三个页面用到的 HTML 标签和 CSS 技巧明显不同也最能体现页面间的设计一致性。4.1 商品列表页 commodity.html筛选条件的排列与卡片复用商品列表页的信息量通常大于首页因为它要承担“分类浏览”功能。页面顶部一般是一个筛选条包含分类、价格区间、排序方式等下方就是复用首页的商品卡片。filter 区域实现在这里div classfilter-bar span classfilter-label分类/span a href# classactive全部/a a href#手机/a a href#智能穿戴/a a href#家电/a span classfilter-label价格/span a href#0-999/a a href#1000-2999/a a href#3000/a /div对应样式.filter-bar { display: flex; align-items: center; gap: 8px; padding: 15px 0; border-bottom: 1px solid #e0e0e0; font-size: 14px; } .filter-bar a { padding: 5px 12px; color: #333; border-radius: 4px; } .filter-bar a:hover { color: #ff6700; background: rgba(255, 103, 0, 0.1); } .filter-bar a.active { color: #fff; background: #ff6700; }逻辑说明这个筛选条的核心是把“分类”和“价格”两组选项放在同一行通过display: flex实现水平排列gap控制间距。.active类和:hover伪类使用了同样的橙色背景逻辑区分点是a.active的优先级高于a:hover所以先 hover 再点击样式能稳定落在 active 上。静态网站里点筛选不会真过滤商品实际使用时把>table classcart-table thead tr th商品信息/th th单价/th th数量/th th金额/th /tr /thead tbody tr tdimg srcimages/小米9.png alt小米手机/td td¥1999/td tdinput typenumber value1 min1/td td classsubtotal¥1999/td /tr tr tdimg srcimages/小米11.png alt小米手环/td td¥249/td tdinput typenumber value1 min1/td td classsubtotal¥249/td /tr /tbody tfoot tr td colspan4 classcart-total 合计span idtotalAmount¥2248/span /td /tr /tfoot /table对应样式.cart-table { width: 100%; border-collapse: collapse; background-color: #fff; } .cart-table th, .cart-table td { padding: 15px; border-bottom: 1px solid #eee; text-align: center; } .cart-table img { width: 80px; height: 80px; vertical-align: middle; margin-right: 10px; display: inline-block; } .cart-table input[typenumber] { width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; text-align: center; } .subtotal { color: #ff6700; font-weight: bold; }逻辑说明border-collapse: collapse将双线边框合并成单线是表格最常见的配置。表头thead单独控制背景色tbody 每行底边出现分割线。输入框input[typenumber]自带增减按钮在购物车场景里是最低成本的“改数量”方案真实电商项目通常用自定义的加减按钮因为原生 number 按钮的样式在不同浏览器里渲染不一致。参数说明表格列宽不固定时图片在单元格里默认是内联元素需要设width: 80px; height: 80px并配合vertical-align: middle才能看起来整齐。总量#totalAmount里的¥2248是写死的想变成“数字变化”可以参考以下 JS 片段const qtyInputs document.querySelectorAll(.cart-table input[typenumber]); const totalEl document.getElementById(totalAmount); function updateTotal() { let sum 0; document.querySelectorAll(.cart-table tbody tr).forEach(row { const price parseFloat(row.querySelector(.price-hidden).textContent); const qty parseInt(row.querySelector(input).value); const subtotal price * qty; row.querySelector(.subtotal).textContent ¥ subtotal.toFixed(2); sum subtotal; }); totalEl.textContent ¥ sum.toFixed(2); } qtyInputs.forEach(input { input.addEventListener(change, updateTotal); });逻辑说明这段脚本把价格藏在.price-hidden元素里读取数量变化后重算小计和合计。注意toFixed(2)保留两位小数避免浮点数运算产生 0.10.2 类的精度问题。静态页面展示时脚本可以放在 HTML 尾部。4.3 登录与注册页表单验证、验证码图片与 CSS 独立文件的必要性登录和注册页往往长得像一个磨具里倒出来的区别只在“注册要多几个字段”。这份源码单独写了一个Login.css说明作者把表单页的样式从通用样式中抽离避免.input-group这类类名污染主站页面。div classlogin-box h2账号登录/h2 form div classinput-group label手机号 / 邮箱/label input typetext placeholder请输入手机号或邮箱 /div div classinput-group label密码/label input typepassword placeholder请输入密码 /div div classinput-group label验证码/label div classcaptcha-row input typetext placeholder验证码 img srcimages/验证码.jfif alt验证码 classcaptcha-img /div /div button typesubmit classbtn-login登 录/button p classregister-linka hrefregister.html没有账号去注册/a/p /form /divCSS 侧的常见设置为.login-box { width: 400px; margin: 80px auto; padding: 40px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .input-group { margin-bottom: 20px; } .input-group label { display: block; margin-bottom: 6px; font-size: 14px; color: #666; } .input-group input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; transition: border-color 0.3s; } .input-group input:focus { border-color: #ff6700; } .captcha-row { display: flex; gap: 10px; } .captcha-img { width: 100px; height: 40px; cursor: pointer; border-radius: 4px; }逻辑说明把验证码图片和输入框放进同一个flex容器实现“输入框 图片”在一行内对齐。label做成块级元素让文字提示与输入框分行。焦点时输入框边框变橙给用户当前编辑位置的视觉反馈——这种反馈依赖:focus伪类代码量几乎为零但体验提升明显。真正的验证码是有后端参与生成的前端战略上用一张静态图片代替是常规做法。作业演示阶段完全够用但如果要在简历里写“验证码模块”至少要提一句“前端仅做校验展示实际验证应交给服务端”并考虑给图片绑定一个随机数参数来模拟刷新onclickthis.srcimages/验证码.jfif?t Math.random()。这里涉及到的Math.random()是在请求 URL 末尾附加随机数字浏览器会把它当成新地址重新拉取一次图片实现“点击换图”的效果。注册页的常见差异化字段包括确认密码、手机号、验证码。密码强度检测属于加分项如果你想把这块也做成静态演示思路是监听输入框的input事件根据密码长度和字符组合改变提示条的颜色const pwdInput document.getElementById(pwd); const strengthBar document.getElementById(strengthBar); pwdInput.addEventListener(input, function () { const val pwdInput.value; let level 0; if (val.length 6) level; if (/[A-Z]/.test(val)) level; if (/[0-9]/.test(val)) level; if (/[\W_]/.test(val)) level; strengthBar.className ; if (level 1) strengthBar.classList.add(weak); else if (level 2) strengthBar.classList.add(medium); else if (level 3) strengthBar.classList.add(strong); });逻辑说明通过正则表达式判断是否包含大写字母、数字和特殊字符level 值代表命中了几类条件再在 CSS 里定义.weak、.medium、.strong三段颜色。这种判断是一个很好理解的“密码强度条”最小实现后端真正校验时不会采用这套规则但前端反馈够了。5. 避坑排查图片路径、Swiper 失效、CSS 样式冲突的常见踩坑记录静态页面本身结构不复杂翻车通常翻在路径、依赖加载和样式覆盖这三类问题上。下面这几条都是实际动手时最容易遇到的按“现象 → 原因 → 解决”的方式写清楚。5.1 图片全部裂开控制台报 404——中文路径和扩展名惹的祸现象打开 index.html 后页面结构在、文字在但所有商品图和轮播图都显示为裂图。原因最常见的是路径写错。一个是images/小米5.png这类中文文件名如果 HTML 文件的编码不是 UTF-8或者文件名里的中文在复制过程中被改成了全角字符浏览器就找不到对应资源另一个更隐蔽的问题是商品.jpegbasetagimgScaleFwebp这个文件名——它看起来像一张图实际是从某个平台复制时把图片 URL 的参数一并带进了文件名里basetagimgScaleFwebp不是合法的扩展名浏览器没法把它当图片解析。解决把带 URL 参数的文件统一重命名成简单的英文格式比如product-01.jpg同时检查所有img的src是否一一对应。中文文件名不是不能用但建议养成英文命名的习惯避免部署到 Linux 服务器上遇到字符编码问题。# 在解压后的根目录下执行把“商品.jpegbase...”这类文件批量重命名 for file in images/*base*; do mv $file images/商品-01.jpg done逻辑说明这是一条 bash 循环把匹配base的文件名改成可读的商品-01.jpg执行后同步把 HTML 里的引用改掉即可。如果你不熟练命令行直接右键重命名文件也行。5.2 轮播图只显示第一张不滑动控制台报 TypeError现象Swiper 的容器和 slide 结构都写对了但轮播静止不动。原因JavaScript 报错十有八九是“Swiper 未定义”。这是引入顺序问题——你把页面自己写的初始化脚本放到了swiper-bundle.js的前面导致执行new Swiper()时 Swiper 构造函数还不存在。解决检查script标签的排列顺序坚持“先引库、后初始化”的固定顺序script srcjs/swiper-bundle.min.js/script script srcjs/my-index.js/script逻辑说明浏览器从上到下执行脚本前面引入的库先进入全局作用域后面的代码才能访问 Swiper 对象。同理Swiper 初始化脚本应该放在 DOM 结构的后面或者用DOMContentLoaded包一层否则容器可能还没渲染完成就执行了尺寸计算。这里再补一个常见的翻车点swiper-bundle.min.js是压缩版swiper-bundle.js是未压缩版。开发阶段建议先用未压缩版报错时能定位到具体哪个方法出了问题部署上线再换成 min 版减小体积。这类库文件的引用顺序和版本匹配是静态页面稳定运行的根基。5.3 CSS 样式“串页”了——登录页的样式污染了购物车页现象打开 shopping.html发现商品价格标签的背景变成了登录页的橙色按钮样式按钮间距也变了。原因Login.css的类名太通用比如用了.btn、.input-group、.container这类高频类名而 shopping.html 里恰好也有同名元素。样式是全局生效的只要你link了 Login.css它的规则就会作用于整个文档。解决给登录页的根节点加上一个专属类所有内部样式都写在它的下方.login-page .btn { background: #ff6700; color: #fff; } .login-page .input-group { margin-bottom: 20px; }逻辑说明.login-page .btn是一个“后代选择器”只匹配.login-page内部的.btn不会误伤其他页面的相同类名。这是 CSS 模块化最简单有效的做法用一个根级类做命名空间。如果你不想改样式也可以在引入页面时只引入自己需要的 CSS 文件不要全站挂载所有样式表。拿这句话来说查看 shopping.html 顶部通常只应出现 base.css 和 style01.css 两行link如果多了 Login.css就是串页隐患。5.4 图片大小不一整个商品区高度参差排版看着乱现象同一排商品卡片有的图片大、有的图片小底部对齐困难。原因素材图片来源不同有的截自官网有的来自社交平台原始尺寸不一样。在 HTML 里直接展示原图就会参差不齐。解决在 CSS 里给.goods-item img设置统一尺寸并附加object-fit: cover.goods-item img { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 8px 8px 0 0; }逻辑说明width: 100%让图片自适应父容器宽度height: 220px统一高度object-fit: cover是这里的关键——它会按比例缩放图片直至铺满容器多的部分裁掉少的部分拉伸补全。三个属性组合图片就不会被压扁或拉伸变形。实际使用时要结合object-position: center保证裁切区域居中避免人物或商品主体偏出画面。5.5 a标签的点击区域太小整张卡片只有文字能跳转现象点击商品卡片除了文字和图片外空白区域点击无反应。原因a标签没有完全包裹.goods-item或者a的 display 仍是 inline宽度和高度只由内部内容撑开没有覆盖整个卡片区域。解决把整个商品卡片的内容包进a并给a设置块级化.goods-item a { display: block; padding: 15px; color: inherit; }逻辑说明display: block让链接占据整行padding 扩大可点击面积。电商站里“整卡可点”是基础体验鼠标光标悬停在卡片任何位置都应变成手势。检查代码时如果a和.goods-item是并列关系点击区域就永远大不起来。6. 把这套页面从“能看”变成“能上线”部署步骤与必要的润色技巧到这里页面已经能跑能跳了。但一份要让老师、面试官或潜在用户满意的作品还需要做三件收尾工作正常的目录重组、本地到线上环境的部署验证、以及把静态页面的“演示味”降到最低。6.1 目录重组去掉临时文件明确三个目录的归属源码包里残留的 aa.html 是一个临时文件大概率是你调试样式时另存的副本正式交付前建议删除否则别人打开会困惑。标准部署目录应该是xiaomi-shop/ ├── index.html ├── css/ ├── js/ └── images/推荐把 HTML 页面统一放到根目录而不是 html/ 子目录里。原因有两点一是相对路径书写简单img srcimages/xxx.png比../images/xxx.png更直观二是部署到 GitHub Pages 或任意静态托管时根目录天然是入口用相对路径的链接不容易断。如果你坚持保留 html/ 子目录那么所有页面间的a跳转都要写成html/shopping.html这类相对路径而图片路径也要相应变成../images/xxx.png这个层级关系只要漏一个就会 404。6.2 Vercel 或 GitHub Pages 部署与本地验证如果你用 VS Code最简单的是装 Live Server 插件右键 index.html 选择 “Open with Live Server”浏览器会自动打开并监听文件改动刷新。这一步验证的是“相对路径是否书写正确”因为 Live Server 模拟了一个本地静态服务器它和直接从文件系统双击打开 HTML 的差异比较大某些浏览器会限制本地文件协议下的模块加载或 AJAX 请求但用 Live Server 后这些限制会消失。要真正给别人看部署到 GitHub Pages 是零成本方案git init git add . git commit -m first commit git branch -M main git remote add origin https://github.com/your-name/xiaomi-shop.git git push -u origin main然后在仓库的 Settings → Pages 中选择Deploy from a branch分支选main目录选/root保存后等一两分钟就能拿到线上地址。梳理一下这里每一步做的事git init初始化本地仓库git add .把目录内所有文件加入暂存区git commit创建第一个提交记录git push把提交推到远程仓库。推到 GitHub 后再在 Pages 面板里指定分支和目录GitHub 会自动构建部署。部署到线上后用浏览器无痕窗口打开线上地址再走一遍六条链接首页、商品列表、详情、购物车、登录、注册。无痕模式会隔离本地缓存能暴露“图片 404”这类资源路径问题。6.3 更“真”一点为轮播图绑定跳转链接、给导航加当前页高亮静态页面最容易露馅的地方是“页面之间的身份不明确”。你从首页点进购物车导航栏的“购物车”链接没有任何特殊状态用户会疑惑“我到底在哪一页”。解决办法是给每个页面自己的导航链接加一个.active类nav classmain-nav a hrefindex.html首页/a a hrefcommodity.html商品/a a hrefshopping.html classactive购物车/a a hrefLogin.html登录/a /nav对应样式.main-nav a.active { color: #ff6700; font-weight: bold; border-bottom: 2px solid #ff6700; }这属于最原始的“高亮当前页”方案纯手工。如果你想自动化在公共 JavaScript 文件里根据location.pathname匹配导航链接然后加类const currentPage location.pathname.split(/).pop(); document.querySelectorAll(.main-nav a).forEach(link { if (link.getAttribute(href) currentPage) { link.classList.add(active); } });逻辑说明location.pathname是浏览器提供的当前路径信息split(/).pop()取出最后的文件名再和每个导航链接的 href 属性比对匹配就加active类。这样新增页面时不需要手动改导航高亮。轮播图同理静态轮播只展示图片但真实电商站每张 banner 都指向对应的活动页。给 slide 里的图片包上a是让演示更扎实的一步div classswiper-slide a hrefcommodity.html img srcimages/小米1.png alt新品首发 /a /div从信息安全角度说一句这套页面里用的小米产品图只适合演示和学习如果要正式上线图片版权问题要提前处理。作业里用没有问题商用必须换图或自己设计素材。6.4 搜索框的点击反馈让静态页面的按钮“有反应”搜索框是电商首页的核心入口。静态页面里输入关键词点击搜索不会触发任何逻辑这会给体验打个折扣。一个低成本的做法是让搜索按钮跳转到 Google 或百度的搜索结果页form actionhttps://www.baidu.com/s methodget target_blank input typetext namewd placeholder搜索小米产品 button typesubmit搜索/button /form逻辑说明把表单的action指向百度搜索接口namewd是百度规定的搜索参数名点击搜索会打开新标签页展示搜索结果。这是一个真实可用的前端交互替换作用在于它不需要任何后端代码却让静态页面看起来是完整的。如果不想跳转外网你也可以用alert(当前为静态演示)这种提示但做法就不够体面了。到这里这份资源能发挥的价值其实已经超出“一份作业”了——它是一套完整的前端页面骨架你可以把小米的商品图换成自己的产品图把价格和文案改成自己的内容把轮播图换成活动海报然后部署成个人作品集或小型的公司产品展示页。从那以后我自己拿到类似的源码包都会先做一遍同样的流程列出目录结构、逐个页面点开查资源引用、把通用样式抽离出来当模板、最后顺手部署到线上验证一遍。这四步走完资源才算真正落到自己手里而不仅仅是解压后看了一眼。希望帮到你。本文还有配套的精品资源点击获取
简介以小米有品为蓝本的HTMLCSS购物网站练手项目适合前端初学者、网页设计课程学生作为作业参考与课程设计素材。项目完整覆盖电商站常见页面包括首页轮播、商品分类、商品详情、购物车、登录注册等用HTML搭建页面结构配合CSS实现字体配色、布局排版与媒体查询响应式效果兼顾手机、平板和桌面端展示。购物车页面包含商品列表与数量调整区域登录注册页涉及输入框、按钮等表单元素可帮助理解页面交互的组织方式。压缩包共48个文件含7个html页面、4个css样式表、31张png切图素材及js轮播脚本等整体约3.49MB解压后目录层级直观便于按页面逐一查看对照。已有3316人学习页面模块划分清楚尤其适合快速掌握电商类网站前端布局与样式设计思路。1. 手写一个“小米有品”购物网站HTMLCSS 静态电商页的完整底稿你可能在网上见过不少“XX商城网页源码”但点进去要么少图、要么样式全乱、要么页面之间根本跳不通。这份以小米有品为主题的购物网站源码包属于前端课程设计里完成度比较高的那一类首页、商品列表、详情页、购物车、登录注册、个人中心全都有HTML 文件和 CSS 文件是分离的还带了 Swiper 轮播库和一批小米产品图能直接打开看效果也能当模板二次开发。尤其适合正在做网页设计大作业、或者想搞懂一个电商站的页面到底由哪些部分拼起来的人——它的价值不是“能买能卖”而是把电商前端的信息架构和样式组织方式拆给你看导航怎么做、轮播怎么挂、商品卡片怎么排、购物车总价怎么算、登录表单怎么校验。项目本身不依赖后端所有交互都存在静态页面层面所以任何人只要有浏览器下载就能跑不需要配服务器。这份资源里值得研究的不只是 HTML 标签怎么堆而是 CSS 的组织思路全局 base、页面级 style01、还有登录页专属 Login.css 分层设计以及图片资源统一放在 images 目录下的路径约定。文章后面会先把文件结构过一遍再把每个核心页面的实现方式拆开最后把最容易翻车的图片路径、图标字体、CDN 依赖、浏览器兼容这几个点单独拎出来讲。2. 先拆压缩包文件结构、页面骨架与全局样式的设计逻辑拿到购物网站.rar解压后第一件事不是双击 index.html而是把目录结构列一遍。这个习惯能帮你判断一份源码是“能跑的作业”还是“只适合交差的演示”也能让你在后面替换图片、加页面时不至于把手伸进一堆混乱的文件名里。2.1 资源包结构从文件名反推页面地图购物网站.rar ├── html/ │ ├── Information.html # 个人中心 │ ├── commodity.html # 商品列表/分类页 │ ├── shopping.html # 购物车页面 │ ├── Login.html # 登录页 │ ├── register.html # 注册页 │ └── index.html # 首页 ├── css/ │ ├── base.css # 全局基础样式重置、公共类 │ ├── style01.css # 电商页面通用样式 │ ├── Login.css # 登录/注册页独立样式 │ ├── swiper-bundle.min.css ├── js/ │ ├── swiper-bundle.js # 轮播库完整版 │ └── swiper-bundle.min.js ├── images/ │ ├── 小米1.png ~ 小米23.png │ ├── 购物车.png、登录.png、查找.png、验证码.jfif │ ├── 商品.jpegbasetagimgScaleFwebp │ └── footer.png └── aa.html # 追加的散页可能是临时测试页从文件命名能看出三件事。第一HTML 页面按功能模块拆成了 6 个独立文件页面之间用a标签互跳这种多页面结构MPA是电商站的经典做法比单页应用SPA更适合初学者理解“页面切换”的本质。第二CSS 拆成了三层base.css负责重置浏览器默认样式和定义通用工具类style01.css承载了商品卡片、导航栏、页脚这些电商站高频组件的样式Login.css则只服务登录注册页避免把表单样式污染到其他页面。第三图片资源全部平铺在 images 目录下命名用的是中文拼音加序号配合img srcimages/小米5.png这种相对路径引用意味着你只要保持目录结构不变整体挪到任何地方都能正常显示。2.2 全站共用的 base.css为什么电商页一定要先做样式重置浏览器对 HTML 元素默认样式各有差异最典型的是ul的list-style和paddingFirefox 和 Chrome 渲染出的缩进不一样。base.css的作用就是把这些不一致抹平让后续样式在不同浏览器里表现一致。里面的深度清理规则值得抄到自己项目里* { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } input, button { outline: none; border: none; background: none; }逻辑说明*通配符把全局内外边距清零box-sizing: border-box让width包含了padding盒模型不会因为加内边距而撑破布局——这是后面所有卡片、输入框能对齐的前提。a标签去掉下划线并继承父级颜色保证导航栏和商品链接的配色统一由外层控制不用每个链接单独写颜色。img设成块级元素并限制最大宽度防止图片在窄容器里溢出。input和button去边框去背景把样式控制权完全交给自己的类这在登录页和搜索框里特别明显。参数说明这套重置是“激进派”做法适合样式完全自定义的电商站如果是做后台管理面板表单控件保留原生边框反而更省事。实际使用时box-sizing: border-box这一条建议保留它能让百分比宽度和内边距共存时不出现横向滚动条。2.3 布局选型为什么首页用的是 Flex 加固定宽度容器查看 index.html 的顶层结构通常是一个div.container或.center包裹所有内容宽度设定在 1200px 左右并水平居中。这种“通栏背景 定宽内容”的布局是电商首页的标准范式导航栏、轮播、商品分区、页脚的背景色各自贯穿全屏但里面的内容都收在同一个 1200px 容器里视觉整齐又方便统一改宽度。商品卡片排序如果用了display: flex配合flex-wrap: wrap那么每个卡片指定width: 25%或calc(25% - 20px)就能自动换行排成四列。这里有一个关键的取舍点用 Flex 而不是 Grid是因为商品卡片的尺寸不要求严格等分Flex 的主轴对齐和justify-content: space-between可以让最后一行的卡片贴左排列视觉上更接近真实电商站的商品瀑布。CSS Grid 更适合行、列都要严格对齐的场景比如后台的表格类布局。如果项目里要增加响应式媒体查询的位置通常会放在 style01.css 的最底部media screen and (max-width: 768px) { .container { width: 100%; padding: 0 10px; } .goods-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .goods-item { width: 48%; margin-bottom: 10px; } }逻辑说明当视口宽度小于等于 768px容器不再固定 1200px而是占满全屏并留 10px 内边距商品卡片宽度变成 48%两列排列。这段代码说明了一个重要事实CSS 的响应式不改变 HTML 结构只通过媒体查询覆盖布局参数。3. 首屏三件套轮播图、导航栏与商品卡片的实现拆解电商网站首页的信息密度很高但视觉上却要让人觉得“乱中有序”。这份源码里承担这个任务的三块核心分别是 Swiper 轮播、吸顶导航和商品卡片网格。下面逐个拆出它们的实现方式和关键参数。3.1 Swiper 轮播的接入方式从 CDN 到本地化的完整流程Swiper 是目前前端用得最多的免费轮播库。这份源码把swiper-bundle.js和swiper-bundle.css放在了本地 js 和 css 目录说明作者考虑到了“演示环境可能没外网”的问题这个习惯值得学习。HTML 侧的结构固定为三段式一个swiper容器内部是swiper-wrapper包裹的多个swiper-slide每个 slide 放一张imgdiv classswiper mySwiper div classswiper-wrapper div classswiper-slideimg srcimages/小米1.png alt小米手机/div div classswiper-slideimg srcimages/小米5.png alt小米手环/div div classswiper-slideimg srcimages/小米13.png alt小米家电/div /div div classswiper-pagination/div /div逻辑说明swiper-wrapper是滑动轨道的核心所有 slide 会在这个轨道上横向排列。swiper-pagination是分页器小圆点放在容器内、wrapper 外由 Swiper 自动填充。要注意容器上的mySwiper类名它是 JS 初始化的唯一标识如果把它删掉滑动会失效。JS 侧初始化通常放在 HTML 底部script srcjs/swiper-bundle.js/script script var mySwiper new Swiper(.mySwiper, { loop: true, autoplay: { delay: 3000, disableOnInteraction: false, }, pagination: { el: .swiper-pagination, clickable: true, }, }); /script参数说明loop: true开启无限循环滑到最后一张后又平滑回到第一张autoplay.delay表示 3 秒自动切换一次disableOnInteraction: false允许用户在手动滑动后继续自动播放不做自动播放的场景要注意disableOnInteraction和delay的取值范围是否会冲突。如果你的页面里已经引入了 jQuery请不要让 Swiper 的初始化代码被 jQuery 的 ready 事件包裹避免在极少数情况下初始化顺序错乱。3.2 吸顶导航的实现position sticky 的一个参数值导航栏是电商页里信息密度最高的横向组件通常包含 Logo、搜索框、分类菜单和用户入口。这份源码的导航结构大致是 Logo 在左、搜索框居中、右侧是“登录”“购物车”链接。要把导航固定在页面顶部常见做法是position: fixed但这份源码如果用了position: sticky效果会更好。.nav { position: sticky; top: 0; z-index: 100; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }逻辑说明position: sticky的行为是“滚动到顶就吸住”它不需要像fixed那样额外给 body 加 padding-top 来补偿导航的高度也不会遮挡初始位置的页面内容。z-index: 100保证商品图片和轮播在滚动时不会盖住导航。如果你的浏览器里 sticky 失效最可能的原因是父级容器有overflow: hidden或设置了overflow-x: auto这两类属性会破坏 sticky 的参照系。排查方法删除该容器上的 overflow 属性或把 sticky 元素直接挂到 body 的直属子节点。3.3 商品卡片的 CSS 网格布局从图片尺寸到价格标签的规范商品区是首页的大头。每个商品卡片的结构通常是div classgoods-item a hrefcommodity.html img srcimages/小米6.png alt商品图片 h3小米手环 7/h3 p classprice¥249/p p classtag新品上市/p /a /div对应的核心样式.goods-list { display: flex; flex-wrap: wrap; justify-content: space-between; } .goods-item { width: 24%; margin-bottom: 20px; background-color: #fff; border-radius: 8px; transition: transform 0.3s ease; } .goods-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }逻辑说明width: 24%配合justify-content: space-between可以做到四列等宽且两端对齐最后一行的商品如果不满四个依然靠左排列不拉伸。hover时向上平移 5px配合阴影形成“卡片抬升”的视觉反馈这是电商页很常见的交互细节成本极低但效果明显。参数说明价格标签如果用了大号红色粗体一般是在.price上设置font-size: 20px; color: #ff6700; font-weight: bold;这个色值正是小米的品牌橙。改颜色时全站统一搜索#ff6700即可替换不要一处一处手动调。4. 走进内部页面商品列表、购物车与登录注册的实现细节首页解决的是“吸引浏览”内部页面解决的是“驱动操作”。商品列表页承接点击跳转购物车页展示选品结果登录注册页完成用户入口。这三个页面用到的 HTML 标签和 CSS 技巧明显不同也最能体现页面间的设计一致性。4.1 商品列表页 commodity.html筛选条件的排列与卡片复用商品列表页的信息量通常大于首页因为它要承担“分类浏览”功能。页面顶部一般是一个筛选条包含分类、价格区间、排序方式等下方就是复用首页的商品卡片。filter 区域实现在这里div classfilter-bar span classfilter-label分类/span a href# classactive全部/a a href#手机/a a href#智能穿戴/a a href#家电/a span classfilter-label价格/span a href#0-999/a a href#1000-2999/a a href#3000/a /div对应样式.filter-bar { display: flex; align-items: center; gap: 8px; padding: 15px 0; border-bottom: 1px solid #e0e0e0; font-size: 14px; } .filter-bar a { padding: 5px 12px; color: #333; border-radius: 4px; } .filter-bar a:hover { color: #ff6700; background: rgba(255, 103, 0, 0.1); } .filter-bar a.active { color: #fff; background: #ff6700; }逻辑说明这个筛选条的核心是把“分类”和“价格”两组选项放在同一行通过display: flex实现水平排列gap控制间距。.active类和:hover伪类使用了同样的橙色背景逻辑区分点是a.active的优先级高于a:hover所以先 hover 再点击样式能稳定落在 active 上。静态网站里点筛选不会真过滤商品实际使用时把>table classcart-table thead tr th商品信息/th th单价/th th数量/th th金额/th /tr /thead tbody tr tdimg srcimages/小米9.png alt小米手机/td td¥1999/td tdinput typenumber value1 min1/td td classsubtotal¥1999/td /tr tr tdimg srcimages/小米11.png alt小米手环/td td¥249/td tdinput typenumber value1 min1/td td classsubtotal¥249/td /tr /tbody tfoot tr td colspan4 classcart-total 合计span idtotalAmount¥2248/span /td /tr /tfoot /table对应样式.cart-table { width: 100%; border-collapse: collapse; background-color: #fff; } .cart-table th, .cart-table td { padding: 15px; border-bottom: 1px solid #eee; text-align: center; } .cart-table img { width: 80px; height: 80px; vertical-align: middle; margin-right: 10px; display: inline-block; } .cart-table input[typenumber] { width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; text-align: center; } .subtotal { color: #ff6700; font-weight: bold; }逻辑说明border-collapse: collapse将双线边框合并成单线是表格最常见的配置。表头thead单独控制背景色tbody 每行底边出现分割线。输入框input[typenumber]自带增减按钮在购物车场景里是最低成本的“改数量”方案真实电商项目通常用自定义的加减按钮因为原生 number 按钮的样式在不同浏览器里渲染不一致。参数说明表格列宽不固定时图片在单元格里默认是内联元素需要设width: 80px; height: 80px并配合vertical-align: middle才能看起来整齐。总量#totalAmount里的¥2248是写死的想变成“数字变化”可以参考以下 JS 片段const qtyInputs document.querySelectorAll(.cart-table input[typenumber]); const totalEl document.getElementById(totalAmount); function updateTotal() { let sum 0; document.querySelectorAll(.cart-table tbody tr).forEach(row { const price parseFloat(row.querySelector(.price-hidden).textContent); const qty parseInt(row.querySelector(input).value); const subtotal price * qty; row.querySelector(.subtotal).textContent ¥ subtotal.toFixed(2); sum subtotal; }); totalEl.textContent ¥ sum.toFixed(2); } qtyInputs.forEach(input { input.addEventListener(change, updateTotal); });逻辑说明这段脚本把价格藏在.price-hidden元素里读取数量变化后重算小计和合计。注意toFixed(2)保留两位小数避免浮点数运算产生 0.10.2 类的精度问题。静态页面展示时脚本可以放在 HTML 尾部。4.3 登录与注册页表单验证、验证码图片与 CSS 独立文件的必要性登录和注册页往往长得像一个磨具里倒出来的区别只在“注册要多几个字段”。这份源码单独写了一个Login.css说明作者把表单页的样式从通用样式中抽离避免.input-group这类类名污染主站页面。div classlogin-box h2账号登录/h2 form div classinput-group label手机号 / 邮箱/label input typetext placeholder请输入手机号或邮箱 /div div classinput-group label密码/label input typepassword placeholder请输入密码 /div div classinput-group label验证码/label div classcaptcha-row input typetext placeholder验证码 img srcimages/验证码.jfif alt验证码 classcaptcha-img /div /div button typesubmit classbtn-login登 录/button p classregister-linka hrefregister.html没有账号去注册/a/p /form /divCSS 侧的常见设置为.login-box { width: 400px; margin: 80px auto; padding: 40px; background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .input-group { margin-bottom: 20px; } .input-group label { display: block; margin-bottom: 6px; font-size: 14px; color: #666; } .input-group input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; transition: border-color 0.3s; } .input-group input:focus { border-color: #ff6700; } .captcha-row { display: flex; gap: 10px; } .captcha-img { width: 100px; height: 40px; cursor: pointer; border-radius: 4px; }逻辑说明把验证码图片和输入框放进同一个flex容器实现“输入框 图片”在一行内对齐。label做成块级元素让文字提示与输入框分行。焦点时输入框边框变橙给用户当前编辑位置的视觉反馈——这种反馈依赖:focus伪类代码量几乎为零但体验提升明显。真正的验证码是有后端参与生成的前端战略上用一张静态图片代替是常规做法。作业演示阶段完全够用但如果要在简历里写“验证码模块”至少要提一句“前端仅做校验展示实际验证应交给服务端”并考虑给图片绑定一个随机数参数来模拟刷新onclickthis.srcimages/验证码.jfif?t Math.random()。这里涉及到的Math.random()是在请求 URL 末尾附加随机数字浏览器会把它当成新地址重新拉取一次图片实现“点击换图”的效果。注册页的常见差异化字段包括确认密码、手机号、验证码。密码强度检测属于加分项如果你想把这块也做成静态演示思路是监听输入框的input事件根据密码长度和字符组合改变提示条的颜色const pwdInput document.getElementById(pwd); const strengthBar document.getElementById(strengthBar); pwdInput.addEventListener(input, function () { const val pwdInput.value; let level 0; if (val.length 6) level; if (/[A-Z]/.test(val)) level; if (/[0-9]/.test(val)) level; if (/[\W_]/.test(val)) level; strengthBar.className ; if (level 1) strengthBar.classList.add(weak); else if (level 2) strengthBar.classList.add(medium); else if (level 3) strengthBar.classList.add(strong); });逻辑说明通过正则表达式判断是否包含大写字母、数字和特殊字符level 值代表命中了几类条件再在 CSS 里定义.weak、.medium、.strong三段颜色。这种判断是一个很好理解的“密码强度条”最小实现后端真正校验时不会采用这套规则但前端反馈够了。5. 避坑排查图片路径、Swiper 失效、CSS 样式冲突的常见踩坑记录静态页面本身结构不复杂翻车通常翻在路径、依赖加载和样式覆盖这三类问题上。下面这几条都是实际动手时最容易遇到的按“现象 → 原因 → 解决”的方式写清楚。5.1 图片全部裂开控制台报 404——中文路径和扩展名惹的祸现象打开 index.html 后页面结构在、文字在但所有商品图和轮播图都显示为裂图。原因最常见的是路径写错。一个是images/小米5.png这类中文文件名如果 HTML 文件的编码不是 UTF-8或者文件名里的中文在复制过程中被改成了全角字符浏览器就找不到对应资源另一个更隐蔽的问题是商品.jpegbasetagimgScaleFwebp这个文件名——它看起来像一张图实际是从某个平台复制时把图片 URL 的参数一并带进了文件名里basetagimgScaleFwebp不是合法的扩展名浏览器没法把它当图片解析。解决把带 URL 参数的文件统一重命名成简单的英文格式比如product-01.jpg同时检查所有img的src是否一一对应。中文文件名不是不能用但建议养成英文命名的习惯避免部署到 Linux 服务器上遇到字符编码问题。# 在解压后的根目录下执行把“商品.jpegbase...”这类文件批量重命名 for file in images/*base*; do mv $file images/商品-01.jpg done逻辑说明这是一条 bash 循环把匹配base的文件名改成可读的商品-01.jpg执行后同步把 HTML 里的引用改掉即可。如果你不熟练命令行直接右键重命名文件也行。5.2 轮播图只显示第一张不滑动控制台报 TypeError现象Swiper 的容器和 slide 结构都写对了但轮播静止不动。原因JavaScript 报错十有八九是“Swiper 未定义”。这是引入顺序问题——你把页面自己写的初始化脚本放到了swiper-bundle.js的前面导致执行new Swiper()时 Swiper 构造函数还不存在。解决检查script标签的排列顺序坚持“先引库、后初始化”的固定顺序script srcjs/swiper-bundle.min.js/script script srcjs/my-index.js/script逻辑说明浏览器从上到下执行脚本前面引入的库先进入全局作用域后面的代码才能访问 Swiper 对象。同理Swiper 初始化脚本应该放在 DOM 结构的后面或者用DOMContentLoaded包一层否则容器可能还没渲染完成就执行了尺寸计算。这里再补一个常见的翻车点swiper-bundle.min.js是压缩版swiper-bundle.js是未压缩版。开发阶段建议先用未压缩版报错时能定位到具体哪个方法出了问题部署上线再换成 min 版减小体积。这类库文件的引用顺序和版本匹配是静态页面稳定运行的根基。5.3 CSS 样式“串页”了——登录页的样式污染了购物车页现象打开 shopping.html发现商品价格标签的背景变成了登录页的橙色按钮样式按钮间距也变了。原因Login.css的类名太通用比如用了.btn、.input-group、.container这类高频类名而 shopping.html 里恰好也有同名元素。样式是全局生效的只要你link了 Login.css它的规则就会作用于整个文档。解决给登录页的根节点加上一个专属类所有内部样式都写在它的下方.login-page .btn { background: #ff6700; color: #fff; } .login-page .input-group { margin-bottom: 20px; }逻辑说明.login-page .btn是一个“后代选择器”只匹配.login-page内部的.btn不会误伤其他页面的相同类名。这是 CSS 模块化最简单有效的做法用一个根级类做命名空间。如果你不想改样式也可以在引入页面时只引入自己需要的 CSS 文件不要全站挂载所有样式表。拿这句话来说查看 shopping.html 顶部通常只应出现 base.css 和 style01.css 两行link如果多了 Login.css就是串页隐患。5.4 图片大小不一整个商品区高度参差排版看着乱现象同一排商品卡片有的图片大、有的图片小底部对齐困难。原因素材图片来源不同有的截自官网有的来自社交平台原始尺寸不一样。在 HTML 里直接展示原图就会参差不齐。解决在 CSS 里给.goods-item img设置统一尺寸并附加object-fit: cover.goods-item img { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 8px 8px 0 0; }逻辑说明width: 100%让图片自适应父容器宽度height: 220px统一高度object-fit: cover是这里的关键——它会按比例缩放图片直至铺满容器多的部分裁掉少的部分拉伸补全。三个属性组合图片就不会被压扁或拉伸变形。实际使用时要结合object-position: center保证裁切区域居中避免人物或商品主体偏出画面。5.5 a标签的点击区域太小整张卡片只有文字能跳转现象点击商品卡片除了文字和图片外空白区域点击无反应。原因a标签没有完全包裹.goods-item或者a的 display 仍是 inline宽度和高度只由内部内容撑开没有覆盖整个卡片区域。解决把整个商品卡片的内容包进a并给a设置块级化.goods-item a { display: block; padding: 15px; color: inherit; }逻辑说明display: block让链接占据整行padding 扩大可点击面积。电商站里“整卡可点”是基础体验鼠标光标悬停在卡片任何位置都应变成手势。检查代码时如果a和.goods-item是并列关系点击区域就永远大不起来。6. 把这套页面从“能看”变成“能上线”部署步骤与必要的润色技巧到这里页面已经能跑能跳了。但一份要让老师、面试官或潜在用户满意的作品还需要做三件收尾工作正常的目录重组、本地到线上环境的部署验证、以及把静态页面的“演示味”降到最低。6.1 目录重组去掉临时文件明确三个目录的归属源码包里残留的 aa.html 是一个临时文件大概率是你调试样式时另存的副本正式交付前建议删除否则别人打开会困惑。标准部署目录应该是xiaomi-shop/ ├── index.html ├── css/ ├── js/ └── images/推荐把 HTML 页面统一放到根目录而不是 html/ 子目录里。原因有两点一是相对路径书写简单img srcimages/xxx.png比../images/xxx.png更直观二是部署到 GitHub Pages 或任意静态托管时根目录天然是入口用相对路径的链接不容易断。如果你坚持保留 html/ 子目录那么所有页面间的a跳转都要写成html/shopping.html这类相对路径而图片路径也要相应变成../images/xxx.png这个层级关系只要漏一个就会 404。6.2 Vercel 或 GitHub Pages 部署与本地验证如果你用 VS Code最简单的是装 Live Server 插件右键 index.html 选择 “Open with Live Server”浏览器会自动打开并监听文件改动刷新。这一步验证的是“相对路径是否书写正确”因为 Live Server 模拟了一个本地静态服务器它和直接从文件系统双击打开 HTML 的差异比较大某些浏览器会限制本地文件协议下的模块加载或 AJAX 请求但用 Live Server 后这些限制会消失。要真正给别人看部署到 GitHub Pages 是零成本方案git init git add . git commit -m first commit git branch -M main git remote add origin https://github.com/your-name/xiaomi-shop.git git push -u origin main然后在仓库的 Settings → Pages 中选择Deploy from a branch分支选main目录选/root保存后等一两分钟就能拿到线上地址。梳理一下这里每一步做的事git init初始化本地仓库git add .把目录内所有文件加入暂存区git commit创建第一个提交记录git push把提交推到远程仓库。推到 GitHub 后再在 Pages 面板里指定分支和目录GitHub 会自动构建部署。部署到线上后用浏览器无痕窗口打开线上地址再走一遍六条链接首页、商品列表、详情、购物车、登录、注册。无痕模式会隔离本地缓存能暴露“图片 404”这类资源路径问题。6.3 更“真”一点为轮播图绑定跳转链接、给导航加当前页高亮静态页面最容易露馅的地方是“页面之间的身份不明确”。你从首页点进购物车导航栏的“购物车”链接没有任何特殊状态用户会疑惑“我到底在哪一页”。解决办法是给每个页面自己的导航链接加一个.active类nav classmain-nav a hrefindex.html首页/a a hrefcommodity.html商品/a a hrefshopping.html classactive购物车/a a hrefLogin.html登录/a /nav对应样式.main-nav a.active { color: #ff6700; font-weight: bold; border-bottom: 2px solid #ff6700; }这属于最原始的“高亮当前页”方案纯手工。如果你想自动化在公共 JavaScript 文件里根据location.pathname匹配导航链接然后加类const currentPage location.pathname.split(/).pop(); document.querySelectorAll(.main-nav a).forEach(link { if (link.getAttribute(href) currentPage) { link.classList.add(active); } });逻辑说明location.pathname是浏览器提供的当前路径信息split(/).pop()取出最后的文件名再和每个导航链接的 href 属性比对匹配就加active类。这样新增页面时不需要手动改导航高亮。轮播图同理静态轮播只展示图片但真实电商站每张 banner 都指向对应的活动页。给 slide 里的图片包上a是让演示更扎实的一步div classswiper-slide a hrefcommodity.html img srcimages/小米1.png alt新品首发 /a /div从信息安全角度说一句这套页面里用的小米产品图只适合演示和学习如果要正式上线图片版权问题要提前处理。作业里用没有问题商用必须换图或自己设计素材。6.4 搜索框的点击反馈让静态页面的按钮“有反应”搜索框是电商首页的核心入口。静态页面里输入关键词点击搜索不会触发任何逻辑这会给体验打个折扣。一个低成本的做法是让搜索按钮跳转到 Google 或百度的搜索结果页form actionhttps://www.baidu.com/s methodget target_blank input typetext namewd placeholder搜索小米产品 button typesubmit搜索/button /form逻辑说明把表单的action指向百度搜索接口namewd是百度规定的搜索参数名点击搜索会打开新标签页展示搜索结果。这是一个真实可用的前端交互替换作用在于它不需要任何后端代码却让静态页面看起来是完整的。如果不想跳转外网你也可以用alert(当前为静态演示)这种提示但做法就不够体面了。到这里这份资源能发挥的价值其实已经超出“一份作业”了——它是一套完整的前端页面骨架你可以把小米的商品图换成自己的产品图把价格和文案改成自己的内容把轮播图换成活动海报然后部署成个人作品集或小型的公司产品展示页。从那以后我自己拿到类似的源码包都会先做一遍同样的流程列出目录结构、逐个页面点开查资源引用、把通用样式抽离出来当模板、最后顺手部署到线上验证一遍。这四步走完资源才算真正落到自己手里而不仅仅是解压后看了一眼。希望帮到你。本文还有配套的精品资源点击获取
