css3响应式垂直时间轴布局_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一个简单的响应式css3垂直时间轴网页布局。主要的时间轴Html结构是使用一个无序列表。

HTML

<ul class="cbp_tmtimeline">
    <li>
        <time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span> <span>18:30</span></time>
        <div class="cbp_tmicon cbp_tmicon-phone"></div>
        <div class="cbp_tmlabel">
            <h2>Ricebean black-eyed pea</h2>
            <p>Winter purslane...</p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>4/11/13</span> <span>12:04</span></time>
        <div class="cbp_tmicon cbp_tmicon-screen"></div>
        <div class="cbp_tmlabel">
            <h2>Greens radish arugula</h2>
            <p>Caulie dandelion maize...</p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>4/13/13</span> <span>05:36</span></time>
        <div class="cbp_tmicon cbp_tmicon-mail"></div>
        <div class="cbp_tmlabel">
            <h2>Sprout garlic kohlrabi</h2>
            <p>Parsnip lotus root...</p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime" datetime="2013-04-15 13:15"><span>4/15/13</span> <span>13:15</span></time>
        <div class="cbp_tmicon cbp_tmicon-phone"></div>
        <div class="cbp_tmlabel">
            <h2>Watercress ricebean</h2>
            <p>Peanut gourd nori...</p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time>
        <div class="cbp_tmicon cbp_tmicon-earth"></div>
        <div class="cbp_tmlabel">
            <h2>Courgette daikon</h2>
            <p>Parsley amaranth tigernut...</p>
        </div>
    </li>
</ul>

css部分代码请参考下载的文件。