<!DOCTYPE html>
<!-- saved from url=(0035)http://localhost:14932/web/test.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>阿里云-流程步骤样式</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="./阿里云-流程步骤样式_files/jquery-1.11.2.min.js" type="text/javascript"></script>
<style type="text/css">
.y-process{height:26px}
.y-process .y-unit{float:left;display:inline;height:26px;background:#ccc;overflow:hidden;text-align:center;color:#fff;font-size:14px;line-height:1.85}
.y-process .y-current{background:#00a2ca}
.y-process .y-complete{background:#9cddf5}
.y-process .y-arrow{position:relative;float:left;display:inline;width:2%;height:26px;overflow:hidden;background:#ccc}
.y-process .y-complete-current{background:#00a2ca}
.y-process .y-complete-complete{background:#9cddf5}
.y-process .y-arrow .y-next{position:absolute;display:block;left:0;top:-3px;height:0;width:0;overflow:hidden;border:solid 10px transparent;border-width:16px 10px;border-left-color:#fff;_border-color:#000;_filter:chroma(color=#000);_border-left-color:#fff}
.y-process .y-arrow .y-prev{position:absolute;display:block;left:0;top:0;height:0;width:0;overflow:hidden;border:solid 10px transparent;border-width:13px 8px;border-left-color:#ccc;_border-color:#000;_filter:chroma(color=#000);_border-left-color:#ccc}
.y-process .y-complete-current .y-prev{border-left-color:#9cddf5}
.y-process .y-current-unit .y-prev{border-left-color:#00a2ca}
.y-process .y-complete-complete .y-prev{border-left-color:#9cddf5}
.y-process.y-process-2 .y-unit{width:49%;*width:48.9%}
.y-process.y-process-3 .y-unit{width:32%;*width:31.9%}
.y-process.y-process-4 .y-unit{width:23.5%;*width:23.4%}
.y-process.y-process-5 .y-unit{width:18.4%;*width:18.3%}
</style>
</head>
<body>
<h2>阿里云 - 流程步骤样式</h2>
<h4>
3步流程</h4>
<div class="y-process y-process-3">
<span class="y-unit">第1步，订单信息确认</span>
<span class="y-arrow">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit">第2步，客户信息确认</span>
<span class="y-arrow">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit">第3步，合同申请成功</span>
</div>
<br>
<div class="y-process y-process-3">
<span class="y-unit y-current">第1步，订单信息确认</span>
<span class="y-arrow y-current-unit">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit">第2步，客户信息确认</span>
<span class="y-arrow">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit">第3步，合同申请成功</span>
</div>
<br>
<div class="y-process y-process-3">
<span class="y-unit y-complete">第1步，订单信息确认</span>
<span class="y-arrow y-complete-current">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit y-current">第2步，客户信息确认</span>
<span class="y-arrow y-current-unit">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit">第3步，合同申请成功</span>
</div>
<br>
<div class="y-process y-process-3">
<span class="y-unit y-complete">第1步，订单信息确认</span>
<span class="y-arrow y-complete-complete">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit y-complete">第2步，客户信息确认</span>
<span class="y-arrow y-complete-current">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit y-current">第3步，合同申请成功</span>
</div>
<br>
<div class="y-process y-process-3">
<span class="y-unit y-complete">第1步，订单信息确认</span>
<span class="y-arrow y-complete-complete">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit y-complete">第2步，客户信息确认</span>
<span class="y-arrow y-complete-complete">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit y-complete">第3步，合同申请成功</span>
</div>
<br>
<h4>
5步流程</h4>
<div class="y-process y-process-5">
<span class="y-unit y-complete">第1步，订单信息确认</span>
<span class="y-arrow y-complete-complete">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit y-complete">第2步，订单信息确认</span>
<span class="y-arrow y-complete-current">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit y-current">第3步，客户信息确认</span>
<span class="y-arrow y-current-unit">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit">第4步，客户信息确认</span>
<span class="y-arrow">
<span class="y-next"></span>
<span class="y-prev"></span>
</span>
<span class="y-unit">第5步，合同申请成功</span>
</div>
<br>
</body></html>
- 1
- 2
前往页