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 イメージのインポートとエクスポートのコード例

推薦する

Three.js が Facebook Metaverse 3D ダイナミック ロゴ効果を実現

目次背景メタバースとは何ですか?成果を達成するトライアル 1: THREE.TorusGeometr...

コンテンツウェブページの画像プレビューのデザイン

<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...

Vue3 でモバイル ログインおよび登録モジュールをエレガントに実装する方法

目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...

Node.js のワーカー スレッドの詳細な理解

目次概要Node.js における CPU バウンド アプリケーションの歴史CPUを集中的に使用する操...

Docker を使用して Go Web アプリケーションをデプロイする方法

目次なぜ Docker が必要なのでしょうか? Docker デプロイメントの例コードの準備Dock...

MySQL 5.7.13 のインストールと設定方法のグラフィック チュートリアル (win10 64 ビット)

この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...

Docker で lnmp をデプロイする詳細な手順

目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...

JavaScriptでよく使われる配列重複排除実戦ソースコード

アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...

Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...

Ubuntu 19.04 インストール チュートリアル (画像とテキストの手順)

1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...

Vue フロントエンド開発補助機能状態管理詳細例

目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

Linuxカーネルとデバイスツリーのコンパイルと書き込みを分析する

目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...

Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明

目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...

Nginx の高同時実行最適化の実践

1. チューニングの必要性​ 私は、どのように書けばいいのか本当に分からないので、共有するために最適...