本篇文章给大家分享的内容是关于如何使用css实现进度跟踪条？（代码示例），有需要的朋友可以参考一下。
这是一个关于如何创建一个非常简单的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属性，以声明进程中的步骤数。这样我们可以通过更改属性值来添加一些默认宽度。
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%; }
就变成了如下效果：
要删除这烦人的空白区域，我们必须删除
标签之间的空白区域。我们可以用HTML注释来做到这一点：
- Site Information
- Data Source
- Data Source
- Data Source
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613142.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
微信扫一扫
支付宝扫一扫
