html 物流状态,使用css实现物流进度的样式的实例代码
效果:
css样式:
ul li {
list-style: none;
}
.package-status {
padding: 18px 0 0 0
}
.package-status .status-list {
margin: 0;
padding: 0;
margin-top: -5px;
padding-left: 8px;
list-style: none;
}
.package-status .status-list>li {
border-left: 2px solid #0278D8;
text-align: left;
}
.package-status .status-list>li:before {
/* 流程点的样式 */
content: '';
border: 3px solid #0278D8;
background-color: #0278D8;
display: inline-block;
width: 6px;
height: 6px;
border-radius: 10px;
margin-left: -7px;
margin-right: 10px
}
.package-status .status-box {
overflow: hidden
}
.package-status .status-list>li {
height: auto;
width: 95%;
}
.package-status .status-list {
margin-top: -8px
}
.package-status .status-box {
position: relative
}
.package-status .status-box:before {
content: " ";
background-color: #f3f3f3;
display: block;
position: absolute;
top: -8px;
left: 20px;
width: 10px;
height: 4px
}
.package-status .status-list {
margin-top: 0px;
}
.status-list>li:not(:first-child) {
padding-top: 10px;
}
.status-content-before {
text-align: left;
margin-left: 25px;
margin-top: -20px;
}
.status-content-latest {
text-align: left;
margin-left: 25px;
color: #0278D8;
margin-top: -20px;
}
.status-time-before {
text-align: left;
margin-left: 25px;
font-size: 10px;
margin-top: 5px;
}
.status-time-latest {
text-align: left;
margin-left: 25px;
color: #0278D8;
font-size: 10px;
margin-top: 5px;
}
.status-line {
border-bottom: 1px solid #ccc;
margin-left: 25px;
margin-top: 10px;
}
.list {
padding: 0 20px;
background-color: #F8F8F8;
margin: 10px 0 0 25px;
border: 1px solid #EBEBEB;
}
.list li {
line-height: 30px;
color: #616161;
}
HTML:
- 您的订单开始处理2017-08-17 23:31 周四
- 卖家发货2017-08-18 09:11 周五
- 发往深圳中转站2017-08-19 01:21 周六
- 到达深圳2017-08-19 06:21 周六
- 发往潮汕中心2017-08-19 09:21 周六
- 快件到达 潮汕中心2017-08-20 14:16 周日
总结
以上所述是小编给大家介绍的使用css完成物流进度的样式的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html 物流状态,使用css实现物流进度的样式的实例代码相关推荐
- 物流html5,使用css完成物流进度的样式
使用css完成物流进度的样式 效果: css样式: ul li { list-style: none; } .package-status { padding: 18px 0 0 0 } .packa ...
- vue重构html css,使用vue重构资讯页面的实例代码解析
从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在 ...
- :empty css 可以用在哪些标签,CSS伪类:empty让我眼前一亮(实例代码)
最近看过我文章的都知道:我最近在负责一个微信小程序的项目,在其中遇到了很多有趣的事和一些"奇思妙想".本文的背景就是某天早上我看着wxml文件中一堆wx:if/else和hidde ...
- 安卓java代码写控件_安卓自定义流程进度图控件实例代码
先上效果图: 如图,可实现设置:总流程数.已完进度程数.已完成颜色,各个标题 使用方法 1.导入compile 'com.github.pavlospt:circleview:1.3'依赖包(因为用到 ...
- html如何实现立体效果,纯css实现立体摆放图片效果的实例代码
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- 查询京东快递物流状态,快速筛选出代收的单号
商家在寄出快递后,时刻关心的物流状态,那么要如何快速的查询大量的单号物流呢?下面就以查询京东快递物流,并筛选出代签收的单号为例.用快递批量查询高手来操作查询试试. 操作步骤: 打开快递批量查询高手,在 ...
- web前端期末大作业 html+css+javascript 校园主题(东北大学8页)网页设计实例 代码质量高...
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能满足你的需求 ...
- 快速查询百世快递物流状态,是否签收
通过百世快递寄出的快递单号,要如何快速查询物流状态,并分析是否签收?下面一起来看用快递批量查询高手查询的方法. 先在电脑上下载注册快递批量查询高手,登录后点开"高级设置"选项 在弹 ...
- 如何查询每个韵达快递国际件单号的发出时间、物流状态
现在全球交流越来越广泛,国际快递这个行业,也慢慢的兴起了,就导致了,很多人会经常寄收发国际快递.那么该如何快速查询多个韵达国际件的物流状态呢?这里简单介绍一下. 所需工具 快递批量查询高手(注册介绍人 ...
最新文章
- C语言中的虚拟地址是什么?
- Saleor出现 Make sure you've added storefront address to ALLOWED_CLIENT_HOSTS
- 后台导出大量数据超时报 nginx404错误
- 计算机图形学E7——裁剪-交互式Liang-Barskey矩形窗口裁剪直线
- java的字符串池_翻译-Java字符串池
- gcc is unable to create an executable file.
- 0ffice2003安装2007兼容包不能使用的解法
- Redis集群原理详解
- 我的实习和求职经验(金融)
- 按月统计的sql语句
- CH 6202 黑暗城堡
- win10 安装kali子系统
- python数据的存储结构是指_python数据结构
- linux CentOS操作系统入门基本使用
- 自控第三章matlab,刘金锟 先进PID控制及MATLAB仿真第3章专家PID学习心得及疑问
- 《Event Structure Representation: Between Verbs and Argument Structure Constructions》翻译(一)
- 【小程序项目开发-- 京东商城】uni-app之商品列表页面 (下)
- 重新思考Swift中的设计模式:状态模式
- DBMS_REPAIR
- 组件嵌套(对应米斯特吴19)
热门文章
- C/C++小游戏 ——贪吃蛇
- Spring MVC源码——Root WebApplicationContext
- c语言数组两个值交换,如可交换两个数组中的元素?
- layer文件ajax上传,layer弹出层数据传输到content里面
- linux内核没有iobuf,LINUX2.6.26.6内核下双口RAM的驱动函数测试成功!
- mqtt 发送消息过多_阿里云MQTT服务端注解式消息处理分发与同步调用实践小结
- linux中touch命令的作用,Linux中touch命令的作用是什么
- Gartner: 2017年11大信息安全技术(解读版)
- 『科学计算』科学绘图库matplotlib练习
- unity, undo