css实现横向带箭头步骤流程效果兼容性ie6

绝地灬酷狼 2022-06-14 12:16 155阅读 0赞

<style type="text/css">
    ul{margin:0px; padding:0px; list-style:none;}
    	.wrap{width:960px; height:auto; line-height:30px; margin:100px auto 0;}
    	.step-case{height:40px;}
    		.step-case li{ float:left; margin:0px; width:12.5%;position:relative; cursor:pointer;}
    		.step-case li span{display:block; background-color:#ccc;  height:40px; line-height:40px;  text-align:center; color:#fff; font-weight:bold;}
    		.step-case b{position:absolute; font-size:0px; line-height:0px; top:0px;}
    		.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;}
    		.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;}
    		.step-case .b-1{border-width:20px 0 20px 20px; border-style:solid dashed solid solid; border-color:#ccc transparent #ccc #ddd; left:-20px;}
    		.step-case .b-2{border-width:20px 0 20px 20px; border-style:dashed dashed dashed solid; border-color:transparent transparent transparent #ccc; left:-21px;}
    		/*当前状态*/
    		.step-case .s-cur span{background-color:orange;}
    		.step-case .s-cur .b-l{border-right-color:orange;}
    		.step-case .s-cur .b-r{border-left-color:orange;}
    		.step-case .s-cur .b-1{border-color:orange orange orange #FABF55;}
    		.step-case .s-cur .b-2{border-left-color:#FADBA5;}
    		/*当前状态后*/
    		.step-case .s-cur-next .b-2{border-color:transparent transparent transparent orange;}
    		/*完成的状态*/
    		.step-case .s-finish span{background-color:#FADBA5; color:#000;}
    		.step-case .s-finish .b-l{border-right-color:#FADBA5;}
    		.step-case .s-finish .b-r{border-left-color:#FADBA5;}
    		.step-case .s-finish .b-1{border-color:#FADBA5 #FADBA5 #FADBA5 #FABF55;}
    		.step-case .s-finish .b-2{border-left-color:#FADBA5;}
    </style>
    <script type="text/javascript">
    	window.onload = function(){
    		var step = document.getElementById("step"),li = step.getElementsByTagName("li");
    		for(var i = 0;i<li.length;i++){
    			//(function(i){
    				li[i].index = i;
    				li[i].onclick = function(){
    					var i = this.index;
    					for(var j = 0;j<i;j++){
    						li[j].className = "s-finish";
    					}
    					for(var j = li.length;j>i;){
    						li[--j].className = "";
    						if(j==i+1){
    							li[j].className = "s-cur-next";
    						}
    					}
    					this.className = "s-cur";
    				}
    
    			//})(i);
    		}
    	};
    </script>
    <div class="wrap">
    	<ul class="step-case" id="step"> 
    		<li class="s-finish"><span>第1步</span><b class="b-l"></b></li>
    		<li class="s-finish"><span>第2步</span><b class="b-1"></b><b class="b-2"></b></li>
    		<li class="s-finish"><span>第3步</span><b class="b-1"></b><b class="b-2"></b></li>
    		<li class="s-finish"><span>第4步</span><b class="b-1"></b><b class="b-2"></b></li>
    		<li class="s-cur"><span>第5步</span><b class="b-1"></b><b class="b-2"></b></li>
    		<li class="s-cur-next"><span>第6步</span><b class="b-1"></b><b class="b-2"></b></li>
    		<li><span>第7步</span><b class="b-1"></b><b class="b-2"></b></li>
    		<li><span>第8步</span><b class="b-1"></b><b class="b-2"></b><b class="b-r"></b></li> 
    	</ul>
    </div>

效果如下：

![20170620141106468][]

转载地址：[http://www.qdfuns.com/notes/41635/61b40eb18275790cc86762703c496f5a.html][http_www.qdfuns.com_notes_41635_61b40eb18275790cc86762703c496f5a.html]

[20170620141106468]: /images/20220614/580173a4cb6c4947a41e8e2dc0b58ef8.png
[http_www.qdfuns.com_notes_41635_61b40eb18275790cc86762703c496f5a.html]: http://www.qdfuns.com/notes/41635/61b40eb18275790cc86762703c496f5a.html

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 IE11的CSS兼容性问题

最近测试给了我一大堆BUG，一瞅发现全是IE11的。吐槽一下这个浏览器真的比较特立独行。很多默认的样式跟别的浏览器不同，而且最明显的一点应该是padding左右内边距往往比别的

￡神魔★判官ぃ/ 2022年10月09日 00:36/ 0 赞/ 273 阅读

相关 CSS实现兼容性的渐变背景(gradient)效果

一、有点俗态的开场白要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对C

妖狐艹你老母/ 2022年09月30日 00:44/ 0 赞/ 252 阅读

相关 css实现图片垂直居中(兼容IE6/IE7)

图片垂直居中兼容ie系列 <!doctype html> <html> <head> <meta charset="utf-8">

深碍√TFBOYSˉ_/ 2022年09月23日 08:07/ 0 赞/ 203 阅读

相关 CSS HACK区别IE6、IE7、IE8、Firefox兼容性(1)

本文向大家描述一下如何使用[CSS][] HACK区别IE6、IE7、IE8、Firefox兼容性问题，针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也

Bertha 。/ 2022年08月13日 17:32/ 0 赞/ 319 阅读

相关 IE6、IE7、IE8的CSS、JS兼容

Internet Explorer 6中查看使用 Microsoft JScript 的网页，可能会遇到web浏览器速度较慢的性能问题。原因是如果js脚本同时创建大量变量，js

ゝ一世哀愁。/ 2022年08月09日 15:55/ 0 赞/ 355 阅读

相关 IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

[IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例][IE6_IE7_IE8_Firefox_CSS HACK] [![336-280.jpg][]

柔光的暖阳◎/ 2022年08月07日 03:49/ 0 赞/ 237 阅读

相关 css实现横向带箭头步骤流程效果兼容性ie6

<style type="text/css"> ul{margin:0px; padding:0px; list-style:none;} .wrap

绝地灬酷狼/ 2022年06月14日 12:16/ 0 赞/ 156 阅读

相关【兼容IE】简单的 IE9 以上兼容ES6语法、箭头函数，代码

![在这里插入图片描述][2019031518121062.png] ![在这里插入图片描述][2019031518121062.png] <!DOCTY

男娘i/ 2022年03月12日 04:29/ 0 赞/ 729 阅读

相关 CSS-expression实现图片缩放效果，兼容IE、FF

CSS代码 <style type="text/css"> .Image { max-width:100px;height:auto;

àì夳堔傛蜴生んèń/ 2021年11月29日 11:36/ 0 赞/ 345 阅读

相关 IE兼容性问题

一 css hack：目的是是你的css代码兼容不同的浏览器（书写顺序：一般将使用范围广，被识别能力强的css的前面）

本是古典何须时尚/ 2021年09月14日 07:50/ 0 赞/ 630 阅读