欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

如何使用Css实现进度跟踪条?(代码示例)

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

本篇文章给大家分享的内容是关于如何使用Css实现进度跟踪条?(代码示例),有需要的朋友可以参考一下。

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

360截图20181106163045556.jpg

我们将从一小段HTML开始:

<ol class="track-progress">
  <li>
    Site Information 
    </li>
  <li>
    Data Source  
    </li>
  <li>
    Final Details  
    </li>
    </ol>

现在,我们将重置有序列表样式并使列表元素显示在一行中。我们使用以下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;
  }

你会得到如下的效果:

360截图20181106163338931.jpg

让这个跟踪器占用所有可用的宽度。为了灵活起见,我们将向跟踪器<ol>标记添加HTML属性,以声明进程中的步骤数。这样我们可以通过更改属性值来添加一些默认宽度。

HTML:

<ol class="track-progress" data-steps="3">
  <li>
    Site Information  
    </li>
  <li>
    Data Source  
    </li>
  <li>
    Final Details  
   </li>
</ol>

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%; }

就变成了如下效果:

360截图20181106163553914.jpg

要删除这烦人的空白区域,我们必须删除<li>标签之间的空白区域。我们可以用HTML注释来做到这一点:

 <ol class="track-progress" data-steps="3">
   <li>
     Site Information   </li><!--
--><li>
     Data Source   </li><!--
--><li>
     Final Details   </li>
 </ol>

效果如下:

360截图20181106163742737.jpg

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

 <ol class="track-progress" data-steps="3">
   <li class="done">
     <span>Site Information</span>
   </li><!--
--><li class="done">
     <span>Data Source</span>
   </li><!--
--><li>
     <span>Final Details</span>
   </li>
 </ol>

我添加了一个完成的类来表示不同风格的进度。这是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;
  }

结果如下:

360截图20181106164019352.jpg

为了添加箭头,我们将使用: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;
  }

效果如下:

360截图20181106164256999.jpg

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

.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;
  }

效果如下:

360截图20181106164432893.jpg

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

<ol class="track-progress" data-steps="3">
   <li class="done">
     <span>Site Information</span>
     <i></i>
   </li><!--
--><li class="done">
     <span>Data Source</span>
   </li><!--
--><li>
     <span>Final Details</span>
     <i></i>
   </li>
 </ol>
.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;}

最终效果如下:

360截图20181106164558821.jpg 本文地址:http://itbyc.com/web/css3/20130.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1