前端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后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

想学编程该如何入门?

很多想学编程的小伙伴的一个问题就是我该如何入门?是啊,面对这样的问题我们该如何去做呢,这是摆在很多小伙伴面前的问题。小编根据自己多年的编程经验为大家分享自己的看...

25840
来自专栏java一日一条

朝九晚五的程序员如何提高开发技能

你只在早上9点至晚上5点间编码,却担心这样不够好吗?你看见其他的程序员工作于个人项目或开源项目,参与编程马拉松,并花费所有的业余时间编写软件了吗?你可能会认为只...

6710
来自专栏JAVA高级架构

携程大数据实时计算平台建设实践

本文作者为携程大数据平台负责人张翼。张翼浙江大学硕士毕业,2015年初加入携程,主导了携程实时数据计算平台的建设,以及携程大数据平台整合和平台技术的演进。进入互...

49120
来自专栏腾讯技术工程官方号的专栏

如何使用爬虫技术评估内容营销效果

文章背景 内容营销是互联网推广的重要手段之一,众多的市场部门均有涉及内容营销的推广,然而,它的效果量化是一个难题。显然,内容营销的实际效果完全是由互联网的用户群...

48050
来自专栏腾讯大数据的专栏

腾讯推荐——让您的系统瞬间个性化

腾讯推荐 “腾讯推荐”是腾讯大数据近期大力打造的开放服务平台,旨在集业务接入、数据上报、算法计算、实时推荐和效果监控于一体,对外提供全自动实时精准推荐服务。 ...

39690
来自专栏ThoughtWorks

敏捷软件测试常见的七个误区

敏捷软件开发是从1990年代开始逐渐引起广泛关注的一种新型软件开发方法,是能够应对快速变化的需求的一种软件开发能力,它作为一种新型的开发模式,被越来越多地应用到...

37580
来自专栏SDNLAB

编排不等于用例:不属于编排的Top3

在云计算的早期,我们曾花费大量时间教客户关于云是什么,如何使用它,为什么它是好的,更重要的是,云不是什么。

12440
来自专栏java一日一条

朝九晚五的程序员如何提高开发技能

你只在早上9点至晚上5点间编码,却担心这样不够好吗?你看见其他的程序员工作于个人项目或开源项目,参与编程马拉松,并花费所有的业余时间编写软件了吗?你可能会认为只...

7520
来自专栏AI派

推荐系统这么火,但你真的需要吗

当下,推荐系统已然成了一门显学,也是现在热门的 AI 分支之一。最近十年尤其最近五年,借助推荐系统的技术和名头,异军突起的互联网产品越来越多,个性化推荐系统成了...

39360
来自专栏about云

大数据架构和模式(二)如何知道一个大数据解决方案是否适合您的组织

问题导读 1.如何判断大数据问题是否需要大数据解决方案? 2.如何评估大数据解决方案的可行性? 3.可通过大数据技术获取何种洞察? 4.是否所有大数据都存在大...

36170

扫码关注云+社区

领取腾讯云代金券