刘水音 计算机应用技术 大一实践学期
项目简介
本作品是瑞幸咖啡的网页设计方案，包含丰富交互功能。有欢迎模态框展示新品优惠，轮播图呈现品牌信息，商品卡片有hover放大效果。集成品牌视频自动播放，底部导航栏便于跳转。购物车功能完善，支持添加商品、修改数量、计算总价并保存数据。还有优惠券、评价打分系统，登录注册页面含密码验证与倒计时。页面运用CSS渐变、点击放大等效果，整体交互流畅，提升用户体验。
主要技术
本作品基于现代Web标准开发，核心使用HTML5构建语义结构，如通过`` ``等标签搭建模态框、轮播图、商品卡片、视频播放区、底部导航栏、购物车、评价区、登录注册页等页面模块的基础结构，明确各部分功能语义；运用CSS3实现样式布局与页面过渡效果，包括利用`fixed` `relative`等定位属性设置模态框、底部导航栏的固定显示，通过`flex` `grid`布局实现轮播图、商品卡片、导航选项的排列，借助`border-radius` `shadow`等属性美化元素外观，使用`transition` `transform` `hover`等实现模态框按钮悬停变化、商品卡片点击放大、轮播图切换、收藏样品滑动等过渡动画，以及通过`linear-gradient`实现会员卡片、登录成功页面的渐变背景，同时兼顾响应式设计适配不同设备；功能交互完全采用原生JavaScript实现，涵盖轮播图的自动切换与上下张切换逻辑、商品卡片添加到购物车的相关操作（含数量更新、总计计算、本地存储）、视频播放与暂停控制、评价打星的星级选择逻辑、登录页面的手机号与密码验证、注册页面的验证码倒计时及密码显示隐藏切换等表单验证与功能交互逻辑；作品整合了多媒体内容，包含多张瑞幸咖啡商品及活动图片、品牌视频等；并运用前端模拟数据技术进行数据展示与功能调试，整体技术栈聚焦原生Web能力，提供流畅的用户体验。
首页
商品页
加入购物车
