185 lines
4.8 KiB
Markdown
185 lines
4.8 KiB
Markdown
# 青藏高原轻钢拉索结构医疗站 - 毕业设计展示网站
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
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（亲和的奢华）
|