简介以“小米有品”为主题的购物网站前端项目面向网页开发初学者与在校学生尤其适合需要完成课程作业或进行综合练手的读者。项目使用HTML搭建页面骨架CSS控制视觉表现覆盖首页、登录注册、购物车、商品列表与商品详情等电商典型页面。首页包括导航栏、轮播图、商品分类、新品推荐等模块购物车涉及表格、列表与总价计算注册登录页面需要输入框和按钮同时通过媒体查询实现响应式布局以适配不同屏幕设备。资源包为RAR格式共48个文件包含7个HTML页面、4个CSS样式表、1个JavaScript脚本以及大量PNG/JPG图片素材压缩包大小约3.49MB文件按页面类型与图片目录组织便于直接解压浏览。已有3314人学习下载读者可借助完整的页面和样式代码理解HTML与CSS的配合逻辑并可直接用于购物网站课程作业、前端入门练习或改造成自己的作品。1. HTMLCSS购物网站怎么做先搭一个能打开的静态小米有品首页用纯HTML和CSS照着小米有品首页的视觉风格手写一个静态商城页面是前端学习里公认性价比最高的综合实战一个页面同时覆盖文档结构、CSS布局、轮播图、卡片交互、动效和响应式这些知识点做完它HTML和CSS的基础就不用回头补了。这个项目适合三类人刚学完HTML和CSS、想找一个综合实战练手的新手准备前端面试、需要一个能讲清楚的静态项目撑场面的求职者以及给学生布置网页课设、需要一个安全不跑偏题目的老师。别急着上框架也别急着碰JavaScript先用静态页面把布局和视觉手感练扎实后面学JS再往上叠交互。这个项目不涉及后端、数据库和账号系统浏览器直接打开就能看。从拆解首页结构、导航栏、商品卡片、纯CSS轮播图到3D动效、避坑与交付下面完整走一遍。2. 首页拆解与导航栏从设计稿到HTML结构的落地顺序2.1 不要把整个首页当一块先切成六个版块很多新手拿到“小米有品”这种参考站点第一件事是打开编辑器一顿写标签写到一半发现导航该放哪、商品区怎么分组全都乱了。我一般的做法是先不开编辑器拿纸把页面从上到下拆成版块标出每个版块的语义化标签再动手写HTML。页面版的拆分顺序直接决定后面CSS好不好写。小米有品首页从上到下的结构拆出来大概是六个版块顶部信息栏、搜索区、分类导航、Banner轮播、商品推荐区、页脚。前三个可以合进header中间两块放进main页脚用footer。不需要过度语义化但要保证每个版块在HTML里的先后顺序和视觉顺序一致这样即使CSS加载失败页面内容读起来也是顺畅的。先写一版完整的HTML骨架!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小米有品 - HTMLCSS静态商城/title link relstylesheet hrefcss/style.css /head body header classsite-header div classtopbar…顶部窄条…/div div classsearch-bar…Logo 搜索框…/div nav classcategory-nav…分类导航…/nav /header main classsite-main section classbanner…轮播占位…/section section classproduct-grid…商品卡片区…/section /main footer classsite-footer …服务承诺 / 链接 / 版权… /footer /body /html逻辑说明header里放的是“用户一进来最先看到的东西”顶部信息栏、搜索区和分类导航都属于这个范畴它们一起形成商城的第一屏。main包住轮播和商品区一个页面理论上只允许一个main里面的section用来切分主题不同的内容块。langzh-cn声明页面语言为简体中文meta viewport这行在移动端调试时必须有否则手机上看页面会被缩放成一整条。参数说明hrefcss/style.css用的是相对路径这是 CSS 样式引入方式里最推荐的一种项目整体搬走或者交作业压缩包发给别人只要目录结构不变就不会断。新手最容易踩的坑是把CSS写成hreffile:///C:/...这种绝对路径换一台电脑就废。项目目录建议固定成index.html加css/img/两个文件夹后面图片和样式都按这个相对路径走。2.2 导航栏的HTML与CSSflex布局和三个关键间距导航栏是购物网站的门面它承担的是“用户快速找到分类”的职责。小米有品这类站点的导航栏共性非常明显左边是首页入口中间一排分类右边放“关注/签到”这类零散入口。实现上直接用display: flex配合justify-content: space-between就能撑满整行不需要浮动也不需要定位。先看导航栏HTMLnav classcategory-nav ul classnav-list lia href#首页/a/li lia href#手机/a/li lia href#电视/a/li lia href#家电/a/li lia href#电脑/a/li lia href#智能家居/a/li /ul a href# classnav-signin签到有礼/a /nav对应的CSS.category-nav { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 20px; background: #fff; border-bottom: 1px solid #e5e5e5; } .nav-list { display: flex; list-style: none; gap: 24px; } .nav-list a { display: inline-block; padding: 6px 2px; font-size: 14px; color: #333; text-decoration: none; transition: color 0.2s ease; } .nav-list a:hover { color: #ff6700; }逻辑说明导航用了两层flex外层category-nav管左右分布内层nav-list管分类之间的间隔。align-items: center保证左侧菜单和右侧签到链接在垂直方向居中不然height: 48px加上不同字号会把子元素顶得上蹿下跳。list-style: none去掉ul默认的项目符号这是每个项目里都必须写的清除样式。参数说明gap: 24px是分类项之间的间距用gap而不是给每个a加margin好处是最后一个分类右边不会多出多余的间距整行看起来更均衡。padding: 6px 2px的上下6px是给hover文字变色时留出可点击热区左右2px配合整体gap点到文字附近也能触发跳转。hover态跟主色#ff6700保持一致这是商城类站点最经典的强调色。2.3 全局样式reset、border-box和字体栈写任何页面第一步永远是重置浏览器默认样式否则body自带8px外边距、ul自带左内边距、标题自带加粗和边距这些默认值会让你的布局在Chrome、Firefox、Safari里长得不一样。新手经常做出来的页面“换个浏览器就丑了”八成是没做reset。项目中我一般用最轻量的一版* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, -apple-system, sans-serif; background: #f5f5f5; color: #333; line-height: 1.6; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; }逻辑说明*通配选择器把页面上所有元素的内外边距清空box-sizing: border-box是重中之重它让 padding 和 border 算进 width 里面以后写width: 50%再加padding: 10px不会把盒子撑破。color: inherit让链接文字颜色跟随父元素这样分类导航里设置一次颜色全局的a标签都不用逐个调。img的display: block消除图片底部的几像素间隙那是图片默认按文字基线对齐留下的空隙。字体栈的写法注意顺序PingFang SC是苹果系的中文黑体Microsoft YaHei是Windows的微软雅黑-apple-system兜底iOS系统字体最后sans-serif保证任何系统都有字体可渲染。背景用#f5f5f5这种浅灰是商城页面的常见做法能让白色卡片浮出来。3. 商品卡片与轮播图用纯CSS把商城核心版块画出来3.1 商品卡片的布局一张图、一块文字、一个价格商品卡片是商城首页出现频率最高的组件小米有品一套页面上有十几张卡片但它们的结构完全相同商品图在上、标题在下、价格在标题下。这个规律抓准了写CSS就变成同一套样式套多份数据的问题。HTML结构ul classproduct-grid li classcard a href# div classcard-img stylebackground: #e8e8e8; img srcimg/product-1.jpg alt米家电动牙刷 /div div classcard-info h3米家电动牙刷 声波震动 软毛护龈/h3 p classprice99/p /div /a /li !-- 重复此结构替换图片和文字 -- /ul对应CSS.product-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .card { width: 234px; background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); } .card-img img { width: 100%; height: 234px; object-fit: cover; } .card-info { padding: 12px 14px 16px; } .card-info h3 { font-size: 14px; font-weight: normal; } .price { font-size: 16px; color: #ff6700; font-weight: bold; }逻辑说明外层product-grid用flex-wrap: wrap每张卡片固定宽234px宽度不够时自动换行一个页面从5列变3列变2列完全是flex自动算的不需要媒体查询。卡片本身border-radius加overflow: hidden把图片的直角裁成圆角同时保证hover阴影不会超出圆角范围露出方角。参数说明transform: translateY(-6px)是卡片hover反馈里最常用的写法向上浮起6px配合阴影比单纯的变色有质感。0.25s ease的时长设定有讲究小于0.2s会感觉生硬大于0.4s会拖沓0.25s是操作反馈的甜点区间。object-fit: cover让不同尺寸的商品图自动裁剪填满234x234的区域不变形实际商品图的比例不可能完全统一这一行是卡片高度整整齐齐的关键。页面里的“鼠标移入事件”在这里其实不是事件是CSS伪类:hover。新手经常把hover叫成“事件”严格说事件是JS的概念CSS里叫伪类。用hover做视觉反馈不需要写JS这是纯CSS方案的优势。3.2 标题超长省略与价格对齐两个必会的三件套商品标题经常超长“XXpro 5000毫安大容量 超长续航”十几个字在234px宽的卡片里肯定放不下直接换行会把卡片撑得高低不齐。商城页面的通用做法是单行省略或者两行省略后截断。单行省略三件套.card-info h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }逻辑说明white-space: nowrap禁止换行overflow: hidden把超出部分藏起来text-overflow: ellipsis在隐藏位置显示省略号。三行缺一不可少一行都不生效。如果想让标题保留两行第二行末尾出现省略号需要另一种写法.card-info h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }逻辑说明display: -webkit-box开启老版弹性盒模型-webkit-line-clamp: 2限定最多显示2行-webkit-box-orient: vertical指定纵向排列。注意这组的兼容性不如单行三件套Firefox从68版本开始支持-webkit-line-clamp但老版本浏览器会直接显示全部文字不会崩所以可以放心用。单行省略和两行省略选哪个取决于产品视觉风格。密集展示的商城卡片一般用单行大图卡片用两行。我自己的习惯是拿不准就选单行最保守任何屏幕下都不会错位。3.3 纯CSS轮播图不要写JS也能循环播放轮播图是这个项目里新手最犯怵的版块。很多人第一反应是“轮播必须用JS”实际上纯CSS用animation加transform: translateX完全能做只是不能支持手动点击切换——那是JS交互的范畴。静态项目里纯CSS轮播足以撑起视觉完成度还能让新手理解动画的本质是“在一定时间内改变CSS属性值”。HTML结构5张banner图放在一个轨道容器里section classbanner div classbanner-track div classslide stylebackground: #f0d5b7;新品首发/div div classslide stylebackground: #d1e3f5;智能家电节/div div classslide stylebackground: #c9e8d0;以旧换新/div div classslide stylebackground: #f5d1d1;好物5折/div div classslide stylebackground: #e3d1f5;米粉节/div /div /section对应CSS.banner { width: 100%; max-width: 1226px; margin: 14px auto 0; overflow: hidden; border-radius: 8px; } .banner-track { display: flex; width: 500%; animation: bannerScroll 15s linear infinite; } .slide { width: 20%; height: 360px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #666; } keyframes bannerScroll { 0% { transform: translateX(0); } 20% { transform: translateX(0); } 25% { transform: translateX(-20%); } 45% { transform: translateX(-20%); } 50% { transform: translateX(-40%); } 70% { transform: translateX(-40%); } 75% { transform: translateX(-60%); } 95% { transform: translateX(-60%); } 100% { transform: translateX(-80%); } }逻辑说明轨道容器.banner-track是5张图的水平拼合宽度设为500%每张.slide占20%正好一张图等于轨道宽度的五分之一那么translateX(-20%)就是向左移动一张图的宽度。关键在动画关键帧的设计0%和20%都保持原位意思是第一张图停留5秒25%时移到-20%也就是用1秒完成从第一张到第二张的滑动——这里的百分比和总时长15秒是直接对应的。参数说明15秒循环5张图每张停留5秒、切换1秒、停留5秒……最后100%落在-80%即显示第五张。linear保证整个动画匀速如果你想切换速度更丝滑可以改成cubic-bezier(0.4, 0, 0.2, 1)。跳回第一张的瞬间发生在动画循环重启时也就是从-80%跳回0因为第五张和第一张视觉上相邻这个跳变用户几乎感知不到。注意.banner必须设overflow: hidden否则5张图会横向溢出撑破页面。4. 交互感与动效CSS 3D旋转、字体渐变与吸顶导航的参数调优4.1 3D翻转rotateY正负怎么判断商品卡片的进阶玩法是做3D翻转正面是商品图背面是卖点文案鼠标移上去卡片像扑克牌一样翻过来。这个效果在小米有品的活动页里很常见实现上不需要3D库CSS的transform配合perspective就够。先看清楚transform: rotateY(60deg) translateZ(300px)这类组合变换到底长什么样。rotateY(60deg)是绕Y轴旋转60度Y轴在CSS坐标系统里是竖直向下的translateZ(300px)是沿Z轴往屏幕外移动300px。两者组合的效果是卡片右边缘向屏幕里压进去左边缘向观察者翘起来同时整张卡片朝人脸靠近了300px。这种组合在CSS里执行顺序是从右往左的先位移再旋转所以新手调参数时经常发现“为什么移动方向和我想的不一样”。正负判断有一条能记住的规则rotateY的正值让元素的右侧向屏幕里转、左侧向屏幕外转负值正好相反。以一张卡片为例rotateY(180deg)就是左右完全翻转正面变成背面。下面是一个可以直接照抄的商品卡3D翻转.card-3d { width: 234px; height: 320px; perspective: 1000px; } .card-3d-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; } .card-3d:hover .card-3d-inner { transform: rotateY(180deg); } .card-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; } .card-face.back { transform: rotateY(180deg); }逻辑说明父容器.card-3d设perspective: 1000px这是3D景深的距离数值越小立体感越强但畸变也越明显1000px是折中的默认值。.card-3d-inner的transform-style: preserve-3d告诉浏览器保留子元素的3D位置没有这一行子元素会被压平成一个平面翻转效果就废了。.card-face用绝对定位让正反两面重叠backface-visibility: hidden让背面朝用户时那一面隐藏否则翻转后能看到正面的镜像。参数说明hover时rotateY(180deg)实现完整翻转。.card-face.back自己也要转180度这是为了让背面文字的阅读方向在翻转后是正的否则你会看到镜像文字。0.6s ease的翻转时长比普通hover的0.25s长因为3D动效需要更多时间让眼睛跟随。这里再多说一句rotateX和rotateY的判断规则一样正值让下侧或右侧往屏幕里转负值让它们往屏幕外翘。想确认方向时不用背规则直接在浏览器开发者工具里改角度鼠标拖一下就知道哪个方向了。4.2 字体渐变与吸顶导航两个最常用的商业站技巧商城页面的价格、活动标题经常用渐变色不是整块图片而是文字本身从一种颜色过渡到另一种颜色。CSS里做文字渐变的核心是background-clip: text把背景裁剪成文字的形状再把文字颜色设为透明。.price-gradient { font-size: 24px; font-weight: bold; background: linear-gradient(90deg, #ff6700, #ff9500); -webkit-background-clip: text; background-clip: text; color: transparent; }逻辑说明linear-gradient(90deg, #ff6700, #ff9500)定义从左到右的橙黄渐变background-clip: text把背景限制在文字笔画范围内color: transparent让文字本体透明露出来的就是背景渐变。-webkit-background-clip是为了兼容旧版Chrome和Safari现在标准属性background-clip: text已经得到主流浏览器支持但前缀写法保留着不碍事。吸顶导航是电商页另一个标配页面往下滚导航栏始终吸附在屏幕顶部。最省事的方案是position: sticky它的优势是不脱离文档流——原始空间还在下方内容不会突然顶上来。.category-nav { position: sticky; top: 0; z-index: 100; background: #fff; }逻辑说明top: 0是吸顶的触发位置导航栏距离视口顶部为0时开始固定。z-index: 100保证滚动时商品卡片不会盖住导航。sticky有一个非常隐蔽的限制它的吸附效果只在父容器范围内生效而且如果父容器或祖先元素设置了overflow: hidden或overflow: autosticky会直接失效。这个坑在下面避坑章会重点展开。需要注意sticky对父容器高度有要求。如果header的高度正好等于导航栏高度没有多余空间滚动时导航栏没有“可吸附的旅途中转区”效果也会不出现。一般把吸顶导航放到body或者很高的容器内问题就自然消失。4.3 动效参数别一上来就调炫的先把三个基础参数设对动效翻车绝大多数不是效果本身的问题而是三个基础参数没设对时长、缓动函数、触发范围。时长决定手感。hover反馈、按钮态变化用0.15s~0.25s让操作感觉跟手卡片翻转、弹窗出现这类较大幅度的动效用0.4s~0.6s轮播、走马灯这类连续播放的用8s~20s的周期。小于0.1s的动画用户根本感知不到大于1s的会让等待变得焦躁。页面里所有动效时长尽量统一成几个固定档位整个项目的节奏才协调。缓动函数决定质感。ease是默认值开头快结尾慢用于大多数场景linear适合轮播这类持续匀速的运动cubic-bezier(0.4, 0, 0.2, 1)是 Material Design 的标准曲线用在卡片浮起、对话框这类“快进慢出”的场合很高级。不要去背贝塞尔曲线参数直接在浏览器开发者工具的动画面板里拖动曲线手柄看到满意再复制。触发范围决定性能。transition只作用于你在属性列表里声明的属性不要写transition: all 0.3s这会让hover时所有可动画属性一起过渡包括box-shadow这种重绘代价高的属性。最佳实践是只过渡transform和opacity这两个属性由GPU加速不触发重排在手机上滚动时不会掉帧。5. 避坑排查静态购物网站最容易翻车的5个细节5.1 吸顶导航突然固定不住页面往下滚它就跑了现象position: sticky写上了top: 0也写了导航栏在页面顶部时一切正常一往下滚动就直接滚动走完全不吸附。原因sticky的吸附范围被祖先容器的overflow属性限制了。常见的触发场景是为了清除浮动或者做圆角裁切在header或body上写了overflow: hidden浏览器就会把sticky的参考范围限制在祖先容器内容器滚出视口导航跟着走。解决检查所有祖先元素把header、main、body上的overflow: hidden删掉或者把sticky元素往上提直接挂在body的子级。如果确实需要overflow: hidden来裁切子元素就改用position: fixed加body { padding-top: 48px; }的组合用固定定位加占位高度模拟吸顶效果。5.2 轮播图画到一半突然跳回第一张或者干脆不循环现象纯CSS轮播播放到第二张或第三张时画面突然闪回第一张循环节奏乱七八糟有时候第一张停留时间明显比其他张短。原因关键帧百分比和时间轴没对齐。比如5张图总时长15秒每张应该停留3秒但关键帧里第一段停留写成了0%到30%4.5秒第二段停留只给到50%3秒百分比之间的间隔就决定了每张图的停留时间写错就乱。解决先把总时长拆成“切换停留”的基本单元。5张图等于5次停留加5次切换总共15秒每张停留2.5秒、切换0.5秒。每个停留段占2.5/15 ≈ 16.6%切换段占3.3%。写关键帧时按这个节奏排最后100%落在最后一张停留结束的位置。还有一种更简单的检查方法临时把animation-duration改成30s停留和切换的节奏会被放大哪里不对一眼就能看出来。5.3 商品标题超长换行把卡片撑得参差不齐现象一部分卡片标题是一行另一部分是两行商品卡片的高度对不齐整个商品区像锯齿一样。原因没有给标题设置省略规则也没有给卡片设固定高度。标题字数不同换行后行数不同卡片被内容撑高。解决给.card-info h3加上单行省略三件套同时给.card-info设置固定高度比如height: 48px内部用flex或padding控制内容垂直位置。如果一定要两行标题用上一章说的-webkit-line-clamp: 2同时给.card-info设高度为两行文字的高度加padding保证任何卡片都占一样高的空间。记住省略规则要写在父容器有宽度约束的前提下否则max-width: 100%缺了省略号还是不出来。5.4 本地打开CSS样式时灵时不灵换个电脑直接裸奔现象双击index.html用浏览器打开样式有时正常、有时完全丢失控制台报错“Access to CSS stylesheet at file:///... has been blocked”图片也经常裂掉。原因浏览器对本地file://协议下的外部资源有限制策略而且file://路径是绝对路径项目文件夹一移动路径全断。这个问题在交作业、发压缩包时最容易爆雷别人解压到桌面后路径对不上样式自然加载不出来。解决项目里CSS、图片全部用相对路径引用CSS链接写成css/style.css图片写成img/product-1.jpg。本地预览不要双击打开起一个本地HTTP服务在项目文件夹下执行python -m http.server 8000浏览器访问http://localhost:8000。这样既绕开了file协议的限制也模拟了真实的部署环境路径问题在本地就能暴露。新手可以养成一个习惯任何静态页面都以http://localhost方式预览不直接双击。5.5 外边距塌陷给第一个商品卡片设margin-top结果整个父容器跑了现象想给商品卡片区上方留出间距写了.product-grid { margin-top: 20px }结果整个商品区连同上方的banner一起被顶下去了间距出现在了页面最外层。原因这是CSS的经典“外边距折叠”问题。垂直方向相邻的两个外边距会合并成较大的那一个父容器和第一个子元素的上外边距也会合并最后的外边距跑到父容器外面去了。解决有三个方案任选。第一种父容器改用padding-top而不是子元素的margin-top这是最直接的做法。第二种给父容器加overflow: hidden或border-top: 1px solid transparent阻断外边距合并。第三种用flex或grid布局在.product-grid上用gap: 14px控制内部间距完全不依赖margin也就不会被折叠。我的习惯是同一个容器内的间距统一用flex的gap不同版块之间的间距用padding全局不用margin从根上消灭这一类问题。6. 验证与收尾让本地页变成可交付的作品页面写完不是结束交付前要过三关验证标准、验证路径、验证体验。先做标准验证。打开W3C的HTML验证服务把index.html整个文件内容粘贴进去或者拖文件上传它会列出所有标签嵌套错误、未闭合标签、属性拼写错误。大多数时候报错集中在img缺alt、section缺标题这类问题上按提示修完页面兼容性会明显提升。CSS可以用npx stylelint之类的工具查语法不过静态项目规模不大浏览器开发者工具里没有报错基本就够。再验证路径。启动本地服务后用浏览器的无痕模式打开禁用缓存刷新一次确认CSS和图片都加载成功。接着检查所有链接是否可点把鼠标停在每个分类上确认hover态正常。这里有个实操技巧在开发者工具Console里执行document.querySelectorAll(a).length能快速统计链接数量再逐个点一遍比肉眼扫页面可靠。最后一个动作是压缩交付。把项目文件夹里的node_modules、.DS_Store这类无关文件清掉只保留index.html、css、img然后压缩成zip。给别人时在压缩包内也保留同样的目录层级不要在一个文件夹里再套一层文件夹否则对方解压后路径又多了一层容易出问题。页面交付后如果有余力可以再走一步用CSS变量替换主色。在:root里定义--primary: #ff6700所有用到主色的地方都换成var(--primary)下次想快速换个主题色只改一行。这种升级能让你从“写CSS”进入“设计CSS”的意识层面。这个项目做完比较值得的收获是你亲手证明了“不用JavaScript也能做出一个完整的商城首页”。我现在做静态落地页仍然保留这个习惯先用纯CSS把视觉稿还原到九成再考虑要不要加JS交互。很多页面做到最后会发现JS只是锦上添花CSS基本功才是决定页面美丑的分水岭。希望这些步骤和踩坑记录能帮你少走几趟弯路。本文还有配套的精品资源点击获取