runoops.com

CSS 图片廊

以下是使用 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>