xx机械设备有限公司模版产品系统

传统机械设备制造企业的官网普遍存在视觉风格陈旧、移动端适配差、产品展示不清晰等痛点。
本作品旨在打造一套基于纯前端技术的高质量机械设备企业官网，解决企业线上品牌形象展示、
产品信息传达及高效获客的问题，适用于传统制造企业数字化转型的线上展示场景。

本项目采用原生 HTML5、CSS3 和 JavaScript 开发（无第三方框架依赖），实现了全端响应式适配。核心功能包括：
全局响应式导航：支持桌面端透明悬浮、滚动变色，移动端折叠汉堡菜单，并自动高亮当前所在页面的导航项。
产品轮播与展示：首页无依赖原生 JS 轮播组件，支持左右按钮、底部细线指示器、键盘方向键及移动端手指滑动切换，点击图片可跳转详情页。
产品详情与参数：包含图文优势介绍及结构化的参数表格（斑马纹样式）。
新闻资讯模块：新闻列表采用卡片网格排版，详情页提供舒适的富文本阅读体验。
通用交互组件：包含返回顶部按钮、一键拨号/邮箱联系区域、页脚信息展示等，共 15 个页面，完整闭环。

在线预览：https://zlhzcq.github.io/mechanical-website/
本人独立完成了该机械设备企业官网模板的全部前端开发工作。包括：15个HTML页面的结构搭建（涵盖首页、产品中心、6个产品详情页、新闻列表、4个新闻详情页、关于我们、联系我们）；全站CSS样式编写与视觉还原；原生JavaScript交互逻辑开发；以及最终使用Git进行代码版本管理，并部署至GitHub Pages供在线预览。
原生 HTML5 + CSS3 + JavaScript（无第三方框架依赖）
响应式架构：采用 Flexbox 与 CSS Grid 搭建整体布局骨架，配合 clamp() 函数和媒体查询（Media Queries），完美适配大屏、平板与手机端。
原生 JS 轮播：手写轮播组件，处理了图片淡入淡出、边界循环切换、底部指示器联动、键盘左右方向键控制及移动端手指滑动（Touch 事件）切换。
细节交互：实现了导航栏滚动监听（背景透明变深）、移动端折叠汉堡菜单动画、以及基于 URL 路径匹配的子页面导航自动高亮。
亮点：全程无框架依赖，代码体积小、加载速度极快，非常适合对打开速度有要求的传统制造企业官网场景。