Home > Article > Web Front-end > Example code for implementing a simple timeline using css

Example code for implementing a simple timeline using css

小云云Original: 2018-05-15 17:49:213024browse

This article mainly introduces the sample code for the most basic timeline implementation in front-end css, and shares it with you as a reference. I hope it can help you.

Prototype:

Code:

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

Several beautiful timeline tutorials implemented by Jquery

CSS3 method to achieve timeline effect

The above is the detailed content of Example code for implementing a simple timeline using css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css uses relative to imitate Baidu homepage topNext article：css uses relative to imitate Baidu homepage top

See more

Example code for implementing a simple timeline using css

Related articles