创建一个基本的图片廊可以使用 HTML 结构和 CSS 样式。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Reset some default styles */
    body, ul {
      margin: 0;
      padding: 0;
    }

    /* Style the gallery container */
    .gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    /* Style the gallery items */
    .gallery img {
      width: 100%;
      height: auto;
      transition: transform 0.2s ease-in-out;
      cursor: pointer;
    }

    /* Enlarge image on hover */
    .gallery img:hover {
      transform: scale(1.1);
    }
  </style>
</head>
<body>

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- Add more images as needed -->
</div>

</body>
</html>

在这个例子中，我们使用了 Flexbox 布局来创建一个简单的图片廊。.gallery 类定义了图片容器的样式，包括使用 flex-wrap 实现自动换行，并使用 justify-content: space-around; 让图片在容器内居中分布。

每个图片都使用 .gallery img 规则进行样式设置。设置 width: 100%; 让图片占据其容器的宽度，并使用 height: auto; 保持图片的纵横比。添加了一个鼠标悬停效果，当用户悬停在图片上时，通过 transform: scale(1.1); 规则将图片放大。

你可以根据需要调整样式和布局，也可以添加更多的图片。这只是一个基本的图片廊的起点，你可以根据项目需求进行更复杂的设计和交互。


转载请注明出处：http://www.zyzy.cn/article/detail/4016/CSS