html加css 相册

HTML和CSS结合可以创建美观的相册页面，让你在线上展示图片集。下面是一个简单的概述：

1. **HTML结构**：首先，你需要创建一个HTML文件，包含多个`<div>`或者其他容器元素，每个代表一张照片。例如，你可以使用`<img>`标签引用图片，加上描述性的`<figure>`和`<figcaption>`标签提供图片标题和说明。

<div class="photo">
  <img src="image1.jpg" alt="图片1">
  <figcaption>图片1的描述</figcaption>
</div>

2. **CSS样式**：CSS用于布局和美化这些图片。你可以设置`.photo`类的样式，比如宽度、高度、边距、背景色等；同时，通过媒体查询（media queries）来优化不同设备的显示效果。还可以添加悬停效果、点击缩放或轮播功能。

.photo {
  width: 300px;
  height: 200px;
  margin: 5px;
  display: inline-block;
}

.photo img:hover {
  transform: scale(1.1);
}

3. **交互设计**：如果你想要更丰富的交互体验，可以利用JavaScript或库如jQuery，添加图片切换、动画过渡等功能。

$('.photo').click(function() {
  $(this).next('.photo').slideToggle();
});