首先先看设计稿
图中的12345便是主角进度条。
分析需求如下：
线的长度不固定，适应移动端和pc端点平均地分布在一条线上点的个数不固定，可能会改变激活的点之间线的颜色是绿色的两种种方式 百分比宽度切分和flex布局
贴上代码
HTMLJS Bin 在群内累计布置3天作业，即可加入先锋教师！
- 1天
- 1天
- 1天
- 1天
- 1天
在群内累计布置3天作业，即可加入先锋教师！
- 1天
- 1天
- 1天
- 1天
- 1天
css
ul { margin:0; padding:0;}li { list-style: none;}.pub-wrap { position: relative; padding: 0 30px 10px; margin-top: 28px; border-radius: 6px; background-color: #edf2f2;}.pub-title { padding-top: 14px; margin-right: -20px; margin-left: -20px; font-size: 1.1875rem; text-align: center;}.pub-process { position: relative; height: 35px; margin-top: 28px; margin-left: 35px; font-size: 0; color: #fff;}.pub-process:after { position: absolute; top: 50%; left: 0; z-index: 1; width: 99%; height: 4px; content: ""; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); background-color: #d9d9d9;}.pub-process li { position: relative; z-index: 5; display: inline-block; width: 25%; height: 35px; font-size: .875rem;}.pub-process li:first-child { width: 35px; margin-left: -35px;}.pub-process .ball { position: absolute; top: 0; right: 0; z-index: 7; width: 35px; height: 35px; line-height: 35px; content: ""; text-align: center; border-radius: 50%; background-color: #d9d9d9;}.pub-process .active .ball { background-color: #11c2c2;}.pub-process .active + .active:after { position: absolute; top: 50%; left: 0; z-index: 6; width: 100%; height: 4px; content: ""; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); background-color: #11c2c2;}.process-3 li { width: 50%;}.process-5 li { width: 25%;}/* flex ver */.pub-process-flex { display: -webkit-box;}.pub-process-flex li { display: list-item; -webkit-box-flex: 1; width: auto;}.pub-process-flex li:first-child { width: 35px; margin-left: -35px; -webkit-box-flex: 0;} 实现效果如图
使用百分比因为宽度是百分比设死的，这样在点的数量修改时，我们还是要改css，所以建议使用flex布局更完美。
