純css3實作物流狀態持續更新的實例程式碼
程式碼片段，純css3實作物流狀態持續更新的實例程式碼，特地分享如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{font-size: 12px;}
ul li{list-style: none;}
.track-rcol{width: 900px; border: 1px solid #eee;}
.track-list{margin: 20px; padding-left: 5px; position: relative;}
.track-list li{position: relative; padding: 9px 0 0 25px; line-height: 18px; border-left: 1px solid #d9d9d9; color: #999;}
.track-list li.first{color: red; padding-top: 0; border-left-color: #fff;}
.track-list li .node-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(http://demo.daimabiji.com/3531/img/order-icons.png) -21px -72px no-repeat;}
.track-list li.first .node-icon{background-position:0 -72px;}
.track-list li .time{margin-right: 20px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
.track-list li .txt{max-width: 600px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
.track-list li.first .time{margin-right: 20px; }
.track-list li.first .txt{max-width: 600px; }
</style>
</head>
<body>
<div class="track-rcol">
<div class="track-list">
<ul>
<li class="first">
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">【京东到家】京东配送员【申国龙】已出发，联系电话【18410106883，感谢您的耐心等待，参加评价还能赢取京豆呦】</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
<li>
<i class="node-icon"></i>
<span class="time">2016-03-10 18:07:15</span>
<span class="txt">感谢您在京东购物，欢迎您再次光临！</span>
</li>
</ul>
</div>
</div>
</body>
</html>【相關推薦】
1. 特別推薦：“php程式設計師工具箱” V0.1版本下載
2. 免費css線上影片教學
以上是純css3實作物流狀態持續更新的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
純CSS3怎麼實現波浪效果？ （程式碼範例）
Jun 28, 2022 pm 01:39 PM
純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！
Python中的SVM實例
Jun 11, 2023 pm 08:42 PM
Python中的支援向量機（SupportVectorMachine，SVM）是一個強大的監督學習演算法，可以用來解決分類和回歸問題。 SVM在處理高維度資料和非線性問題的時候表現出色，被廣泛地應用於資料探勘、影像分類、文字分類、生物資訊學等領域。在本文中，我們將介紹在Python中使用SVM進行分類的實例。我們將使用scikit-learn函式庫中的SVM模
css3怎麼實現花邊邊框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。
原來利用純CSS也能實現文字輪播與圖片輪播！
Jun 10, 2022 pm 01:00 PM
怎麼製作文字輪播與圖片輪播？大家第一想到的是利用js，其實利用純CSS也能實現文字輪播與圖片輪播，下面來看看實作方法，希望對大家有幫助！
VUE3入門實例：製作一個簡單的影片播放器
Jun 15, 2023 pm 09:42 PM
隨著新一代前端框架的不斷湧現，VUE3作為一個快速、靈活、易上手的前端框架備受熱愛。接下來，我們就來一起學習VUE3的基礎知識，製作一個簡單的影片播放器。一、安裝VUE3首先，我們需要在本地安裝VUE3。開啟命令列工具，執行以下命令:npminstallvue@next接著，新建一個HTML文件，引入VUE3：<!doctypehtml>
學習Golang指標轉換的最佳實務範例
Feb 24, 2024 pm 03:51 PM
Golang是一門功能強大且高效的程式語言，可用於開發各種應用程式和服務。在Golang中，指標是一種非常重要的概念，它可以幫助我們更靈活和有效率地操作資料。指標轉換是指在不同類型之間進行指標操作的過程，本文將透過具體的實例來學習Golang中指標轉換的最佳實踐。 1.基本概念在Golang中，每個變數都有一個位址，位址就是變數在記憶體中的位置。
Oracle實例數量與資料庫效能關係
Mar 08, 2024 am 09:27 AM
Oracle實例數量與資料庫效能關係Oracle資料庫是業界知名的關係型資料庫管理系統之一，廣泛應用於企業級的資料儲存與管理。在Oracle資料庫中，實例是一個非常重要的概念。實例是指Oracle資料庫在記憶體中的運作環境，每個實例都有獨立的記憶體結構和後台進程，用於處理使用者的請求和管理資料庫的操作。實例數量對於Oracle資料庫的效能和穩定性有著重要的影響。
