Maison > Article > interface Web > Exemple de code pour implémenter une chronologie simple en utilisant CSS

Exemple de code pour implémenter une chronologie simple en utilisant CSS

小云云original: 2018-05-15 17:49:213082parcourir

Cet article présente principalement l'exemple de code pour implémenter la chronologie la plus basique en CSS front-end, et le partage avec vous comme référence. J'espère qu'il pourra vous aider.

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>

Recommandations associées :
jquery supprimer la chronologie Explication d'exemples de lignes de tête et de queue

Plusieurs magnifiques tutoriels de chronologie implémentés avec Jquery

Comment implémenter l'effet de chronologie à l'aide de CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：CSS utilise pour imiter la page d'accueil de BaiduArticle suivant：CSS utilise pour imiter la page d'accueil de Baidu

Articles Liés

Voir plus