鲜花商城HTML 版项目简介鲜花商城是一个面向移动端的鲜花电商前端演示项目采用纯 HTML CSS JavaScript 实现无需构建工具即可直接运行。项目模拟了完整的购物流程浏览商品、查看详情、下单确认、订单管理以及用户登录注册适合作为前端大作业或移动端页面练习。技术栈技术说明HTML5页面结构CSS3样式与移动端适配JavaScript交互逻辑与 Mock 数据Swiper 8首页与详情页轮播图CDN 引入localStorage模拟用户登录态与注册数据持久化功能介绍1. 首页index.html顶部轮播图自动播放鲜花分类导航全部、爱情鲜花、生日鲜花、友情鲜花、婚礼鲜花商品排序筛选综合、销量、价格、新品双列商品列表展示图片、名称、价格、原价、销量、标签点击商品跳转详情页通过 URL 参数传递商品 ID底部导航首页、订单、我的2. 商品详情flower-detail.html商品图片轮播展示展示商品名称、价格、描述、花语、配送范围、温馨提示服务标签新鲜直达、3 小时送达「立即下单」跳转至订单确认页3. 订单确认orderComfirm.html展示待购商品信息收货地址、配送时间与配送方式订单备注输入价格明细商品金额、配送费、优惠券、实付款提交订单后提示成功并返回首页4. 订单列表orderList.html订单状态 Tab全部、待付款、待发货、待收货、已完成订单卡片展示订单号、状态、商品信息、规格、价格不同状态对应操作按钮取消订单、去支付、联系客服、查看物流、确认收货、删除订单、再次购买支持返回上一页5. 个人中心my.html展示用户头像、昵称、用户 ID功能入口我的订单、退出登录退出登录清除登录态并跳转登录页6. 用户登录login.html用户名 / 密码登录表单校验非空校验「记住我」选项UI 展示登录成功后将用户信息写入localStorage已登录用户自动跳转首页7. 用户注册register.html用户名、昵称、密码、确认密码密码强度实时检测弱 / 中 / 强用户名重复校验、密码长度与一致性校验注册数据持久化至localStorage测试账号用户名密码user1123456user2123456user3123456运行方式直接用浏览器打开index.html即可或使用本地静态服务器# 方式一Python 内置服务python3-mhttp.server8080# 方式二VS Code Live Server 插件# 右键 index.html → Open with Live Server访问地址示例http://localhost:8080/index.html文件夹目录flower-mall-html/ ├── index.html # 首页轮播图、分类、商品列表 ├── flower-detail.html # 商品详情页 ├── orderComfirm.html # 订单确认页 ├── orderList.html # 订单列表页 ├── my.html # 个人中心 ├── login.html # 登录页 ├── register.html # 注册页 ├── flower.jpg # 商品与轮播图示例图片 ├── 项目说明.md # 项目说明文档本文件 └── 演示材料/ └── 效果演示.mp4 # 项目效果演示视频页面跳转关系login.html ←→ register.html ↓ index.html → flower-detail.html → orderComfirm.html → index.html ↓ ↓ orderList.html my.html说明本项目为前端静态演示商品、订单、用户数据均为 Mock 数据无真实后端接口样式内联在各 HTML 文件中未拆分独立 CSS / JS 文件页面按移动端设计最大宽度约 750px建议在手机浏览器或开发者工具移动模式下查看