css步骤流程效果实现,css实现横向带箭头步骤流程效果

1

2 ul{margin:0px;padding:0px;list-style:none;}

3 .wrap{width:960px;height:auto;line-height:30px;margin:100px auto 0;}

4 .step-case{height:40px;}

5 .step-case li{float:left;margin:0px;width:12.5%;position:relative;cursor:pointer;}

6 .step-case li span{display:block;background-color:#ccc;height:40px;line-height:40px;text-align:center;color:#fff;font-weight:bold;}

7 .step-case b{position:absolute;font-size:0px;line-height:0px;top:0px;}

8 .step-case .b-l{border-width:2px 2px 2px 0;border-style:dashed solid dashed dashed;border-color:transparent #ccc transparent transparent;height:36px;left:-2px;}

9 .step-case .b-r{border-width:2px 0 2px 2px;border-style:dashed dashed dashed solid;border-color:transparent transparent transparent #ccc;height:36px;right:-2px;}

10 .step-case .b-1{border-width:20px 0 20px 20px;border-style:solid dashed solid solid;border-color:#ccc transparent #ccc #ddd;left:-20px;}

11 .step-case .b-2{border-width:20px 0 20px 20px;border-style:dashed dashed dashed solid;border-color:transparent transparent transparent #ccc;left:-21px;}

12 /*当前状态*/

13 .step-case .s-cur span{background-color:orange;}

14 .step-case .s-cur .b-l{border-right-color:orange;}

15 .step-case .s-cur .b-r{border-left-color:orange;}

16 .step-case .s-cur .b-1{border-color:orange orange orange #FABF55;}

17 .step-case .s-cur .b-2{border-left-color:#FADBA5;}

18 /*当前状态后*/

19 .step-case .s-cur-next .b-2{border-color:transparent transparent transparent orange;}

20 /*完成的状态*/

21 .step-case .s-finish span{background-color:#FADBA5;color:#000;}

22 .step-case .s-finish .b-l{border-right-color:#FADBA5;}

23 .step-case .s-finish .b-r{border-left-color:#FADBA5;}

24 .step-case .s-finish .b-1{border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;}

25 .step-case .s-finish .b-2{border-left-color:#FADBA5;}

26

27

28 window.οnlοad= function(){29 varstep=document.getElementById("step"),li=step.getElementsByTagName("li");30 for(vari= 0;i

32 li[i].index=i;33 li[i].οnclick= function(){34 vari= this.index;35 for(varj= 0;ji;){39 li[--j].className= "";40 if(j==i+1){41 li[j].className= "s-cur-next";42 }43 }44 this.className= "s-cur";45 }46

47 //})(i);

48 }49 };50

51

52

53 第1步

54 第2步

55 第3步

56 第4步

57 第5步

58 第6步

59

第7步

60

第8步

61

62