192 lines
4.7 KiB
Markdown
192 lines
4.7 KiB
Markdown
# 🚀 快速开始指南
|
||
|
||
## ✅ 已完成的工作
|
||
|
||
我已经为你创建了一个完整的毕业设计展示网站，包含以下内容：
|
||
|
||
### 📂 文件结构
|
||
```
|
||
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. ✅ 前期分析（地理/气候/选址）
|
||
2. ✅ 设计表现（渲染图画廊）
|
||
3. ✅ 设计图纸（总平面/平面图）
|
||
4. ✅ 性能分析（结构/节能）
|
||
5. ✅ 自保障设计（太阳能/水循环）
|
||
6. ✅ 建造模拟（流程表/构件表）
|
||
7. ✅ 关于项目（结语致谢）
|
||
|
||
## 📝 下一步操作
|
||
|
||
### 1️⃣ 预览网站
|
||
直接在浏览器中打开 `index.html` 文件即可看到效果。
|
||
|
||
### 2️⃣ 替换占位图为实际图片
|
||
|
||
**简单三步：**
|
||
|
||
① 将图片放入 `images/` 文件夹
|
||
|
||
② 在 `index.html` 中找到对应的占位符，例如：
|
||
```html
|
||
<div class="card-image placeholder-img">
|
||
<span>地理分析图</span>
|
||
</div>
|
||
```
|
||
|
||
③ 替换为：
|
||
```html
|
||
<div class="card-image">
|
||
<img src="images/你的图片名.jpg" alt="描述">
|
||
</div>
|
||
```
|
||
|
||
④ 在 `css/style.css` 末尾添加：
|
||
```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 变量：
|
||
```css
|
||
:root {
|
||
--primary-color: #8A9B7E; /* 主题色 */
|
||
--bg-primary: #F5F5F2; /* 背景色 */
|
||
--spacing-md: 2rem; /* 间距 */
|
||
/* ... 更多变量 ... */
|
||
}
|
||
```
|
||
|
||
## 💡 使用技巧
|
||
|
||
### 快速定位代码
|
||
- 按 `Ctrl+F` 搜索板块名称（如"前期分析"）
|
||
- 每个板块都有注释标记，例如：`<!-- 1. 前期分析 -->`
|
||
|
||
### 图片命名建议
|
||
```
|
||
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（免费）
|
||
1. 创建 GitHub 仓库
|
||
2. 上传所有文件
|
||
3. 在 Settings → Pages 中启用
|
||
4. 访问 `https://用户名.github.io/仓库名`
|
||
|
||
### 方案二：Netlify（免费）
|
||
1. 注册 Netlify
|
||
2. 拖拽文件夹到部署区域
|
||
3. 自动生成网址
|
||
|
||
### 方案三：Vercel（免费）
|
||
1. 注册 Vercel
|
||
2. 导入 GitHub 仓库
|
||
3. 自动部署
|
||
|
||
## 📞 需要帮助？
|
||
|
||
如果遇到问题：
|
||
1. 查看 `README.md` 获取详细说明
|
||
2. 查看 `images/README_IMAGES.md` 了解图片替换
|
||
3. 检查浏览器控制台（F12）是否有错误提示
|
||
|
||
---
|
||
|
||
**祝你顺利完成毕业设计展示！** 🎓✨
|
||
|
||
*最后更新：202X年*
|