Maison > Article > interface Web > CSS implémente un tri d'images similaire aux galeries d'images (code complet)

CSS implémente un tri d'images similaire aux galeries d'images (code complet)

不言original: 2018-08-24 11:47:242262parcourir

Ce que cet article vous apporte, c'est l'utilisation du CSS pour réaliser un tri d'images similaire aux galeries d'images (code complet). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8"> 
        <title>自学教程(如约智惠.com)</title> 
        <style >
            div.img {
                margin:5px;
                border:1px solid #ccc;
                float:left;
                width:180px;
            }
            
            div.img:hover{
                border:1px solid #777;
            }
            
            div.img img {
                width: 100%;
                height: auto;
            }
 
            div.desc {
                padding: 15px;
                text-align: center;
            }
            
        </style>
    </head>
    <body>
        <div class="responsive">
          <div class="img">
            <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
              <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
         
        <div class="responsive">
          <div class="img">
            <a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
              <img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
         
        <div class="responsive">
          <div class="img">
            <a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
              <img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
         
        <div class="responsive">
          <div class="img">
            <a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
              <img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
    </body>
</html>

Recommandations associées :

Comment réaliser l'effet d'animation de panorama en CSS3 (avec code)

Comment utiliser du CSS3 pur pour obtenir l'effet de carrousel d'images

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des spécifications d'écriture CSSArticle suivant：Explication détaillée des spécifications d'écriture CSS

Articles Liés

Voir plus