图像库用于存储和显示图片集。本示例使用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>
输出如下:
推荐阅读
- 算法设计(在数组中找到对数(x, y),使得x^y大于y^x)
- JavaScript比较不区分大小写的字符串
- JavaScript比较运算符用法和介绍指南
- 使用二叉索引树计算右侧的较小元素和左侧的较大元素
- CSS字体介绍和用法详细指南(代码实例)
- Python使用OpenCV实现图像模糊详解
- PHP ftp_mdtm()函数用法详细介绍
- Python中的运算符函数用法详细介绍|S1
- 关于Java中null的有趣事实详细分析