图像库用于存储和显示图片集。本示例使用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%;
}例子：
<!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>输出如下：
