使用css实现进度跟踪条的方法-创新互联

小编给大家分享一下使用css实现进度跟踪条的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

陆河ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

这是一个关于如何创建一个非常简单的UI小部件的小教程,以告诉用户他们在流程的哪个步骤。

使用css实现进度跟踪条的方法

我们将从一小段HTML开始:

  1. Site Information
  2. Data Source
  3. Final Details

现在,我们将重置有序列表样式并使列表元素显示在一行中。我们使用以下CSS代码:

.track-progress {
  margin: 0;
  padding: 0;
  overflow: hidden;
  }
.track-progress li {
  list-style-type: none;
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 30px;
  height: 30px;
  background-color: #f0f0f0;
  }

你会得到如下的效果:

使用css实现进度跟踪条的方法

让这个跟踪器占用所有可用的宽度。为了灵活起见,我们将向跟踪器

    标记添加HTML属性,以声明进程中的步骤数。这样我们可以通过更改属性值来添加一些默认宽度。

    HTML:

    1. Site Information
    2. Data Source
    3. Final Details

    CSS:

    .track-progress[data-steps="3"] li { width: 33%; }
    .track-progress[data-steps="4"] li { width: 25%; }
    .track-progress[data-steps="5"] li { width: 20%; }

    就变成了如下效果:

    使用css实现进度跟踪条的方法

    要删除这烦人的空白区域,我们必须删除

  1. 标签之间的空白区域。我们可以用HTML注释来做到这一点:

    1. Site Information
    2. Data Source
    3. Final Details

    效果如下:

    使用css实现进度跟踪条的方法

    我想添加某种箭头来指示步骤序列中的实际方向,所以我需要额外的标记来将步骤内容与其他装饰材料隔离开来:

    1. Site Information
    2. Data Source
    3. Final Details

    我添加了一个完成的类来表示不同风格的进度。这是CSS:

    .track-progress li > span {
      display: block;
      color: #999;
      font-weight: bold;
      text-transform: uppercase;
      }
    .track-progress li.done > span {
      color: #666;
      background-color: #ccc;
      }

    结果如下:

    使用css实现进度跟踪条的方法

    为了添加箭头,我们将使用:before和:after伪元素以及赋予边框巨大尺寸以创建角的技巧:

    .track-progress li > span:after,.track-progress li > span:before {
      content: "";
      display: block;
      width: 0px;
      height: 0px;
      position: absolute;
      top: 0;
      left: 0;
      border: solid transparent;
      border-left-color: #f0f0f0;
      border-width: 15px;
      }
    .track-progress li > span:after {
      top: -5px;
      z-index: 1;
      border-left-color: white;
      border-width: 20px;
      }
    .track-progress li > span:before {
      z-index: 2;
      }

    效果如下:

    使用css实现进度跟踪条的方法

    现在我们正确应用样式以使箭头颜色与上一步的状态匹配,并删除第一个元素中的箭头:

    .track-progress li.done + li > span:before {
      border-left-color: #ccc;
    }
    .track-progress li:first-child > span:after,.track-progress li:first-child > span:before {
      display: none;
      }

    效果如下:

    使用css实现进度跟踪条的方法

    现在我们要在跟踪器的开头和结尾添加箭头外观,以便我们添加更多标记:

    1. Site Information
    2. Data Source
    3. Final Details
    .track-progress li:first-child i,.track-progress li:last-child i {
      display: block;
      height: 0;
      width: 0;
    
      position: absolute;
      top: 0;
      left: 0;
    
      border: solid transparent;
      border-left-color: white;
      border-width: 15px;}.track-progress li:last-child i {
      left: auto;
      right: -15px;
    
      border-left-color: transparent;
      border-top-color: white;
      border-bottom-color: white;}

    最终效果如下:

    使用css实现进度跟踪条的方法

    看完了这篇文章,相信你对使用css实现进度跟踪条的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!


    新闻名称:使用css实现进度跟踪条的方法-创新互联
    URL地址:http://scyanting.com/article/ccpcip.html