1 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
  使用方法

  1. 直接用浏览器打开 G:\演示网站\index.html 即可访问
  2. 点击任意图片下的"下载图片"按钮进行下载
  3. 如需添加更多图片，可以将图片放入 images/ 文件夹，并在 index.html 中添加相应的代码

  网站已经可以使用了，直接在浏览器中打开 index.html 文件即可！

> 我如果要自行添加图片下载该怎么添加

● 要添加更多图片下载，您有两种方法：

  方法1：使用本地图片文件

  1. 将图片放入images文件夹
    - 把您的图片文件（如 photo1.jpg, photo2.jpg 等）复制到 G:\演示网站\images\ 文件夹中
  2. 在 index.html 中添加图片项

  2. 打开 G:\演示网站\index.html，在 <div class="gallery-grid"> 中添加新的图片项：

  <div class="gallery-item">
      <img src="images/photo1.jpg" alt="美女图片" class="gallery-image">
      <div class="image-overlay">
          <h3>美女图片 9</h3>
          <button class="download-btn" data-image="images/photo1.jpg" data-filename="beauty_9.jpg">下载图片</button>
      </div>
  </div>

  方法2：使用绝对路径（其他盘符的图片）

  如果图片在其他位置（如 D盘、E盘），使用 file:/// 路径：

  <div class="gallery-item">
      <img src="file:///D:/我的图片/photo1.jpg" alt="美女图片" class="gallery-image">
      <div class="image-overlay">
          <h3>美女图片 10</h3>
          <button class="download-btn" data-image="file:///D:/我的图片/photo1.jpg"
  data-filename="beauty_10.jpg">下载图片</button>
      </div>
  </div>

  关键参数说明

  - src="..." - 图片显示路径
  - data-image="..." - 下载时的图片路径（必须与src一致）
  - data-filename="..." - 下载后保存的文件名
  - alt="..." 和 <h3> - 图片的标题/描述

  示例：添加3张新图片

  在 index.html 的 gallery-grid 区域内添加：

  <!-- 新图片1 -->
  <div class="gallery-item">
      <img src="images/beauty1.jpg" alt="美女图片 9" class="gallery-image">
      <div class="image-overlay">
          <h3>美女图片 9</h3>
          <button class="download-btn" data-image="images/beauty1.jpg"
  data-filename="beauty_9.jpg">下载图片</button>
      </div>
  </div>

  <!-- 新图片2 -->
  <div class="gallery-item">
      <img src="images/beauty2.jpg" alt="美女图片 10" class="gallery-image">
      <div class="image-overlay">
          <h3>美女图片 10</h3>
          <button class="download-btn" data-image="images/beauty2.jpg"
  data-filename="beauty_10.jpg">下载图片</button>
      </div>
  </div>

  <!-- 新图片3 -->
  <div class="gallery-item">
      <img src="images/beauty3.jpg" alt="美女图片 11" class="gallery-image">
      <div class="image-overlay">
          <h3>美女图片 11</h3>
          <button class="download-btn" data-image="images/beauty3.jpg"
  data-filename="beauty_11.jpg">下载图片</button>
      </div>
  </div>

  添加完成后，刷新浏览器即可看到新图片！