Comment créer une galerie d'images réactive en utilisant CSS-tutoriel CSS-php.cn

Comment créer une galerie d'images réactive en utilisant CSS

王林

Libérer： 2023-08-22 14:29:02

avant

846 Les gens l'ont consulté

Comment créer une galerie dimages réactive en utilisant CSS

Créez une galerie réactive en utilisant CSS, vous pouvez essayer d'exécuter le code suivant

Exemple

Démo en ligne

<!DOCTYPE html>
<html>
   <head>
      <style>
         div.myGallery {
            border: 2px solid orange;
         }
         div.myGallery:hover {
            border: 1px solid blue;
         }
         div.myGallery img {
            width: 100%;
            height: auto;
         }
         div.desc {
            padding: 20px;
            text-align: center;
         }
         .responsive {
            padding: 0 5px;
            float: left;
            width: 24.99999%;
         }
         @media only screen and (max-width: 700px) {
            .responsive {
               width: 49.99999%;
               margin: 5px 0;
            }
         }
         @media only screen and (max-width: 500px) {
            .responsive {
               width: 100%;
            }
         }
         .clearfix:after {
            content: "";
            display: table;
            clear: both;
         }
      </style>
   </head>
   <body>
      <div class = "responsive">
         <div class = "myGallery">
            <a target = "_blank" href="https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
               <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg" alt="3D Animation Tutorial"    style="max-width:90%"  style="max-width:90%">
            </a>
            <div class = "mydiv">3D Animation Tutorial></div>
         </div>
      </div>
      <div class = "responsive">
         <div class = "myGallery">
            <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg">
               <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/swift_4_online_training/380_course_210_image.jpg" alt="Swift Video Tutorial"    style="max-width:90%"  style="max-width:90%">
            </a>
            <div class = "mydiv">Swift Video Tutorial</div>
         </div>
      </div>
      <div class = "responsive">
         <div class = "myGallery">
            <a target = "_blank" href = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg">
               <img src = "https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" alt="CSS Video Tutorial"    style="max-width:90%"  style="max-width:90%">
            </a>
            <div class="mydiv">CSS Tutorial</div>
         </div>
      </div>
      <div class = "clearfix"></div>
   </body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!