当前位置：首页 > 网站模板 > 后台模板

css3响应式垂直时间轴布局

分类：后台模板日期：2024-05-14 点击(1) 评论(0)

css3响应式垂直时间轴布局

简介

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

##### 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部分代码请参考下载的文件。

web299.com

css3响应式垂直时间轴布局

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面