Files

2026-06-02 11:51:30 +08:00

4.8 KiB

Raw Permalink Blame History

青藏高原轻钢拉索结构医疗站 - 毕业设计展示网站

📁 项目结构

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 文件即可预览网站。

替换占位图为实际图片

准备图片: 将所有图片放入 images/ 文件夹
修改HTML: 找到对应的 .placeholder-img div

替换代码:

<!-- 原代码 -->
<div class="card-image placeholder-img">
    <span>地理分析图</span>
</div>

<!-- 替换为 -->
<div class="card-image">
    <img src="images/your-image.jpg" alt="图片描述">
</div>

添加图片样式 (在 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 过渡动画

🎯 后续优化建议

图片优化:
- 使用 WebP 格式减小体积
- 添加图片懒加载
- 实现图片点击放大功能
SEO优化:
- 添加 meta description
- 添加 Open Graph 标签
- 优化 heading 层级
可访问性:
- 添加 ARIA 标签
- 增强键盘导航支持
- 提高颜色对比度
功能增强:
- 添加图片轮播/灯箱效果
- 添加打印样式
- 添加PDF下载链接

📝 注意事项

图片尺寸建议:
- 卡片图片: 800x600px 或更高
- 画廊大图: 1200x800px 或更高
- 图纸图片: 根据实际比例调整
浏览器兼容性:
- 推荐使用 Chrome、Firefox、Safari、Edge 等现代浏览器
- IE11 及以下版本不支持部分 CSS3 特性
部署建议:
- 可直接部署到 GitHub Pages
- 或使用 Netlify、Vercel 等静态托管服务

📄 许可证

本项目为毕业设计作品，仅供学习和展示使用。

设计时间: 202X年
项目名称: 青藏高原轻钢拉索结构医疗站
设计理念: Approachable Luxury（亲和的奢华）

4.8 KiB Raw Permalink Blame History Unescape Escape