効果: 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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: Docker イメージのインポートとエクスポートのコード例
目次背景メタバースとは何ですか?成果を達成するトライアル 1: THREE.TorusGeometr...
<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...
目次序文入力ボックスコンポーネントレイアウトvモデルデータ検証ルール設計形状サブコンポーネントは検証...
目次概要Node.js における CPU バウンド アプリケーションの歴史CPUを集中的に使用する操...
目次なぜ Docker が必要なのでしょうか? Docker デプロイメントの例コードの準備Dock...
この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...
目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...
アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...
まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...
1. 準備1.1 VMware 15 をダウンロードしてインストールするダウンロード リンク: h...
目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...
nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...
目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...
目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...
1. チューニングの必要性 私は、どのように書けばいいのか本当に分からないので、共有するために最適...