Maison > Article > interface Web > Comment créer une galerie d'images réactive en utilisant CSS
Créez une galerie réactive en utilisant CSS, vous pouvez essayer d'exécuter le code suivant
<!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>
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!