runoops.com

CSS 教程

CSS 图片廊

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

实例

Run this code »
<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 的媒体查询来创建响应式图片廊：

实例

Run this code »
<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>
标签：

相关推荐