CSS 图片廊学习笔记

在网页设计中，如何更好地展示图片是一个非常重要的问题。CSS 图片廊就是一种常用的图片展示方式，本文将介绍如何使用 CSS 实现一个简单的图片廊。

HTML 结构

首先，我们需要在 HTML 中定义图片廊的结构。一个基本的图片廊通常由一个容器元素和多个图片元素组成，我们可以使用 div 元素作为容器元素，使用 img 元素作为每个图片元素。

htmlCopy Code
<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>

基本样式

接下来，我们需要为图片廊添加一些基本样式，比如设置容器元素的宽度和高度，并将每个图片元素设置为浮动元素，使它们在同一行显示。

cssCopy Code
.gallery {
  width: 100%;
  height: 400px;
}

.gallery img {
  float: left;
  width: calc(33.33% - 10px);
  margin: 5px;
}

在上面的代码中，我们使用了 calc() 函数计算每个图片元素的宽度，同时为了让每张图片之间有一些间距，我们设置了 margin 样式为 5px。

鼠标悬停效果

为了增加用户与图片的交互性，我们可以在鼠标悬停时为图片添加一些特效。

cssCopy Code
.gallery img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

在上面的代码中，我们使用了 transform 属性对图片进行缩放，并使用 box-shadow 属性添加阴影效果。

实例展示

下面是一个简单的 CSS 图片廊实例：

htmlCopy Code
<div class="gallery">
  <img src="https://picsum.photos/id/1/300/200" alt="Image 1">
  <img src="https://picsum.photos/id/2/300/200" alt="Image 2">
  <img src="https://picsum.photos/id/3/300/200" alt="Image 3">
  <img src="https://picsum.photos/id/4/300/200" alt="Image 4">
  <img src="https://picsum.photos/id/5/300/200" alt="Image 5">
  <img src="https://picsum.photos/id/6/300/200" alt="Image 6">
</div>

效果图如下：

希望这篇学习笔记能够帮助你更好地理解 CSS 图片廊的基本原理和用法。