前端css实现最基本的时间轴

前端 专栏收录该内容
332 篇文章 6 订阅

原型:


图片.png

代码:

<!DOCTYPE html >
<html>

    <head>

        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

        <meta charset="UTF-8">
        <title>状态详情</title>
        <style>
            #timeleft div {
                height: 65px;
                color: #333333;
            }
            
            #timecenter div {
                height: 65px;
                color: #333333;
            }
            
            #timeright div {
                height: 65px;
                color: #333333;
            }
            
            #timeright div p {
                margin: 0 0 0px;
            }
            
            .cicle1 {
                position: absolute;
                top: 0px;
                left: -10px;
                border-radius: 10px;
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid #cccccc;
                background: #ffffff;
            }
            
            .cicle2 {
                position: absolute;
                top: 70px;
                left: -10px;
                border-radius: 10px;
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid #cccccc;
                background: #ffffff;
            }
            
            .cicle3 {
                position: absolute;
                top: 140px;
                left: -10px;
                border-radius: 10px;
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid #cccccc;
                background: #ffffff;
            }
            
            .cicle4 {
                position: absolute;
                top: 210px;
                left: -10px;
                border-radius: 10px;
                list-style: none;
                width: 20px;
                height: 20px;
                border: 1px solid #cccccc;
                background: #ffffff;
            }
        </style>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    </head>

    <body>

        <!--右侧信息-->
        <div class="col-md-10 col-sm-10 col-xs-10" style="margin-top:30px;">
            <div class="col-md-4 col-sm-4 col-xs-4" id="timeleft">
                <div>2012-12-24 8:00</div>
                <div>2012-12-24 8:00</div>
                <div>2012-12-24 8:00</div>
                <div>2012-12-24 8:00</div>

            </div>

            <div class="col-md-4 col-sm-4 col-xs-4" id="timecenter">

                <div style="height:212px;  border-left:1px   solid  #366595; position:absolute;  left:65px;">
                    <ul>
                        <li class="cicle1"></li>
                        <li class="cicle2"></li>
                        <li class="cicle3"></li>
                        <li class="cicle4"></li>
                    </ul>

                </div>
            </div>

            <div class="col-md-4 col-sm-4 col-xs-4" id="timeright">
                <div>
                    <p>完工交车</p>
                    <p>1小时</p>
                </div>
                <div>
                    <p>完工交车</p>
                    <p>1小时</p>
                </div>

                <div>
                    <p>完工交车</p>
                    <p>1小时</p>
                </div>
                <div>
                    <p>完工交车</p>
                    <p>1小时</p>
                </div>

            </div>

        </div>

    </body>

</html>

原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知

90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】


  • 0
    点赞
  • 1
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值