CSS图片库(图库)设计详细实现代码

图像库用于存储和显示图片集。本示例使用HTML和CSS创建响应式图片库。
步骤1：创建一个基本的画廊结构

每个图库包含div部分的数量。
每个div部分包含一个图像及其描述。

< div class="gallery"> < div class="box"> < div class="image"> Image Added Here < /div> < div class="text"> Text Added Here< /div> < /div>

步骤2：使用CSS样式化文件
设置图库容器的样式：

将显示属性设置为flex。这意味着图库容器中的元素将具有flex上下文。
将flex-flow属性设置为自动换行。它设置弯曲方向和弯曲包裹样式。

.gallery { width:100%; display:flex; flex-flow: row wrap; }

框的样式：

.box { flex-basis: 20%; width: 100%; padding: 10px; margin: 8px; //Set the blur shadow box-shadow: 1px 1px 15px 1px green; }

步骤3：使用@media查询创建响应式图库。

@media only screen and (max-width: 300px) { .box { flex-basis: 100%; }

【CSS图片库(图库)设计详细实现代码】例子：

< !DOCTYPE html> < html> < head> < style> /* style to set body of page */ body { width:100%; margin:auto; } .gallery { width:100%; display:flex; flex-flow: row wrap; } .box { flex-basis:20%; width:100%; padding:10px; margin:8px; box-shadow: 1px 1px 1px 1px green; } .text { text-align:center; margin-top:5px; } .image:hover { border: 3px solid green; }/* media query used here */ @media only screen and (max-width: 300px) { .box { flex-basis: 100%; } }@media only screen and (max-width:500px) { .box { flex-basis: 40%; } } < /style> < /head> < body> < div class = "gallery"> < div class = "box"> < div class = "image"> < a target = "_blank" href = "https://media.lsbin.org/wp-content/uploads/geeksforgeek.png"> < img src = "https://media.lsbin.org/wp-content/uploads/geeksforgeek.png" width = "300" height = "300"> < /a> < /div> < div class = "text"> Geeks Classes Image < /div> < /div> < div class = "box"> < div class = "image"> < a target = "_blank" href = "https://media.lsbin.org/wp-content/uploads/lsbin-22.png"> < img src = "https://media.lsbin.org/wp-content/uploads/lsbin-22.png" width = "300" height = "300"> < /a> < /div> < div class = "text"> GeekforGeeks Image < /div> < /div> < div class = "box"> < div class = "image"> < a target = "_blank" href = "https://media.lsbin.org/wp-content/uploads/lsbin-10.png"> < img src = "https://media.lsbin.org/wp-content/uploads/lsbin-10.png" width = "300" height = "300"> < /a> < /div> < div class = "text"> Geeks Image < /div> < /div> < /body> < /html>

输出如下：