原型：

图片.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实现最基本的时间轴的更多相关文章

  1. 利用css制作横向和纵向时间轴

    Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...

  2. 纯CSS与HTML实现垂直时间轴

    原创YouTube HTML源码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  4. 使用css实现时间轴

    本文将使用css来实现一个左右交叉布局的时间轴,效果如下: 使用的都是一些常用的css,代码如下: <!DOCTYPE> <html> <head> <tit ...

  5. 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  6. 纯css+js水平时间轴

    自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...

  7. [置顶] 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  8. 【前端图表】echarts实现散点图x轴时间轴

    话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...

  9. html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

    1.概述 html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先 ...

随机推荐

  1. Java基础学习总结（38）——Lombok的使用和原理

    一.项目背景 在写Java程序的时候经常会遇到如下情形:  新建了一个Class类,然后在其中设置了几个字段,最后还需要花费很多时间来建立getter和setter方法  lombok项目的产生就是为 ...

  2. mycat快速体验（转）

    横空出世的MyCat截至到2015年4月,保守估计已经有超过60个项目在使用,主要应用在电信领域.互联网项目,大部分是交易和管理系统,少量是信息系统.比较大的系统中,数据规模单表单月30亿.本人也初步 ...

  3. 1.2 Python基础知识 - 字符编码

    计算机中的数据是以二进制方式进行存储的,即只有"0"和"1",二进制是属于数据类型的数据,它只可以和其他进制的数据类型进行转换,但是不能存储其他字符,例如:字母 ...

  4. 5W1H分析法和5W2H分析法

    5W1H分析法也称六何分析法,是一种思考方法,也可以说是一种创造技法.是对选定的项目.工序或操作,都要从原因(WHY).对象(WHAT).地点(WHERE).时间(WHEN).人员(WHO).方法(H ...

  5. Android开发系列（二十）：AutoCompleteTextView（自己主动完毕文本框）的功能和使用方法

    当用户输入一定的字符之后,自己主动完毕文本框可以显示一个下拉菜单,供用户从中选择,当用户选择某个菜单项之后,AutoCompleteTextView可以依照用户的选择自己主动填写该文本框 AutoCo ...

  6. addSubview 与 removeFromSuperview

    //当前视图的父视图添加和本视图同级的视图 [self.view.superview addSubview:showview.view]; //从父视图移除当前视图 [self.view remove ...

  7. Spring Boot应用启动原理分析（转）

    在spring boot里,很吸引人的一个特性是可以直接把应用打包成为一个jar/war,然后这个jar/war是可以直接启动的,不需要另外配置一个Web Server. 如果之前没有使用过sprin ...

  8. hdu 4811 数学 不难

    http://acm.hdu.edu.cn/showproblem.php? pid=4811 由于看到ball[0]>=2 && ball[1]>=2 && ...

  9. JNI——Java调用C/C++函数

    从C/C++到Java,再从Java回到C/C++,今天终于有机会了解了连接Java.C/C++的桥梁——JNI.哈哈!分享一下!   一.简介 JNI是Java native interface的简 ...

  10. 并查集（disjoint set）的实现及应用

    这里有一篇十分精彩.生动的 并查集详解 (转): "朋友的朋友就是朋友"⇒ 传递性,建立连通关系 disjoint set,并查集(一种集合),也叫不相交集,同时也是一种树型的数据 ...