css實現類似圖片圖庫的圖片排序（完整代碼）-css教學-PHP中文網

css實現類似圖片圖庫的圖片排序（完整代碼）

不言

發布： 2018-08-24 11:47:24

原創

2219 人瀏覽過

這篇文章帶給大家的內容是關於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>

登入後複製