首頁 > 文章 > web前端 > css實作簡單時間軸的實例程式碼

css實作簡單時間軸的實例程式碼

小云云原創: 2018-05-15 17:49:213082瀏覽

本文主要和大家介紹了前端css實現最基本的時間軸的範例程式碼，分享給大家，給大家做個參考，希望能幫助到大家。

原型：

程式碼：

<!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 p {
                height: 65px;
                color: #333333;
            }
            
            #timecenter p {
                height: 65px;
                color: #333333;
            }
            
            #timeright p {
                height: 65px;
                color: #333333;
            }
            
            #timeright p 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=&#39;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&#39; name=&#39;viewport&#39;>
    </head>

    <body>

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

            </p>

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

                <p 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>

                </p>
            </p>

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

                <p>
                    <p>完工交车</p>
                    <p>1小时</p>
                </p>
                <p>
                    <p>完工交车</p>
                    <p>1小时</p>
                </p>
            </p>
        </p>
    </body>
</html>

相關推薦：
jquery去掉時間軸頭尾部線條實例講解

幾款Jquery實現的漂亮時間軸教學

CSS3實作時間軸效果方法

以上是css實作簡單時間軸的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css使用relative模仿百度首頁top下一篇：css使用relative模仿百度首頁top

看更多