以下是使用 CSS 创建图片廊实例:
<div class="responsive">
<div class="img">
<a target="_blank" href="//demo.runoops.com/static/img/a1.jpg">
<img src="//demo.runoops.com/static/img/a1.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//demo.runoops.com/static/img/a2.jpg">
<img src="//demo.runoops.com/static/img/a2.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//demo.runoops.com/static/img/a3.jpg">
<img src="//demo.runoops.com/static/img/a3.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//demo.runoops.com/static/img/a4.jpg">
<img src="//demo.runoops.com/static/img/a4.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
更多实例
响应式图片廊,使用 CSS3 的媒体查询来创建响应式图片廊:
<div class="responsive">
<div class="img">
<a target="_blank" href="//demo.runoops.com/static/img/a1.jpg">
<img src="//demo.runoops.com/static/img/a1.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//demo.runoops.com/static/img/a2.jpg">
<img src="//demo.runoops.com/static/img/a2.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//demo.runoops.com/static/img/a3.jpg">
<img src="//demo.runoops.com/static/img/a3.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="//demo.runoops.com/static/img/a4.jpg">
<img src="//demo.runoops.com/static/img/a4.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>