css实现横向带箭头步骤流程效果
2024-10-03 17:05:24
通过纯css实现圆角的步骤流程效果,扩展性强,可以随意增加减少数量,兼容性ie6+。
具体代码:
<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>
最新文章
- geotrellis使用(十)缓冲区分析以及多种类型要素栅格化
- linux下获取线程号
- SQL Server 2000 sp2 及更低版本不受此版本的 Windows 支持
- java 单例设计模式
- C# 类的介绍,参数传递,各种符号说法
- Web Api 如何做上传文件的单元测试
- web前端之 CSS
- Eloquent ORM 之关联查询
- JVM参数
- hdu 4465 概率称号
- vue跨组件通信的几种方法
- jarring type lambda
- CentOS 系统中安装postfix+dovecot+openwebmail <;转>;
- DMLC深度机器学习框架MXNet的编译安装
- 【vue】路由配置
- git小技巧--如何从其他分支merge个别文件或文件夹
- C# listview控件右击导出数据到txt文本
- js绘制圆形时钟
- Redis 请求应答模式和往返延时 Pipelining
- Mac 安装Jupyter notebook
热门文章
- python selenium 百度登录
- Node.js 搭建 https 协议 服务器
- IIS + FastCGI+php(从5.2升级到5.3)
- 使用第三方jar时出现的问题
- linux find命令中-print0和xargs中-0的用法
- 爬坑二 activiti流数据库版本错误引发的问题
- nginx + keepalived 主从模式
- 2、每日复习点--ConcurrentHashMap vs HashMap vs HashTable
- 关于Oracle配置一些需要注意地方(IIS相关)
- python学习之——习题二