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

2021年4月6日19:39:15 发表评论 914 次浏览

图像库用于存储和显示图片集。本示例使用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>

输出如下:

图片库

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: