第一次提交

README.md

@@ -0,0 +1,184 @@
+# 青藏高原轻钢拉索结构医疗站 - 毕业设计展示网站
+
+## 📁 项目结构
+
+```
+my_website/
+├── index.html          # 主HTML文件，包含所有7个板块的内容结构
+├── css/
+│   └── style.css       # 样式文件，包含所有视觉设计
+├── js/
+│   └── main.js         # JavaScript文件，处理交互和动画
+├── images/             # 图片文件夹（目前为空，用于存放实际图片）
+└── README.md           # 项目说明文档
+```
+
+## 🎨 设计特点
+
+### 色彩方案
+- **基础色**: 苔绿色 `#8A9B7E`（莫兰迪色系）
+- **浅色变体**: `#A8B89E`, `#C5D1BE`
+- **深色变体**: `#6B7D60`
+- **背景色**: 极浅暖灰色 `#F5F5F2` / `#EDEDE8`
+
+### 设计理念
+- **Approachable Luxury**（亲和的奢华）
+- 低调、克制、留白充足
+- 细节精致、层次感强
+
+### 布局特色
+- 卡片式布局（Card Layout）
+- 柔和的弥散阴影
+- 大量留白，内容不拥挤
+- 响应式设计，适配手机和电脑
+
+## 📋 网站板块说明
+
+### 1. 前期分析 (`#analysis`)
+- 地理位置分析
+- 气候条件分析
+- 场地选址分析
+- **使用方式**: 替换 `.placeholder-img` 为实际分析图
+
+### 2. 设计表现 (`#design`)
+- 鸟瞰渲染图（大图）
+- 室内渲染图
+- 立面效果图
+- 细节特写
+- **使用方式**: 在 `.gallery-grid` 中插入实际渲染图
+
+### 3. 设计图纸 (`#drawings`)
+- 总平面布置图
+- 建筑平面图
+- **使用方式**: 替换占位图为CAD图纸导出图片
+
+### 4. 性能分析 (`#performance`)
+- 结构受力分析图表
+- 外围护结构节能计算
+- **使用方式**: 插入结构计算软件导出的分析图
+
+### 5. 自保障设计 (`#self-sufficient`)
+- 太阳能发电系统计算
+- 水循环利用系统说明
+- **使用方式**: 修改数据列表中的具体数值
+
+### 6. 建造模拟 (`#construction`)
+- 建造场地总图
+- 建造流程安排表（表格）
+- 主要构件表（表格）
+- **使用方式**: 修改表格中的数据为实际工程数据
+
+### 7. 关于项目 (`#about`)
+- 结语与致谢
+- 项目基本信息
+- **使用方式**: 修改文本内容和项目信息
+
+## 🚀 使用方法
+
+### 本地预览
+直接在浏览器中打开 `index.html` 文件即可预览网站。
+
+### 替换占位图为实际图片
+
+1. **准备图片**: 将所有图片放入 `images/` 文件夹
+2. **修改HTML**: 找到对应的 `.placeholder-img` div
+3. **替换代码**: 
+   ```html
+   <!-- 原代码 -->
+   <div class="card-image placeholder-img">
+       <span>地理分析图</span>
+   </div>
+   
+   <!-- 替换为 -->
+   <div class="card-image">
+       <img src="images/your-image.jpg" alt="图片描述">
+   </div>
+   ```
+
+4. **添加图片样式** (在 CSS 中添加):
+   ```css
+   .card-image img {
+       width: 100%;
+       height: 100%;
+       object-fit: cover;
+   }
+   ```
+
+### 修改表格数据
+
+在 HTML 中找到对应的 `<table>` 元素，修改 `<td>` 标签内的文本内容。
+
+### 修改文本内容
+
+直接编辑 HTML 文件中各板块的 `<p>`、`<h3>` 等标签内的文字。
+
+## 💡 技术特性
+
+### 纯前端实现
+- ✅ HTML5 语义化标签
+- ✅ CSS3 现代特性（Grid、Flexbox、变量）
+- ✅ 原生 JavaScript（无依赖）
+
+### 响应式设计
+- ✅ 桌面端：多列网格布局
+- ✅ 平板端：自适应调整
+- ✅ 手机端：单列布局 + 汉堡菜单
+
+### 交互效果
+- ✅ 固定导航栏，滚动时变化阴影
+- ✅ 平滑滚动到锚点
+- ✅ 导航链接高亮当前板块
+- ✅ 卡片进入视口时的渐显动画
+- ✅ 移动端汉堡菜单
+
+### 性能优化
+- ✅ CSS 变量统一管理
+- ✅  Intersection Observer API 实现懒加载和动画
+- ✅ 流畅的 CSS 过渡动画
+
+## 🎯 后续优化建议
+
+1. **图片优化**: 
+   - 使用 WebP 格式减小体积
+   - 添加图片懒加载
+   - 实现图片点击放大功能
+
+2. **SEO优化**:
+   - 添加 meta description
+   - 添加 Open Graph 标签
+   - 优化 heading 层级
+
+3. **可访问性**:
+   - 添加 ARIA 标签
+   - 增强键盘导航支持
+   - 提高颜色对比度
+
+4. **功能增强**:
+   - 添加图片轮播/灯箱效果
+   - 添加打印样式
+   - 添加PDF下载链接
+
+## 📝 注意事项
+
+1. **图片尺寸建议**:
+   - 卡片图片: 800x600px 或更高
+   - 画廊大图: 1200x800px 或更高
+   - 图纸图片: 根据实际比例调整
+
+2. **浏览器兼容性**:
+   - 推荐使用 Chrome、Firefox、Safari、Edge 等现代浏览器
+   - IE11 及以下版本不支持部分 CSS3 特性
+
+3. **部署建议**:
+   - 可直接部署到 GitHub Pages
+   - 或使用 Netlify、Vercel 等静态托管服务
+
+## 📄 许可证
+
+本项目为毕业设计作品，仅供学习和展示使用。
+
+---
+
+**设计时间**: 202X年  
+**项目名称**: 青藏高原轻钢拉索结构医疗站  
+**设计理念**: Approachable Luxury（亲和的奢华）