泊光是一个灯具品牌展示网站的个人演示作品,用来呈现企业介绍、产品浏览和咨询页面的完整效果,并非真实客户订单。
网站包含首页、产品列表、产品详情、品牌介绍和咨询演示五类页面。访客可以浏览品牌内容,按类别筛选灯具,进入详情查看图片和介绍,再将感兴趣的产品带入咨询页。
咨询页支持必填项检查、需求摘要生成和文本下载,操作在浏览器本地完成,不向服务器发送数据。网站不包含在线购买、支付和后台管理。
电脑端采用大图和分栏布局,手机端调整为单列展示和折叠菜单。品牌与产品均为虚构概念,主要展示企业网站的页面组织、响应式布局和前端交互。
网站使用HTML、CSS和原生JavaScript制作,采用多页结构,统一管理导航、页脚和公共样式。产品资料集中配置,详情页根据产品标识展示对应内容,便于后续替换图片、文字和增加产品。
页面通过Flex、Grid和媒体查询调整电脑及手机端布局。JavaScript实现分类筛选、图片放大、移动菜单和表单校验。从产品详情进入咨询页时,通过地址参数带入所选产品,减少重复选择。
表单校验通过后,在页面内生成需求摘要,并支持下载为文本文件;未接入后台提交接口。图片使用WebP格式,源码、样式、脚本和资源分别整理,方便修改与移交。
作品包含五类页面,以及筛选、详情查看、咨询演示的连贯操作流程,可用于展示品牌官网和产品展示站的前端制作效果。