纯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中，每个变量都有一个地址，地址就是变量在内存中的位置。
Python中的VAE算法实例
Jun 11, 2023 pm 07:58 PM
VAE是一种生成模型，全称是VariationalAutoencoder，中文译作变分自编码器。它是一种无监督的学习算法，可以用来生成新的数据，比如图像、音频、文本等。与普通的自编码器相比，VAE更加灵活和强大，能够生成更加复杂和真实的数据。Python是目前使用最广泛的编程语言之一，也是深度学习的主要工具之一。在Python中，有许多优秀的机器学习和深度
