From d32736b2d0b75b752ca2311994c9605c5a1ee5d3 Mon Sep 17 00:00:00 2001 From: yangyuqing <1614872855@qq.com> Date: Tue, 2 Jun 2026 20:49:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=89=8D=E6=9C=9F=E5=88=86?= =?UTF-8?q?=E6=9E=90=E6=9D=BF=E5=9D=979=E5=BC=A0=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E7=BB=93=E6=9E=84=EF=BC=8C=E7=BB=9F=E4=B8=80=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E7=A1=AE=E4=BF=9D=E5=BA=95=E9=83=A8=E5=AF=B9=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 68 ++++++++++--- images/ANALYSIS_IMAGES.md | 202 ++++++++++++++++++++++++++++++++++++++ index.html | 100 +++++++++++++++++-- 3 files changed, 348 insertions(+), 22 deletions(-) create mode 100644 images/ANALYSIS_IMAGES.md diff --git a/css/style.css b/css/style.css index 31f5d0d..9b7f4f0 100644 --- a/css/style.css +++ b/css/style.css @@ -528,16 +528,60 @@ body { animation: fadeInUp 0.6s ease-out; } -.card-image placeholder-img img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - } +/* ======================================== + 前期分析板块 - 9张图片统一格式 + ======================================== */ +.analysis-grid { + /* 3列布局，确保图片上下底平齐 */ + grid-template-columns: repeat(3, 1fr) !important; + gap: var(--spacing-md); +} -og-image.jpg img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; - } \ No newline at end of file +.analysis-img { + /* 固定高度，确保所有图片底部对齐 */ + height: 280px; + width: 100%; + overflow: hidden; + position: relative; + background: linear-gradient(135deg, var(--primary-muted) 0%, var(--primary-light) 100%); +} + +.analysis-img img { + /* 关键：使用object-fit: cover确保图片填满容器且不变形 */ + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + display: block; +} + +.analysis-img .placeholder-text { + /* 占位文字样式 */ + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: var(--primary-dark); + font-size: 1.1rem; + font-weight: 500; + letter-spacing: 1px; +} + +/* 响应式：平板设备改为2列 */ +@media (max-width: 1024px) { + .analysis-grid { + grid-template-columns: repeat(2, 1fr) !important; + } +} + +/* 响应式：手机设备改为1列 */ +@media (max-width: 768px) { + .analysis-grid { + grid-template-columns: 1fr !important; + } + + .analysis-img { + height: 250px; + } +} diff --git a/images/ANALYSIS_IMAGES.md b/images/ANALYSIS_IMAGES.md new file mode 100644 index 0000000..93072ad --- /dev/null +++ b/images/ANALYSIS_IMAGES.md @@ -0,0 +1,202 @@ +# 前期分析板块 - 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 +
+
+

标题4

← 修改这里 +

在此处插入说明文字...

← 修改这里 +
+
+``` + +--- + +## 🔍 如果图片未显示 + +### 检查清单 + +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 +
+ +
+``` + +--- + +## 🎊 完成标志 + +当你看到以下内容时，表示成功： + +✅ 9张图片全部显示 +✅ 所有图片高度一致 +✅ 所有卡片底部对齐 +✅ 响应式布局正常（桌面/平板/手机） +✅ 图片不变形、不拉伸 + +--- + +**祝你顺利添加图片！** 📸✨ + +*如有问题，随时告诉我！* diff --git a/index.html b/index.html index 1885df1..3fc85af 100644 --- a/index.html +++ b/index.html @@ -77,32 +77,112 @@

前期分析

-
+
+
-
- 地理分析图 +
+ 地理分析图 +

地理位置分析

-

在此处插入青藏高原选址的地理环境分析，包括海拔、地形地貌等信息。

+

青藏高原选址的地理环境分析，包括海拔、地形地貌等信息。

+ +
-
- 气候分析图 +
+ 气候分析图 +

气候条件分析

-

在此处插入高原气候特征分析，包括温度、降水、风力等气象数据。

+

高原气候特征分析，包括温度、降水、风力等气象数据。

+ +
-
- 选址分析图 +
+ 选址分析图 +

场地选址分析

-

在此处插入具体选址的优劣分析，包括交通可达性、基础设施等因素。

+

具体选址的优劣分析，包括交通可达性、基础设施等因素。

+
+
+ + +
+
+ 分析图4 + +
+
+

标题4

+

在此处插入说明文字...

+
+
+ + +
+
+ 分析图5 + +
+
+

标题5

+

在此处插入说明文字...

+
+
+ + +
+
+ 分析图6 + +
+
+

标题6

+

在此处插入说明文字...

+
+
+ + +
+
+ 分析图7 + +
+
+

标题7

+

在此处插入说明文字...

+
+
+ + +
+
+ 分析图8 + +
+
+

标题8

+

在此处插入说明文字...

+
+
+ + +
+
+ 分析图9 + +
+
+

标题9

+

在此处插入说明文字...