css做照片集

CSS可以用来制作照片集，使得展示图片的时候更加美观、简洁、直观。以下是一个简单的实例代码。

.photo-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
}
.photo-grid img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
    .photo-grid {
            grid-template-columns: repeat(2, 1fr);
    }
}
    

这段代码中创建了一个照片集的容器，使用了CSS Grid布局。设置了显示三列，每一列的宽度为1fr，并设置了列之间的间隔为20像素。每个照片的img标签被设置为100%宽度、自动高度，并添加了圆角和阴影以增加美感。

移动端可以通过@media查询，设置屏幕最大宽度为768像素的情况下，只显示两列。

上述代码只是一个非常基础的例子，你可以根据自己的需求和想象，使用CSS来创造丰富多彩的照片集。

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