html5制作照片墙代码

照片墙是一个在网页上展示多张照片的常见方式，它可以用于个人相册、产品展示等多种场景。在 HTML5 中，我们可以使用新的标签和属性来制作照片墙，无需借助 JavaScript 或其他脚本。

!-- HTML 代码 -->
    figure>
    img src="photo1.png" alt="照片 1">
    figcaption>
    照片 1 的标题/figcaption>
    /figure>
    figure>
    img src="photo2.png" alt="照片 2">
    figcaption>
    照片 2 的标题/figcaption>
    /figure>
    figure>
    img src="photo3.png" alt="照片 3">
    figcaption>
    照片 3 的标题/figcaption>
    /figure>

使用 HTML5 新增的figure标签可以将每张照片和其标题包裹在一起，方便布局和样式设置。我们可以使用 CSS 为figure和figcaption设置样式，比如设置它们的宽度和高度、边距、字体等。

/* CSS 代码 */figure {
    display: inline-block;
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
}
img {
    max-width: 100%;
    height: auto;
}
figcaption {
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
}

以上 CSS 代码示例中，我们设置了figure元素为内联块级元素，使它们可以排列在一行。同时设置了width和height属性，使它们的尺寸保持一致。边框样式可以根据需求进行设置。

最后，我们可以为每张照片添加一些鼠标交互效果，比如悬停效果、点击效果等。这可以通过 CSS 的伪类实现。例如：

/* CSS 代码 */figure:hover {
    box-shadow: 0 0 10px #aaa;
}
figure:active {
    transform: scale(0.95);
}
    

以上 CSS 代码示例中，我们为figure设置了:hover和:active伪类，分别在鼠标悬停和点击时实现了阴影和缩小的效果。

通过以上 HTML5 和 CSS 的代码示例，我们可以快速、简单地制作出一个美观、实用的照片墙。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！