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

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

効果:

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;
        }
    </スタイル>

HTML:

<本文>
    <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>
</本文>

要約する

上記は、CSS を使用して物流進捗のスタイルを完成させるために紹介したサンプルコードです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  vue-cli の紹介とインストール

>>:  Docker イメージのインポートとエクスポートのコード例

推薦する

MySqlサブクエリINの実装と最適化

目次IN が遅いのはなぜですか? INとEXISTSのどちらが速いでしょうか?効率を向上させるにはど...

CSS スタイル分類入門(基礎知識)

CSSスタイルの分類1. 内部スタイル ---- インラインスタイルスタイルタグの使用 <ス...

キャンバス操作プラグイン fabric.js の使い方を詳しく解説

Fabric.js は非常に便利なキャンバス操作プラグインです。ここでは、日常のプロジェクトで使用さ...

Zabbix Agent2を使用してOracleデータベースを監視する方法

概要zabbix バージョン 5.0 以降では、zabbix-agent2 という新しい機能が追加さ...

Vue要素はテーブルの追加、削除、データの変更を実装します

この記事では、テーブル内のデータを追加、削除、変更するためのvue要素の具体的なコードを参考までに共...

UbuntuでGRUBの起動時間を変更する

grubの起動時間を変更するためのオンライン検索は基本的に/etc/default/grubを変更す...

antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...

Vue 2.0 の基礎を詳しく解説

目次1. 特徴2. 例3. オプション4. 基本的な文法5. ライフサイクル6. ルーティング管理 ...

Vue ルーティング遅延読み込みの詳細

目次1. ルートの遅延読み込みとは何ですか? 2. ルートの遅延読み込みの使用1. ルートの遅延読み...

MySQL クエリの最適化: クエリが遅い原因と解決策

開発に携わっている友人、特に MySQL に関係のある友人は、非常に遅い MySQL クエリに遭遇す...

MySQL エラー「すべての派生テーブルには独自のエイリアスが必要です」の解決方法

MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...

Docker コンテナにおける Patroni の簡単な分析

目次イメージの作成ファイル構造Dockerファイルエントリポイント関数ファイルを生成するイメージを構...

Mysql varchar型の合計操作例

友人の中には、データベースについて学習しているときに、テーブル構造を作成するときに誤ってフィールドを...

React+TypeScriptプロジェクト構築事例解説

React プロジェクトの構築は非常に簡単ですが、Typescript と組み合わせると、実際にはそ...

Linux での MySQL 5.1 および 5.7 のインストール チュートリアル

以下のコンテンツのオペレーティング システムは次のとおりです: Centos 6.7 yum で M...