html 画廊代码—html图像画廊：代码示例

HTML画廊是一种常见的网页设计元素，用于展示多张图片。它通常由一组图片缩略图和一个主要的图像区域组成。用户可以点击缩略图来查看大图，并在主要图像区域中切换不同的图片。

在HTML中，我们可以使用`<img>`标签来显示图像。为了创建一个画廊，我们可以使用`<div>`标签来包裹所有的图片缩略图，并为它设置一个特定的类名，以便我们可以在CSS中对其进行样式设置。然后，我们可以为每个缩略图使用`<img>`标签，并设置它们的`src`属性来指定图像的路径。

示例代码如下所示：

<div class="732d-4c6d-8552-2cbe gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

在上面的示例代码中，我们使用了一个`<div>`标签来创建一个名为"gallery"的画廊容器，并在其中放置了三个缩略图。每个缩略图使用了`<img>`标签，并通过`src`属性指定了图像的路径。`alt`属性用于提供图像的替代文本，以便在图像无法显示时提供描述。

接下来，我们可以使用CSS来为画廊设置样式，以使其呈现出我们想要的效果。我们可以设置画廊容器的宽度、高度、背景颜色等属性，并为缩略图设置一些样式，例如边框、间距等。

示例代码如下所示：

.gallery {
  width: 400px;
  height: 300px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery img {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  margin: 10px;
}

在上面的示例代码中，我们使用了CSS选择器来选择画廊容器和缩略图，并为它们设置了一些样式。我们通过`width`和`height`属性设置了画廊容器的宽度和高度，通过`background-color`属性设置了背景颜色。`display: flex;`、`justify-content: center;`和`align-items: center;`属性用于居中显示缩略图。缩略图的样式通过`width`、`height`、`border`和`margin`属性进行设置。

通过以上的HTML和CSS代码，我们可以创建一个简单的HTML画廊，其中包含了多个图片缩略图，并且可以通过点击缩略图来查看大图。