1
验证方式
验证方式
2
验证账号
验证账号
3
重置密码
重置密码
4
完成
完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css流程图</title>
<style>
.flow { 100%;margin: 30px auto;height: 50px;padding: 20px 0 0 0;position: relative;}
.flowList {float: left;height: 1px;border:2px solid #f2faff;background: #f2faff;}
.flowListBox { 536px;margin: 0 auto;}
.flowListBox .flowList {float: left;text-align: right;position: relative; 128px;}
.flowListBox .flowList em {margin-top: -20px;display: inline-block; 32px;height: 32px;-moz-border-radius: 100%;-webkit-border-radius: 100%;border-radius: 100%;text-align: center; line-height: 32px;font-style: normal;vertical-align: middle;color: #666;border:3px solid #f2faff;background: white;
}
.flowListBox .flowList strong {display: inline-block;height: 40px;line-height: 40px;font-weight: 400;position:absolute;left:28%}
.flowListBox .flowList strong.last {left:40%}
.flowListBox .for-cur strong {color: #8dafe4;}
.flowListBox .for-cur{border: 2px solid #8dafe4; background-color: #8dafe4;}
.flowListBox em{position: absolute; left: 35%;}
.flowListBox .for-cur em{ 32px;height: 32px;font-size: 12px;line-height: 32px;border:3px solid #8dafe4;color: #8dafe4;}
</style>
</head>
<body>
<div class="flow">
<div class="flowListBox">
<div class="flowList for-cur">
<em>1</em><br>
<strong>验证方式</strong>
</div>
<div class="flowList for-cur">
<em>2</em><br>
<strong>验证账号</strong>
</div>
<div class="flowList">
<em>3</em><br>
<strong>重置密码</strong>
</div>
<div class="flowList">
<em>4</em><br>
<strong class="last">完成</strong>
</div>
</div>
</div>
</body>
</html>