【乔二参】CSS 图片廊示例-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_79483741/article/details/140007985

https://gitee.com/qercan/software-sharing

非常感谢您的支持！您的点赞、关注和评论是我创作的动力。我会继续努力，提供高质量内容，如有任何建议，请随时与我联系。

创建一个使用<div>加CSS的图片廊涉及使用HTML来组织内容结构，并利用CSS来布局和美化图片展示。下面是适合初学者的一个简单指南，分为两个部分：HTML结构和CSS样式。

第一部分：HTML结构

首先，我们用<div>元素来构建图片廊的结构。每个图片将被一个<div>包裹，这个<div>内包含一个<img>标签用于显示图片，以及一个可选的<p>标签用于添加图片说明。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单的CSS图片廊</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS样式表 -->
</head>
<body>

<div class="gallery">
  <div class="photo">
    <img src="image1.jpg" alt="图片1描述">
    <p>图片1的说明文字</p>
  </div>
  
  <div class="photo">
    <img src="image2.jpg" alt="图片2描述">
    <p>图片2的说明文字</p>
  </div>
  
  <!-- 重复上面的结构以添加更多图片 -->
</div>

</body>
</html>

第二部分：CSS样式

接下来，我们通过CSS来控制图片廊的布局和外观。以下是一个基本的CSS样式示例：

/* 重置一些默认样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.photo {
  flex-basis: calc(33.33% - 20px); /* 让图片廊响应式，根据屏幕大小调整每行图片数量 */
  margin-bottom: 1rem;
  position: relative;
}

.photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 如果有图片说明文字 */
.photo p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.9em;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* 鼠标悬停时显示图片说明 */
.photo:hover p {
  opacity: 1;
}

这段CSS做了如下设置：

使用Flexbox布局让图片自动排列，适应不同屏幕尺寸，并且居中对齐。
通过flex-basis和flex-wrap属性让图片廊在不同屏幕宽度下自动调整布局，例如每行显示三张图片。
为图片添加了一个绝对定位的说明文字层，平时隐藏（opacity: 0），当鼠标悬停在图片上时显示出来（opacity: 1），并添加了过渡效果以实现平滑显示。
设置了一些基本的间距和内边距，使图片廊看起来更加整洁。