专栏首页编程微刊前端css实现最基本的时间轴

前端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 条评论
登录 后参与评论

相关文章

  • jQuery实现点击图标div循环放大缩小功能

    很基础的一个功能,点击左下角的图标按钮,地图的整个div会变大,变大预览之后,再次点击图标按钮,地图的整个div会变小,恢复原样,两个图标在地图界面的放大和缩小...

    王小婷
  • jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)

    1:点击添加按钮弹出弹框,form表单可以填写相关的信息 2:点击保存按钮,相关信息会显示在界面的列表里

    王小婷
  • cookie的跨页面传值问题仿购物车案例

    大家都知道cookie的特性, cookie生效在同一个域名下,cookie储存量有限,cookie主要用于记录用户的一些信息,例如记录用户的登录信息使用户一段...

    王小婷
  • 【Web】一个非常简单的移动web消息框

    最近在写个简单的公众号页面,前端验证时有些信息要提示,很简单的需求实在不想找啥现成的轮子,又不至于用alert这么粗暴,遂写了个非常简单的消息框,效果如图:

    AhDung
  • css制作表单

    对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用< fie...

    练小习
  • 侧边多彩磁铁导航

    今天给大家分享一个代码,侧边多彩磁铁导航【注意:这个代码在QQ和微信自带的浏览器不会有效果,但不影响美观】 不要用电脑打开,你会看不到效果。

    小小鱼儿小小林
  • 原生JS实现魔方效果

    越陌度阡
  • css实现内容不相同的左右两个div等高

    现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢?

    Daotin
  • 通用的序列号生成器库

    正如文章《通用的业务编号规则设计实现(附源码)》 文章里需要一个多实例和线程安全的序列化生成器,在SQL Server 2012+ 版本 有一个通过.NET程序...

    张善友
  • 电商项目(上)

    :nth-last-child(n): 选择器匹配属于其元素的第n个子元素的每个元素

    达达前端

扫码关注云+社区

领取腾讯云代金券