使用css完成引導使用者按照流程完成任務的進度導航條

2022-08-05 16:39:14 字數 838 閱讀 4011

首先先看設計稿

圖中的12345便是主角進度條。

分析需求如下:

線的長度不固定,適應移動端和pc端

點平均地分佈在一條線上

點的個數不固定,可能會改變

啟用的點之間線的顏色是綠色的

兩種種方式 百分比寬度切分和flex佈局

貼上**

html

在群內累計佈置3天作業,即可加入先鋒教師!

在群內累計佈置3天作業,即可加入先鋒教師!

css

ul 

li .pub-wrap

.pub-title

.pub-process

.pub-process:after

.pub-process li

.pub-process li:first-child

.pub-process .ball

.pub-process .active .ball

.pub-process .active + .active:after

.process-3 li

.process-5 li

/* flex ver */

.pub-process-flex

.pub-process-flex li

.pub-process-flex li:first-child

實現效果如圖

使用百分比因為寬度是百分比設死的,這樣在點的數量修改時,我們還是要改css,所以建議使用flex佈局更完美。