yangyuqing/new-site

Fork 0

Files

yangyuqing 6b9fc9d3f2 第一次提交

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

4.7 KiB

Raw Blame History

🚀 快速开始指南

✅ 已完成的工作

我已经为你创建了一个完整的毕业设计展示网站，包含以下内容：

📂 文件结构

my_website/
├── index.html              # 主页面（7个板块）
├── css/
│   └── style.css           # 完整样式文件
├── js/
│   └── main.js             # 交互脚本
├── images/                 # 图片文件夹（待添加图片）
│   └── README_IMAGES.md    # 图片替换指南
├── README.md               # 详细项目说明
└── QUICK_START.md          # 本文件

🎯 核心特性

✨ 设计美学

莫兰迪色系（苔绿色 #8A9B7E）
"Approachable Luxury" 设计理念
卡片式布局 + 柔和阴影
大量留白，层次分明

✨ 技术实现

纯 HTML5 + CSS3 + JavaScript
完全响应式（手机/平板/电脑）
平滑滚动导航
优雅的动画效果

✨ 功能模块

✅ 前期分析（地理/气候/选址）
✅ 设计表现（渲染图画廊）
✅ 设计图纸（总平面/平面图）
✅ 性能分析（结构/节能）
✅ 自保障设计（太阳能/水循环）
✅ 建造模拟（流程表/构件表）
✅ 关于项目（结语致谢）

📝 下一步操作

1️⃣ 预览网站

直接在浏览器中打开 index.html 文件即可看到效果。

2️⃣ 替换占位图为实际图片

简单三步：

① 将图片放入 images/ 文件夹

② 在 index.html 中找到对应的占位符，例如：

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

③ 替换为：

<div class="card-image">
    <img src="images/你的图片名.jpg" alt="描述">
</div>

④ 在 css/style.css 末尾添加：

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

📖 详细说明请查看: images/README_IMAGES.md

3️⃣ 修改文字内容

直接在 index.html 中搜索并修改：

表格数据（建造流程、构件表）
系统参数（太阳能、水循环数据）
项目信息（面积、时间等）
结语致谢内容

4️⃣ 自定义样式（可选）

如需调整颜色或间距，修改 css/style.css 顶部的 CSS 变量：

:root {
    --primary-color: #8A9B7E;     /* 主题色 */
    --bg-primary: #F5F5F2;        /* 背景色 */
    --spacing-md: 2rem;           /* 间距 */
    /* ... 更多变量 ... */
}

💡 使用技巧

快速定位代码

按 Ctrl+F 搜索板块名称（如"前期分析"）
每个板块都有注释标记，例如：

图片命名建议

analysis-geography.jpg      # 地理分析
design-aerial.jpg           # 鸟瞰图
drawing-floor-plan.jpg      # 平面图
performance-structure.jpg   # 结构分析
construction-table.jpg      # 施工表格截图

测试响应式

缩小浏览器窗口宽度
或使用浏览器开发者工具的设备模拟器
确保在手机视图下导航菜单正常显示

🎨 设计要点回顾

色彩搭配

主色：苔绿色 #8A9B7E
背景：暖灰色 #F5F5F2
文字：深灰 #3D3D3D

布局特点

卡片圆角：12px
卡片阴影：柔和弥散效果
网格间距：2rem (32px)
大量留白：section 内边距 5rem

字体层级

大标题：2.5rem - 3rem
小标题：1.5rem
正文：1rem (16px)
行高：1.8

🔧 常见问题

Q: 如何添加新板块？ A: 复制现有 <section> 结构，修改 ID 和内容，并在导航栏添加对应链接。

Q: 导航栏不跟随滚动？ A: 检查浏览器控制台是否有 JavaScript 错误，确保 js/main.js 正确加载。

Q: 手机端菜单打不开？ A: 确保在移动设备上测试，或缩小浏览器窗口到 768px 以下。

Q: 图片显示不完整？ A: 检查是否添加了 object-fit: cover CSS 属性。

📱 浏览器兼容性

✅ Chrome / Edge (推荐)
✅ Firefox
✅ Safari
✅ Opera
❌ IE11 及以下（不支持部分 CSS3 特性）

🌐 部署上线

方案一：GitHub Pages（免费）

创建 GitHub 仓库
上传所有文件
在 Settings → Pages 中启用
访问 https://用户名.github.io/仓库名

方案二：Netlify（免费）

注册 Netlify
拖拽文件夹到部署区域
自动生成网址

方案三：Vercel（免费）

注册 Vercel
导入 GitHub 仓库
自动部署

📞 需要帮助？

如果遇到问题：

查看 README.md 获取详细说明
查看 images/README_IMAGES.md 了解图片替换
检查浏览器控制台（F12）是否有错误提示

祝你顺利完成毕业设计展示！ 🎓✨

最后更新：202X年

4.7 KiB Raw Blame History Unescape Escape