语言技术
HTML5、CSS、JavaScript系统类型
Web行业分类
企业服务
中小企业建站是最常见、也最容易被做砸的一类需求：老板预算有限、不懂技术，但要求官网在手机上打开体面、能被搜索和微信分享到、能接到咨询电话。市面上不少模板站依赖 jQuery 与外部图床，客户内网一屏蔽境外域名就开天窗，手机端排版也常常错位。
本项目是面向家装行业的通用企业官网交付模板，同样适用于建材、全屋定制、设计工作室等泛家居客户。目标是把「信任展示 → 案例说服 → 表单留资」这条转化链路做完整：首屏讲清你是谁、数据条建立信任、四宫格说清业务范围、精选案例证明做过、FAQ 提前消解疑虑、最后用预约表单收口。
交付后客户替换公司名、联系方式与案例照片即可上线，不需要服务器和数据库。
全站 12 个页面，纯静态输出，无外部依赖。
① 首页：Banner 主视觉 + 信任数据条（13 年 / 620 套 / 62% 转介绍）+ 核心业务四宫格 + 精选案例 + 客户评价 + 预约表单与位置示意；
② 案例模块：1 个列表页 + 6 个详情页。详情页含项目信息卡（小区 / 面积 / 户型 / 风格 / 工期 / 造价 / 主材）、设计说明、实景照片、业主原话、上下页导航；
③ 关于我们：公司故事、发展时间轴、团队介绍、资质荣誉；
④ 常见问题：11 条问答，手风琴式折叠，同时只展开一条；
⑤ 联系我们：预约表单（称呼 / 手机号 / 小区面积 / 需求类型 / 补充说明），带逐字段校验与提交成功态；联系方式卡与位置示意；
⑥ 全站共用组件：吸顶导航（滚动加深阴影）、移动端侧滑菜单、面包屑、页脚导航、移动端底部悬浮咨询条（一键拨号）；
⑦ 工程化基础件：自定义 404 页、robots.txt、sitemap.xml、favicon、apple-touch-icon、Open Graph 分享卡片（1200×630）。
我独立完成从信息架构、视觉到编码、SEO 基础件的全部环节：整理页面清单与导航结构、编写全部 HTML / CSS / JS、选配图片素材并统一色调、逐断点做响应式适配、最后校验全站链接。
技术：原生 HTML5 + CSS3 + 原生 JavaScript，零第三方依赖（无 jQuery、无框架、无构建步骤），整个目录拖到任意静态托管即可运行。
架构：CSS 用自定义属性统一色板、圆角与间距（全站 175 处 var() 调用），改一处配色能全站生效；布局 Flex 与 Grid 混用，断点 600 / 900 / 1100px 自下而上叠加，严格移动端优先。
亮点：
① 39 张图片全部本地化为 WebP，按页头 1600px、缩略图 800px 分档输出，总体积 3.7MB，彻底去掉外部图床依赖，客户内网屏蔽境外域名也不会开天窗；
② 滚动淡入做成渐进增强——只有脚本生效时才隐藏待入场元素，禁用 JS 时所有内容照常显示，不会留一块空白。
难点：
① 手写移动端优先的响应式，需要逐个断点核对间距与字号，改一版要同时看三个宽度；
② 滚动入场本可以用 IntersectionObserver，但图片懒加载会持续改变页面高度，异步回调容易漏掉被推移的元素，结果是一整块内容永久不可见——改为同步量取位置，牺牲一点性能换取「绝不漏」，另外补了多次延时兜底；
③ 静态站没有后端，表单用前端校验 + 成功态提示形成闭环，真实项目在提交处接入第三方表单服务或客户 CRM 即可。
评论