CSS 图片廊

最新推荐文章于 2024-07-04 07:10:19 发布

三季人 G

最新推荐文章于 2024-07-04 07:10:19 发布

阅读量430

点赞数 1

分类专栏：网络 JS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/QYgujingjing/article/details/128698131

版权

网络同时被 2 个专栏收录

86 篇文章

订阅专栏

84 篇文章

订阅专栏

CSS 图片廊

以下是使用CSS创建图片廊：
在这里插入图片描述

举例说明, css实现类似图片画廊的图片排序:

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8"> 
        <title>test</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.test.com/images/demo/demo1.jpg">
              <img src="http://static.test.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.test.com/images/demo/demo2.jpg">
              <img src="http://static.t.coestm/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.test.com/images/demo/demo3.jpg">
              <img src="http://static.test.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.test.com/images/demo/demo4.jpg">
              <img src="http://static.test.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
            </a>
            <div class="desc">这里添加图片文本描述</div>
          </div>
        </div>
    </body>
</html>