css实现横向带箭头步骤流程效果兼容性ie6
来源:互联网 发布:网络继续教育 编辑:程序博客网 时间:2024/05/30 05:42
<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>
效果如下:
转载地址:http://www.qdfuns.com/notes/41635/61b40eb18275790cc86762703c496f5a.html
阅读全文
0 0
- css实现横向带箭头步骤流程效果兼容性ie6
- CSS实现箭头效果
- 纯CSS实现带箭头的提示框效果
- 带箭头的进度流程 css
- CSS实现带箭头的DIV
- css实现对话框-带箭头提示框
- CSS实现带箭头的DIV
- CSS实现半透明效果实现及兼容性
- CSS实现半透明效果实现及兼容性
- CSS IE6,IE7,FF兼容性
- IE6 CSS兼容性的坑
- 利用css实现网页带箭头的提示框
- CSS实现无图片带箭头的DIV方框
- CSS实现半透明效果实现及兼容性笔记
- css绘制带箭头对话框
- CSS制作三角箭头(兼容IE6)
- CSS实现兼容性的渐变背景(gradient)效果
- CSS实现跨浏览器兼容性的盒阴影效果
- 【安卓学习之第三方库】wifi模块 之 SmartLink
- 微信小程序:支付系列专辑(开发指南+精品Demo)
- LWIP的DHCP验证
- SQL Server阻塞原因与解决方法
- CountDownLatch和CyclicBarrier的区别
- css实现横向带箭头步骤流程效果兼容性ie6
- Android N(7.0) 被美翻的新特性!
- codepush热更新
- 数据分片以及全局id的生成
- c# datetime
- win 7安装node.js及web应用框架express
- http响应状态码大全
- Ajax 执行返回的服务器端返回的js
- 关于tomcat部署到服务器无法访问的问题