经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » HTML5 » 查看文章
使用css完成物流进度的样式
来源：cnblogs　　作者：冰雪Queen　　时间：2018/10/24 9:22:02　　对本文有异议

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

效果：

 

css样式：

  1. <style type="text/css">
  2.         ul li {
  3.             list-style: none;
  4.         }
  5.         
  6.         .package-status {
  7.             padding: 18px 0 0 0
  8.         }
  9.         
  10.         .package-status .status-list {
  11.             margin: 0;
  12.             padding: 0;
  13.             margin-top: -5px;
  14.             padding-left: 8px;
  15.             list-style: none;
  16.         }
  17.         
  18.         .package-status .status-list>li {
  19.             border-left: 2px solid #0278D8;
  20.             text-align: left;
  21.         }
  22.         
  23.         .package-status .status-list>li:before {
  24.             /* 流程点的样式 */
  25.             content: '';
  26.             border: 3px solid #0278D8;
  27.             background-color: #0278D8;
  28.             display: inline-block;
  29.             width: 6px;
  30.             height: 6px;
  31.             border-radius: 10px;
  32.             margin-left: -7px;
  33.             margin-right: 10px
  34.         }
  35.         
  36.         .package-status .status-box {
  37.             overflow: hidden
  38.         }
  39.         
  40.         .package-status .status-list>li {
  41.             height: auto;
  42.             width: 95%;
  43.         }
  44.         
  45.         .package-status .status-list {
  46.             margin-top: -8px
  47.         }
  48.         
  49.         .package-status .status-box {
  50.             position: relative
  51.         }
  52.         
  53.         .package-status .status-box:before {
  54.             content: " ";
  55.             background-color: #f3f3f3;
  56.             display: block;
  57.             position: absolute;
  58.             top: -8px;
  59.             left: 20px;
  60.             width: 10px;
  61.             height: 4px
  62.         }
  63.         
  64.         .package-status .status-list {
  65.             margin-top: 0px;
  66.         }
  67.         
  68.         .status-list>li:not(:first-child) {
  69.             padding-top: 10px;
  70.         }
  71.         
  72.         .status-content-before {
  73.             text-align: left;
  74.             margin-left: 25px;
  75.             margin-top: -20px;
  76.         }
  77.         
  78.         .status-content-latest {
  79.             text-align: left;
  80.             margin-left: 25px;
  81.             color: #0278D8;
  82.             margin-top: -20px;
  83.         }
  84.         
  85.         .status-time-before {
  86.             text-align: left;
  87.             margin-left: 25px;
  88.             font-size: 10px;
  89.             margin-top: 5px;
  90.         }
  91.         
  92.         .status-time-latest {
  93.             text-align: left;
  94.             margin-left: 25px;
  95.             color: #0278D8;
  96.             font-size: 10px;
  97.             margin-top: 5px;
  98.         }
  99.         
  100.         .status-line {
  101.             border-bottom: 1px solid #ccc;
  102.             margin-left: 25px;
  103.             margin-top: 10px;
  104.         }
  105.         
  106.         .list {
  107.             padding: 0 20px;
  108.             background-color: #F8F8F8;
  109.             margin: 10px 0 0 25px;
  110.             border: 1px solid #EBEBEB;
  111.         }
  112.         
  113.         .list li {
  114.             line-height: 30px;
  115.             color: #616161;
  116.         }
  117.     </style>

　　

HTML：

  1. <body>
  2.     <div class="package-status">
  3.         <div class="status-box">
  4.             <ul class="status-list">
  5.                 <li>
  6.                     <div class="status-content-before">您的订单开始处理</div>
  7.                     <div class="status-time-before">2017-08-17 23:31 周四</div>
  8.                     <div class="status-line"></div>>
  9.                 </li>
  10.                 <li>
  11.                     <div class="status-content-before">卖家发货</div>
  12.                     <div class="status-time-before">2017-08-18 09:11 周五</div>
  13.                     <div class="status-line"></div>
  14.                 </li>
  15.                 <li>
  16.                     <div class="status-content-before">发往深圳中转站</div>
  17.                     <div class="status-time-before">2017-08-19 01:21 周六</div>
  18.                     <div class="status-line"></div>
  19.                 </li>
  20.                 <li>
  21.                     <div class="status-content-before">到达深圳</div>
  22.                     <div class="status-time-before">2017-08-19 06:21 周六</div>
  23.                     <div class="status-line"></div>
  24.                 </li>
  25.                 <li>
  26.                     <div class="status-content-before">发往潮汕中心</div>
  27.                     <div class="status-time-before">2017-08-19 09:21 周六</div>
  28.                     <div class="status-line"></div>
  29.                 </li>
  30.                 <li class="latest">
  31.                     <div class="status-content-latest">快件到达 潮汕中心</div>
  32.                     <div class="status-time-latest">2017-08-20 14:16 周日</div>
  33.                     <div class="status-line"></div>
  34.                 </li>
  35.             </ul>
  36.         </div>
  37.     </div>
  38.  
  39. </body>

　　

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号