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

原型：

图片.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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】

巴特西

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

最新文章

热门文章