CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード

<スタイル タイプ="text/css">
        ul li {
            リストスタイル: なし;
        }
        .パッケージステータス{
            パディング: 18px 0 0 0
        }
        .パッケージステータス .ステータスリスト {
            マージン: 0;
            パディング: 0;
            上マージン: -5px;
            左パディング: 8px;
            リストスタイル: なし;
        }
        .package-status .status-list>li {
            左境界線: 2px 実線 #0278D8;
            テキスト配置: 左;
        }
        .package-status .status-list>li:before {
            /* フローポイントスタイル*/
            コンテンツ： '';
            境界線: 3px 実線 #0278D8;
            背景色: #0278D8;
            表示: インラインブロック;
            幅: 6px;
            高さ: 6px;
            境界線の半径: 10px;
            左マージン: -7px;
            右マージン: 10px
        }
        .パッケージステータス .ステータスボックス {
            オーバーフロー: 非表示
        }
        .package-status .status-list>li {
            高さ: 自動;
            幅: 95%;
        }
        .パッケージステータス .ステータスリスト {
            上マージン: -8px
        }
        .パッケージステータス .ステータスボックス {
            位置: 相対
        }
        .package-status .status-box:before {
            コンテンツ： " ";
            背景色: #f3f3f3;
            表示: ブロック;
            位置: 絶対;
            上: -8px;
            左: 20px;
            幅: 10px;
            高さ: 4ピクセル
        }
        .パッケージステータス .ステータスリスト {
            上マージン: 0px;
        }
        .status-list>li:not(:first-child) {
            パディング上部: 10px;
        }
        .ステータスコンテンツ前{
            テキスト配置: 左;
            左マージン: 25px;
            上マージン: -20px;
        }
        .ステータスコンテンツ最新{
            テキスト配置: 左;
            左マージン: 25px;
            色: #0278D8;
            上マージン: -20px;
        }
        .ステータス時間前 {
            テキスト配置: 左;
            左マージン: 25px;
            フォントサイズ: 10px;
            上マージン: 5px;
        }
        .ステータスタイム最新{
            テキスト配置: 左;
            左マージン: 25px;
            色: #0278D8;
            フォントサイズ: 10px;
            上マージン: 5px;
        }
        .ステータスライン{
            下境界線: 1px 実線 #ccc;
            左マージン: 25px;
            上マージン: 10px;
        }
        .リスト{
            パディング: 0 20px;
            背景色: #F8F8F8;
            マージン: 10px 0 0 25px;
            境界線: 1px 実線 #EBEBEB;
        }
        .list li {
            行の高さ: 30px;
            色: #616161;
        }
    </スタイル>

<本文>
    <div class="パッケージステータス">
        <div class="ステータスボックス">
            <ul class="ステータスリスト">
                <li>
                    <div class="status-content-before">ご注文は処理中です</div>
                    <div class="status-time-before">2017-08-17 23:31 木曜日</div>
                    <div class="ステータスライン"></div>>
                </li>
                <li>
                    <div class="status-content-before">販売者が発送します</div>
                    <div class="status-time-before">2017-08-18 09:11 金曜日</div>
                    <div class="ステータスライン"></div>
                </li>
                <li>
                    <div class="status-content-before">深セン転送ステーションに送信</div>
                    <div class="status-time-before">2017-08-19 01:21 土曜日</div>
                    <div class="ステータスライン"></div>
                </li>
                <li>
                    <div class="status-content-before">深センに到着</div>
                    <div class="status-time-before">2017-08-19 06:21 土曜日</div>
                    <div class="ステータスライン"></div>
                </li>
                <li>
                    <div class="status-content-before">Chaoshan Center に送信</div>
                    <div class="status-time-before">2017-08-19 09:21 土曜日</div>
                    <div class="ステータスライン"></div>
                </li>
                <li class="最新">
                    <div class="status-content-latest">速達便が潮汕センターに到着</div>
                    <div class="status-time-latest">2017-08-20 14:16 日曜日</div>
                    <div class="ステータスライン"></div>
                </li>
            </ul>
        </div>
    </div>
</本文>