Beispielcode für die Verwendung von CSS zur Implementierung des Logistikfortschrittsstils

<style type="text/css">
        ul li {
            Listenstil: keiner;
        }
        .Paketstatus {
            Polsterung: 18px 0 0 0
        }
        .Paketstatus .Statusliste {
            Rand: 0;
            Polsterung: 0;
            Rand oben: -5px;
            Polsterung links: 8px;
            Listenstil: keiner;
        }
        .package-status .status-list>li {
            Rahmen links: 2px durchgezogen #0278D8;
            Textausrichtung: links;
        }
        .package-status .status-list>li:vor {
            /* Flow-Point-Stil*/
            Inhalt: '';
            Rand: 3px durchgezogen #0278D8;
            Hintergrundfarbe: #0278D8;
            Anzeige: Inline-Block;
            Breite: 6px;
            Höhe: 6px;
            Rahmenradius: 10px;
            Rand links: -7px;
            Rand rechts: 10px
        }
        .Paket-Status .Status-Box {
            Überlauf: versteckt
        }
        .package-status .status-list>li {
            Höhe: automatisch;
            Breite: 95 %;
        }
        .Paketstatus .Statusliste {
            Rand oben: -8px
        }
        .Paket-Status .Status-Box {
            Position: relativ
        }
        .package-status .status-box:vor {
            Inhalt: " ";
            Hintergrundfarbe: #f3f3f3;
            Anzeige: Block;
            Position: absolut;
            oben: -8px;
            links: 20px;
            Breite: 10px;
            Höhe: 4px
        }
        .Paketstatus .Statusliste {
            Rand oben: 0px;
        }
        .status-list>li:nicht(:erstes-Kind) {
            Polsterung oben: 10px;
        }
        .status-Inhalt-vorher {
            Textausrichtung: links;
            Rand links: 25px;
            Rand oben: -20px;
        }
        .status-content-latest {
            Textausrichtung: links;
            Rand links: 25px;
            Farbe: #0278D8;
            Rand oben: -20px;
        }
        .status-Zeit-vor {
            Textausrichtung: links;
            Rand links: 25px;
            Schriftgröße: 10px;
            Rand oben: 5px;
        }
        .status-time-latest {
            Textausrichtung: links;
            Rand links: 25px;
            Farbe: #0278D8;
            Schriftgröße: 10px;
            Rand oben: 5px;
        }
        .status-line {
            Rahmen unten: 1px durchgezogen #ccc;
            Rand links: 25px;
            Rand oben: 10px;
        }
        .Liste {
            Polsterung: 0 20px;
            Hintergrundfarbe: #F8F8F8;
            Rand: 10px 0 0 25px;
            Rand: 1px durchgezogen #EBEBEB;
        }
        .Liste li {
            Zeilenhöhe: 30px;
            Farbe: #616161;
        }
    </Stil>

<Text>
    <div Klasse="Paketstatus">
        <div Klasse="Status-Box">
            <ul Klasse="Statusliste">
                <li>
                    <div class="status-content-before">Ihre Bestellung wird bearbeitet</div>
                    <div class="status-time-before">17.08.2017 23:31 Donnerstag</div>
                    <div Klasse = "Statuszeile"></div>>
                </li>
                <li>
                    <div class="status-content-before">Verkäufer versendet</div>
                    <div class="status-time-before">18.08.2017 09:11 Freitag</div>
                    <div Klasse = "Statuszeile" </div>
                </li>
                <li>
                    <div class="status-content-before">An die Umladestation Shenzhen gesendet</div>
                    <div class="status-time-before">19.08.2017 01:21 Samstag</div>
                    <div Klasse = "Statuszeile" </div>
                </li>
                <li>
                    <div class="status-content-before">In Shenzhen angekommen</div>
                    <div class="status-time-before">19.08.2017 06:21 Samstag</div>
                    <div Klasse = "Statuszeile" </div>
                </li>
                <li>
                    <div class="status-content-before">An Chaoshan Center gesendet</div>
                    <div class="status-time-before">19.08.2017 09:21 Samstag</div>
                    <div Klasse = "Statuszeile" </div>
                </li>
                <li Klasse="neueste">
                    <div class="status-content-latest">Expresslieferung kommt im Chaoshan Center an</div>
                    <div class="status-time-latest">20.08.2017 14:16 Sonntag</div>
                    <div Klasse = "Statuszeile" </div>
                </li>
            </ul>
        </div>
    </div>
</body>