Rumah > Artikel > hujung hadapan web > css实现类似图片画廊的图片排序（完整代码）

css实现类似图片画廊的图片排序（完整代码）

不言asal: 2018-08-24 11:47:242275semak imbas

本篇文章给大家带来的内容是关于css实现类似图片画廊的图片排序（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!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>

Artikel berkaitan

Lihat lagi