CSS |图片库

图片库用于存储和显示图片集。本示例使用 HTML 和 CSS 创建响应式图片库。

步骤 1：创建一个基本的画廊结构

• 每个图库包含多个 div 部分。
• 每个 div 部分都包含一个图像及其描述。

  
 
    
 Image Added Here 
    
 Text Added Here  
  

步骤 2：使用 CSS 设计文件样式

• 样式化画廊容器：
  • 将显示属性设置为 flex。这意味着画廊容器中的元素将具有 flex 上下文。
  • 将 flex-flow 属性设置为行换行。它设置 flex 方向和 flex wrap 样式。

  .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%;
}

例子：

      

    

  

    

        

            

                
                    
                
            
              
            

                Geeks Classes Image
            
        
      
        

            

                
                    
                
            
              
            

                GeekforGeeks Image
            
        
          
        

            

                
                    
                
            
              
            

                Geeks Image
            
        

  
                                    

输出：