Shang Gao

Milestones

📋 ← Back to Home · 返回首页

© 2000-2026 Shang Gao. All rights reserved. 未经书面许可，不得用于商业用途。

Read 16

Professional Website Design 1

Professional Website Homepage v1.1.0

Shang Gao Created: 2026-09-13 Updated: 2026-09-17

🏗️ What Was Built 完成清单

🏗️ Structure & Layout · 结构与布局

✅ 多个内容区块（首屏、客户、业务、介绍、技能、咨询、成就、课程、页脚）
✅ 响应式（桌面 / 平板 / 手机）
✅ Header 固定（不随地址栏抖动）
✅ 汉堡菜单（右侧弹出 + 右对齐 + 滚动）
✅ 导航下拉菜单（内容分类聚合）

🎨 Design System · 设计系统

✅ rem 字号系统 + CSS 变量
✅ 4px 网格间距系统
✅ 颜色变量
✅ 圆角变量
✅ 按钮统一为少数几种
✅ Badge 用 emoji 奖牌
✅ 对勾用 ✓（跨平台一致）

⚙️ Features · 功能

✅ 联系表单（邮件发送）
✅ 预约表单（时区 + 日期 + 时长 + 紧急提示）
✅ 验证码（服务端会话）
✅ 实时时钟（底部）
✅ 平滑滚动
✅ 语言切换按钮（占位）

🔧 Engineering & Ops · 工程与运维

✅ 配置文件与代码分离
✅ 文件修改时间戳做缓存失效
✅ HTML 防缓存头
✅ 跨浏览器兼容（Chrome / Safari / iOS / Android）
✅ 多设备测试通过
✅ 文件系统驱动的内容系统
✅ 敏感文件保护（加载常量）

📚 What Was Learned 学习收获

📐 Responsive Design · 响应式设计

✅ rem 单位
✅ 媒体查询

🎨 CSS Variables · CSS 变量

✅ 设计 token 系统

📱 Mobile-First · 移动优先

✅ 手机先设计，再扩展

💾 Caching · 缓存机制

✅ 强缓存 vs 协商缓存

🌐 Cross-Browser · 跨浏览器兼容

✅ emoji、字体、符号差异处理

📍 Positioning · 定位方式

✅ position: fixed vs sticky

📧 Email Sending · 邮件发送

✅ SMTP 真实发信

🔗 Cache Busting · 缓存失效

✅ 文件修改时间戳方案

😀 Unicode Support · Unicode 支持

✅ emoji 字体栈

🔀 CSS order

✅ 灵活调整 flex 布局

🗂️ Flat-File Content System

✅ 文件系统即数据库
✅ 元数据与视图分离

❌ Before · 之前	✅ Now · 现在
❌ 只有域名	✅ 有可上线的专业首页
❌ 没有设计规范	✅ 有完整的设计系统
❌ 表单不能发信	✅ 表单真实可用
❌ 手机显示错乱	✅ 所有设备一致
❌ 内容硬编码	✅ 文件系统驱动的动态内容