你的位置:首页 > 网页设计

[网页设计]使用css完成物流进度的样式

CSS快递进度条效果-蚂蚁部落

快递流程没有完成时,较细深灰色的横线。 [CSS] 纯文本查看 复制代码 .line_active { background: #02994C !important; } 元素添加此样式类之后,能够优...

模仿淘宝-导航式订单跟踪css简单实现 - zzj0的..._CSDN博客

div css仿京东订单流程图样式代码 yingzhaom 12-...物流跟踪css chenLeiInTuling 11-17 1190 htmlgt;...详述用html5 canvas实现的类似于天猫的购物进...

CSS实现进度条和订单进度条 - 郭锦荣 - 博客园

然后用JS就能实现动态的进度条啦! PS:CSS样式没怎么优化,然后调试CSS代码时发现第一个圆的样式不起作用,所以才将默认背景色改成绿色,希望能帮我解决这...

纯css3实现的物流快递跟踪状态更新css3特效代码下载 - CSS样式 - ...

纯css3实现的物流公司 模拟京东 淘宝物流状态的特效代码,可以在不需要js文件的支持来实现的物流状态css代码下载,一个页面全部搞定 加载速度快 推荐 打...

div css仿淘宝物流订单流程图样式代码

他的发布 已发布1 div css仿淘宝物流订单流程图样式代码 热门标签 a标签属性 圆角 a标签 css下拉菜单 html导航 html导航条 下载该资源用户也下载了...

Div+CSS展示物流跟踪轨迹信息 - 跟着阿笨一起玩. - 博客园

Div+CSS展示物流跟踪轨迹信息 lt;!DOCTYPE htmlgt; #ordertrack td { vertical-align: top; } table { empty-cells: show; } #odlist, #orderstate...

物流进度,购物进度流程CSS特效—何问起

2016-06-06 01:07:50 您的订单已在何问起广州分拨中心发货完成,准备发往中山分拨中心 2016-06-05 10:07:15 您的订单已经进入何问起南京分拨中心,准备发...

div css仿淘宝物流订单流程图样式代码_文字特效_织梦云模板

本文链接:https://.dedeyun./sucai/code-5792.html div css仿淘宝物流订单流程图样式代码 https:/...

物流跟踪css - CSDN博客

html 查看物流信息详情 xumoqiu 10-31 897 CSS 样式 .package-status{padding...css+html实现时间轴1.css body { font-size: 12px; } ul li { list-...

物流的纯css实现方法 - Y.zoro - 博客园

物流的纯css实现方法 首先我们来看看UI给出的设计图。 为什么到达是最前面,为什么物流顺序是倒叙的,这是...

纯css3实现物流状态持续更新的实例代码-css教程-PHP中文网

以上就是纯css3实现物流状态持续更新的实例代码的详细内容,更多请关注php中文网其它...分享四个非常好看实用的CSS样式表格 HTML怎么设置网页背景图 总...

时间轴特效 jquery时间轴js

图片放大 时间轴 日历代码 滚动代码 选项卡 进度条...css3 CSS3赛车跑道时间轴样式代码 演示 jquery jQuer...

背景图片无限横向重复平铺,纵向不重复 - style,CSS,样式表

背景图片无限横向重复平铺,纵向不重复 - style,CSS,样式表style=quot;background-...扫描下面的二维码,可以用手机查询快递单号,很方便!不信你试试! 扫描下面的...

快递物流跟踪信息 DIV CSS布局网页模板模块_ThinkCSS

物流跟踪DIV CSS布局模块效果截图 此DIV CSS布局的网页模块特点: 1、使用CSS布局每条物流信息 2、纯div css布局局部模块,没有图片而实现前面圆点 3、...

CSS物流,国内跨境电商卖家首选的物流平台。

作为跨境电商领域的标杆企业,本着“让跨境电商更便捷”的发展理念,2016年,CSS跨境电商平台正式成立了CSS物流,专为跨境出口电商提供一站式的物流解决方案。 ...

div css仿京东订单流程图样式代码 - roucheng - 博客园

initial-scale=1quot; /gt; div css仿京东订单流程图样式代码—何问起 .hovertree-tracklist ul li { ...

时间轴jquery特效代码_时间轴js特效代码_时间轴网页代码下载

jQuery水平时间轴实现个人历程代码 2596 15 收藏 源文件 预览 css3 bootstrap...jquery带播放进度条的时间轴样式代码 3004 14 收藏 源文件 预览 css3响应...

要做个物流跟踪系统,要求在地图上显示出位置,怎么做~急-CSDN论坛

数据格式 mapinfo格式tab、arcgis的shp等公开格式,其他...模仿淘宝-导航式订单跟踪css简单实现 小程序物流追踪...android物流进度展示 仿淘宝物流效果(物流时间轴效...

爱查快递|爱查快递 v1.2下载_网站源码_站长下载

爱查快递(快递之家版)目前支持70余家快递查询,采用...使用说明 1、到.ickd./api/申请KEY...v1.1 修正CSS相关BUG,将样式控制统一到img/css.css...

模仿快递路线图的html, css 样式-布布扣-bubuko.

模仿快递路线图的html, css 样式 时间:2016-01-29 19:40:39 阅读:415 评论...} /* See license.txt for terms of usage */ /** reset styling...长隆水上乐园9月活动?广州长隆水上乐园最新优惠活动?深圳笔架山公园简介 深圳笔架山公园在哪里?深圳七娘山地质公园 深圳七娘山攻略 七娘山地质成因深圳塘朗山登高 深圳塘朗山公园在哪里?深圳莲花山公园登高 深圳莲花山在哪里2017广东旅博会将于明日正式开幕北京办理香港签注 北京办理香港签注 北京办理香港签注 北京办理香港签注 北京办理香港签注 北京办理香港签注 北京办英国签证 北京办英国签证 北京办英国签证 北京办英国签证 北京办英国签证 北京办英国签证 北京半日游 北京半日游 北京半日游 北京半日游 北京半日游 北京半日游 北京包车 北京包车 北京包车 北京包车 北京包车 北京包车

使用css完成物流进度的样式

效果:

 

css样式:

<style type="text/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;  } </style>

  

HTML:

<body> <div >  <div >   <ul >    <li>     <div >您的订单开始处理</div>     <div >2017-08-17 23:31 周四</div>     <div ></div>>    </li>    <li>     <div >卖家发货</div>     <div >2017-08-18 09:11 周五</div>     <div ></div>    </li>    <li>     <div >发往深圳中转站</div>     <div >2017-08-19 01:21 周六</div>     <div ></div>    </li>    <li>     <div >到达深圳</div>     <div >2017-08-19 06:21 周六</div>     <div ></div>    </li>    <li>     <div >发往潮汕中心</div>     <div >2017-08-19 09:21 周六</div>     <div ></div>    </li>    <li >     <div >快件到达 潮汕中心</div>     <div >2017-08-20 14:16 周日</div>     <div ></div>    </li>   </ul>  </div> </div></body>