时间轴列表css特效,不需要js只需要定义css就可以简单实用。
首页 /  手机网站 /  手机特效 / 时间轴列表页面手机端css特效

0 0 611

时间轴列表页面手机端css特效

时间轴列表css特效,不需要js只需要定义css就可以简单实用。

时间轴列表页面手机端css特效_图一

html代码

<div style="padding:10px">
<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">最新资源</h3>
    </div>
    <div class="panel-body">
        <!-- Timeline -->
        <!--===================================================-->
        <div class="timeline">

            <!-- Timeline header -->

            <div class="timeline-entry">
                <div class="timeline-stat">
                    <div class="timeline-icon bg-info"></div>
                    <div class="timeline-time">2017-10-12</div>
                </div>
                <div class="timeline-label">
                    <h4 class="mar-no pad-btm"><a title="手机端页面左右滑动切换" class="text-info" href="http://yuanmouren.erlyun.com/p?id=31" target="_blank">手机端页面左右滑动切换</a></h4>
                    <p><span class="click">阅读量:2</span> <span class="autor">作者:<a href="http://yuanmouren.erlyun.com/28">容若</a></span></p>
                </div>
            </div>
            <div class="timeline-entry">
                <div class="timeline-stat">
                    <div class="timeline-icon bg-info"></div>
                    <div class="timeline-time">2017-10-11</div>
                </div>
                <div class="timeline-label">
                    <h4 class="mar-no pad-btm"><a title="js移动端图片自动轮播插件" class="text-info" href="http://yuanmouren.erlyun.com/p?id=30" target="_blank">js移动端图片自动轮播插件</a></h4>

                    <p><span class="click">阅读量:7</span> <span class="autor">作者:<a href="http://yuanmouren.erlyun.com/28">容若</a></span></p>
                </div>
            </div>
            <div class="timeline-entry">
                <div class="timeline-stat">
                    <div class="timeline-icon bg-info"></div>
                    <div class="timeline-time">2017-10-10</div>
                </div>
                <div class="timeline-label">
                    <h4 class="mar-no pad-btm"><a title="js地区选择器(支持select/option标签和ul/li标签选择)、三级联动、省市区选择的一个简单的jQuery插件" class="text-info" href="http://yuanmouren.erlyun.com/p?id=3" target="_blank">js地区选择器(支持select/option标签和ul/li标签选择)、三级联动、省市区选择的一个简单的jQuery插件</a></h4>

                    <p><span class="click">阅读量:156</span> <span class="autor">作者:<a href="http://yuanmouren.erlyun.com/28">容若</a></p>
                </div>
            </div>
            <div class="timeline-entry">
                <div class="timeline-stat">
                    <div class="timeline-icon bg-purple"></div>
                    <div class="timeline-time">2017-10-09</div>
                </div>
                <div class="timeline-label">
                    <h4 class="mar-no pad-btm"><a title="抽奖小程序仿制ios日历效果" class="text-info" href="http://yuanmouren.erlyun.com/p?id=28" target="_blank">抽奖小程序仿制ios日历效果</a></h4>
                    <p><span class="click">阅读量:27</span> <span class="autor">作者:<a href="http://yuanmouren.erlyun.com/28">容若</a></span></p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
下载所需:0 金币 下载 演示

[来源] http://yuanmouren.erlyun.com/p.php?id=32

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

容若 2017-10-12 17:20
10
送花
20积分一朵