码迷,mamicode.com
首页 > 其他好文 > 详细

时间轴效果

时间:2014-12-08 15:54:26      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:html 时间轴

效果图:

bubuko.com,布布扣

源代码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>控制台 - Bootstrap后台管理系统模版Ace下载</title>
		<meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" />
		<meta name="description" content="站长素材提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
    li{list-style:none;width:100%;height:104px;font-family: ‘Microsoft YaHei‘;}
    .linePanel {float:left;width:5%;}
    .line{background-color:rgb(204, 204, 204);width:5px;height:40px;}
    .point{width:14px;height:14px;border-radius:10px;background-color:rgb(204, 204, 204);margin:5px -4px;}
    .date{height:67px;}
    .date .text{font-size:20px;color:rgb(204, 204, 204);margin-left:-50px;width:100px;text-align:center;}
    .half{height:20px;}
    .contentPanel{width:95%;height:40px;float:right;}
    .content{position:relative;background-color:rgb(204, 204, 204);width:90%;height:70px;margin-top:25px;margin-left:1%;border-radius:10px;}
    .triangle-left{position:absolute;left:-16px;top:20px;width:0px;height: 0;border-top: 8px solid transparent;border-right: 16px solid rgb(204, 204, 204);border-bottom: 8px solid transparent;}
    .content .text{font-size:16px;color:#fff;padding:5px;font-weight:bold;word-spacing: 2px;}
</style>
 </head>
 <body>
    <ul>
        <li>
            <div class="linePanel">
                <div class="line"></div>
                <div class="point"></div>
                <div class="line"></div>
            </div>
            <div class="contentPanel">
                <div class="content">
                    <div class="triangle-left"></div>
                    <div class="text">20:34 在江苏常熟市公司进行揽件扫描</div>
                </div>
            </div>
        </li>
        <li>
            <div class="linePanel">
                <div class="line"></div>
                <div class="point"></div>
                <div class="line"></div>
            </div>
            <div class="contentPanel">
                <div class="content">
                    <div class="triangle-left"></div>
                    <div class="text">20:55 在江苏常熟市公司进行装车扫描,即将发往:四川成都分拨中心</div>
                </div>
            </div>
        </li>
        <li class="date">
            <div class="linePanel">
                <div class="line half"></div>
                <div class="text">6-21</div>
                <div class="line half"></div>
            </div>
        </li>
        <li>
            <div class="linePanel">
                <div class="line"></div>
                <div class="point"></div>
                <div class="line"></div>
            </div>
            <div class="contentPanel">
                <div class="content">
                    <div class="triangle-left"></div>
                    <div class="text">21:57 在分拨中心四川成都分拨中心进行卸车扫描</div>
                </div>
            </div>
        </li>
        <li>
            <div class="linePanel">
                <div class="line"></div>
                <div class="point"></div>
                <div class="line"></div>
            </div>
            <div class="contentPanel">
                <div class="content">
                    <div class="triangle-left"></div>
                    <div class="text">23:06 在四川成都分拨中心进行大包拆包扫描</div>
                </div>
            </div>
        </li>
    </ul>
</body>
</html>

  

     


注:源码来自csdn(http://bbs.csdn.net/topics/390821268)

时间轴效果

标签:html 时间轴

原文地址:http://5070780.blog.51cto.com/5060780/1587432

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!