189 8069 5689
小编给大家分享一下使用css实现进度跟踪条的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
金塔网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。创新互联从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
这是一个关于如何创建一个非常简单的UI小部件的小教程，以告诉用户他们在流程的哪个步骤。
我们将从一小段HTML开始：
- Site Information
- Data Source
- 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;
}你会得到如下的效果：
让这个跟踪器占用所有可用的宽度。为了灵活起见，我们将向跟踪器
HTML：
- Site Information
- Data Source
- 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%; }就变成了如下效果：
要删除这烦人的空白区域，我们必须删除
- Site Information
- Data Source
- Final Details
效果如下：
我想添加某种箭头来指示步骤序列中的实际方向，所以我需要额外的标记来将步骤内容与其他装饰材料隔离开来：
- Site Information
- Data Source
- 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;
}结果如下：
为了添加箭头，我们将使用: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;
}效果如下：
现在我们正确应用样式以使箭头颜色与上一步的状态匹配，并删除第一个元素中的箭头：
.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;
}效果如下：
现在我们要在跟踪器的开头和结尾添加箭头外观，以便我们添加更多标记：
- Site Information
- Data Source
- 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实现进度跟踪条的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！