步驟條CSS樣式

2021-10-09 17:24:05 字數 3428 閱讀 2312

在這裡記錄乙個手寫的步驟條,先看效果

重點就是,進度條與步驟div的寬保持一致,比如完成了第一步,就是進度條的width就是22%,完成了第二步,就是44%,當然這個是可以自由調整的

1

<

div class=

"step-div"

>

2<

div class=

"eis-horizontal-steps"

>

3<

div class=

"eis-form-steps"

>

4<

div class=

"eis-form-step is-finish" style=

"width:22%;margin-left: 4%"

>

5<

div class=

"eis-step-head"

>

6<

div class=

"eis-step-icon"

>

7<

div class=

"step-icon-txt"

>

1<

/div

>

8<

/div

>

9<

div class=

"eis-step-line"

>

10<

/div

>

11<

/div

>

12<

div class=

"eis-step-main"

>填寫基本資訊<

/div

>

13<

/div

>

14<

div class=

"eis-form-step is-finish" style=

"width:22%"

>

15<

div class=

"eis-step-head"

>

16<

div class=

"eis-step-icon"

>

17<

div class=

"step-icon-txt"

>

2<

/div

>

18<

/div

>

19<

div class=

"eis-step-line"

>

20<

/div

>

21<

/div

>

22<

div class=

"eis-step-main"

>獲取**資訊<

/div

>

23<

/div

>

24<

div class=

"eis-form-step" style=

"width:22%"

>

25<

div class=

"eis-step-head"

>

26<

div class=

"eis-step-icon"

>

27<

div class=

"step-icon-txt"

>

3<

/div

>

28<

/div

>

29<

div class=

"eis-step-line"

>

30<

/div

>

31<

/div

>

32<

div class=

"eis-step-main"

>確認投保<

/div

>

33<

/div

>

34<

div class=

"eis-form-step" style=

"width:22%"

>

35<

div class=

"eis-step-head"

>

36<

div class=

"eis-step-icon"

>

37<

div class=

"step-icon-txt"

>

4<

/div

>

38<

/div

>

39<

div class=

"eis-step-line"

>

40<

/div

>

41<

/div

>

42<

div class=

"eis-step-main"

>支付訂單<

/div

>

43<

/div

>

44<

div class=

"eis-form-step" style=

"width:8%"

>

45<

div class=

"eis-step-head"

>

46<

div class=

"eis-step-icon"

>

47<

div class=

"step-icon-txt"

>

5<

/div

>

48<

/div

>

49<

/div

>

50<

div class=

"eis-step-main"

>生成保單<

/div

>

51<

/div

>

52<

div class=

"eis-step-progress"

>

<

/div

>

53<

/div

>

54<

/div

>

55<

/div

>

1

常用css 文字 樣式 滾動條css 樣式

常用css 文字不換行,直到遇到br標籤。white space nowrap 前提設定寬度.一行文字 省略號 text overflow ellipsis overflow hidden white space nowrap 多行文字省略號 display webkit box webkit bo...

css滾動條樣式

滾動條樣式 webkit scrollbar 整個滾動條.webkit scrollbar button 滾動條上的按鈕 上下箭頭 webkit scrollbar thumb 滾動條上的滾動滑塊.webkit scrollbar track 滾動條軌道.webkit scrollbar track...

css 滾動條樣式

1,overflow內容溢位時的設定 overflow 水平及垂直方向內容溢位時的設定 overflow x 水平方向內容溢位時的設定 overflow y 垂直方向內容溢位時的設定 以上三個屬性設定的值為visible scroll hidden auto visible 預設值。使用該值時,無論...