【CSS】图片廊

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

韩韩二水

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

阅读量187

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43885779/article/details/86750829

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

图片廊

以下是使用 CSS 创建图片廊：

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