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

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

首先先看設計稿

圖中的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布局更完美。

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

首先先看設計稿 分析需求如下 線的長度不固定,適應移動端和pc端 點平均地分布在一條線上 點的個數不固定,可能會改變 啟用的點之間線的顏色是綠色的 兩種種方式 百分比寬度切分和flex布局 貼上 html charset utf 8 js bintitle head class pub wrap c...

CSS 中cursor的作用 引導使用者

關於cursor的說明,書上是這樣講的 設定或檢索在物件上移動的滑鼠指標採用的游標形狀。此屬性的值可以是多個,其間用逗號分隔。假如第乙個值不可以被客戶端系統理解或所指定的游標無法找到及顯示,則第二個值將被嘗試使用。依此類推。假如全部值都不可用的話,則此屬性不會發生作用。游標不會被改變。此屬性對於cu...

Linux引導流程步驟四 新增使用者步驟

引導流程第四步 加電自檢 自舉程式 載入核心 驅動 init 驗證使用者 login root etc passwd ls l etc passwd 加密採用的預設md5 單項不可逆 pwconv 將passwd檔案中的密碼轉存到shadow pwconv 語法 root x 0 0 root ro...