203 lines
4.5 KiB
Markdown
203 lines
4.5 KiB
Markdown
# 前期分析板块 - 9张图片命名规范
|
||
|
||
## 🎯 快速使用指南
|
||
|
||
### 步骤1：准备图片
|
||
将你的9张图片命名为以下格式：
|
||
|
||
```
|
||
analysis-01.jpg ← 地理分析图
|
||
analysis-02.jpg ← 气候分析图
|
||
analysis-03.jpg ← 选址分析图
|
||
analysis-04.jpg ← 分析图4
|
||
analysis-05.jpg ← 分析图5
|
||
analysis-06.jpg ← 分析图6
|
||
analysis-07.jpg ← 分析图7
|
||
analysis-08.jpg ← 分析图8
|
||
analysis-09.jpg ← 分析图9
|
||
```
|
||
|
||
### 步骤2：放入文件夹
|
||
将所有图片放入：`d:\my_website\images\` 文件夹
|
||
|
||
### 步骤3：刷新浏览器
|
||
Live Server 会自动刷新，立即看到效果！
|
||
|
||
---
|
||
|
||
## 📏 图片规格要求
|
||
|
||
### 推荐尺寸
|
||
- **最小宽度**: 800px
|
||
- **推荐尺寸**: 1200×800px（3:2比例）或 1024×768px（4:3比例）
|
||
- **文件大小**: 建议 < 500KB/张
|
||
- **格式**: JPG 或 PNG
|
||
|
||
### ⚠️ 重要说明
|
||
**不用担心图片大小不一致！**
|
||
|
||
我已经设置了CSS样式：
|
||
```css
|
||
.analysis-img img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover; /* 自动裁剪，保持比例 */
|
||
object-position: center; /* 居中显示 */
|
||
}
|
||
```
|
||
|
||
**效果**：
|
||
- ✅ 所有图片高度统一为 280px
|
||
- ✅ 图片自动缩放并裁剪，不变形
|
||
- ✅ 所有卡片底部对齐
|
||
- ✅ 无论原图是横图还是竖图都能正常显示
|
||
|
||
---
|
||
|
||
## 🎨 当前布局
|
||
|
||
### 桌面端（>1024px）
|
||
```
|
||
─────────┬─────────┬─────────┐
|
||
│ 01 │ 02 │ 03 │
|
||
├──────────────────┼─────────┤
|
||
│ 04 │ 05 │ 06 │
|
||
├─────────┼─────────┼─────────┤
|
||
│ 07 │ 08 │ 09 │
|
||
└─────────┴─────────┴─────────┘
|
||
```
|
||
|
||
### 平板端（768-1024px）
|
||
```
|
||
─────────┬─────────┐
|
||
│ 01 │ 02 │
|
||
├─────────┼─────────┤
|
||
│ 03 │ 04 │
|
||
├─────────┼─────────┤
|
||
│ 05 │ 06 │
|
||
├─────────┼─────────
|
||
│ 07 │ 08 │
|
||
├─────────┼─────────┤
|
||
│ 09 │ │
|
||
└─────────┴─────────
|
||
```
|
||
|
||
### 手机端（<768px）
|
||
```
|
||
┌─────────┐
|
||
│ 01 │
|
||
├─────────┤
|
||
│ 02 │
|
||
├─────────┤
|
||
│ 03 │
|
||
├─────────┤
|
||
│ ... │
|
||
├─────────┤
|
||
│ 09 │
|
||
└─────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## ✏️ 修改文字内容
|
||
|
||
如果需要修改每张图的标题和说明，打开 `index.html`，找到对应位置：
|
||
|
||
### 示例：修改第4张图
|
||
```html
|
||
<!-- 图片4 -->
|
||
<div class="card">
|
||
<div class="card-image analysis-img">
|
||
<img src="images/analysis-04.jpg" alt="分析图4" ...>
|
||
</div>
|
||
<div class="card-content">
|
||
<h3>标题4</h3> ← 修改这里
|
||
<p>在此处插入说明文字...</p> ← 修改这里
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 🔍 如果图片未显示
|
||
|
||
### 检查清单
|
||
|
||
1. **文件名是否正确？**
|
||
```
|
||
✓ analysis-01.jpg
|
||
✗ Analysis-01.jpg (大写A)
|
||
✗ analysis_01.jpg (下划线)
|
||
✗ analysis-1.jpg (缺少0)
|
||
```
|
||
|
||
2. **文件是否在正确位置？**
|
||
```
|
||
d:\my_website\images\analysis-01.jpg ✓
|
||
d:\my_website\analysis-01.jpg ✗
|
||
```
|
||
|
||
3. **文件格式是否正确？**
|
||
```
|
||
✓ .jpg
|
||
✓ .jpeg
|
||
✓ .png
|
||
✗ .JPG (大写扩展名可能有问题)
|
||
```
|
||
|
||
4. **浏览器控制台是否有错误？**
|
||
```
|
||
按 F12 → Console
|
||
查看是否有 404 错误
|
||
```
|
||
|
||
---
|
||
|
||
## 💡 高级技巧
|
||
|
||
### 如果想调整图片高度
|
||
|
||
打开 `css/style.css`，找到：
|
||
|
||
```css
|
||
.analysis-img {
|
||
height: 280px; /* 改为 250px、300px、350px 等 */
|
||
}
|
||
```
|
||
|
||
### 如果想调整列间距
|
||
|
||
```css
|
||
.analysis-grid {
|
||
gap: var(--spacing-md); /* 改为 1rem、3rem 等 */
|
||
}
|
||
```
|
||
|
||
### 如果想让某张图跨两列
|
||
|
||
在 HTML 中添加样式：
|
||
|
||
```html
|
||
<div class="card" style="grid-column: span 2;">
|
||
<!-- 内容 -->
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 🎊 完成标志
|
||
|
||
当你看到以下内容时，表示成功：
|
||
|
||
✅ 9张图片全部显示
|
||
✅ 所有图片高度一致
|
||
✅ 所有卡片底部对齐
|
||
✅ 响应式布局正常（桌面/平板/手机）
|
||
✅ 图片不变形、不拉伸
|
||
|
||
---
|
||
|
||
**祝你顺利添加图片！** 📸✨
|
||
|
||
*如有问题，随时告诉我！*
|