<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
});
</script>
<style type="text/css">
.hr{
width: 225px;
}
.hr hr{
color: #dddddd;
border: 4px solid;
}
.circle{
width: 30px;;
}
.circle div{
width:30px;
height:30px;
border-radius:25px;
border: 6px #dddddd solid;
}
.circle span{
height:30px;
line-height:30px;
display:block;
color:#000000;
text-align:center;
font-size:20px;
}
</style>
</head>
<body>
<div style="background:#FFF;" >
<h2 style="color:#9cacaf;margin:10px;"> 提现</h2><hr style="color: #ddeef2">
<br/>
<table cellspacing="0px" width="100%">
<tr>
<td class="hr"> </td>
<td class="circle">
<div style="background-color:#8cc63f;">
<span style="color: white">1</span>
</div>
</td>
<td class="hr"><hr></td>
<td class="circle">
<div>
<span>2</span>
</div>
</td>
<td class="hr"><hr></td>
<td class="circle">
<div>
<span>3</span>
</div>
<td>
<td class="hr"></td>
</tr>
<tr>
<td class="hr"></td>
<td colspan="2">
<span>填写提现金额</span>
</td>
<td colspan="2">
<span>确认提现信息</span>
</td>
<td colspan="2">
<span>提现结果</span>
</td>
</tr>
</table>
<br>
<form method="post" name="theForm" action="{$action}" onsubmit="return validate()">
<table cellspacing="3px" cellpadding="3px" width="100%" style=" border-top: 10px solid #FFF;border-bottom: 10px solid #FFF;">
<tr>
<td style="text-align:right;width: 210px;">
<span style="font-size: 16px;color:#929191">提现金额：</span>
</td>
<td>
<input type="text" name="amount" style="width: 200px;height: 30px;" >
<span style="font-size: 16px;color:#929191">元</span>
<span style=‘color:red‘>*</span>
</td>
</tr>
<tr>
<td style="text-align:center;width: 130px;">
<td>
<span style="font-size: 12px;color:#929191">
提款到账时间：每天10:30前提款，估计到账时间11:30；每天16:00前提款，估计到账时间17:00。<br>(周末及法定节假日顺延，以具体到账时间为准)。
<br>
</span>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="hidden" value="{$step}" name="step"/>
<input type="submit" class="cupid-blue" value="下一步"/>
<input type="button" class="cupid-blue" value="上一步" onclick="history.go(-1);"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
这是简化版的提现，主要是引导用户操作，这个图参考京东金融的提现。用最简单的html+css来实现的代码。没有用其他任何框架。
本文出自 “9516852” 博客，请务必保留此出处http://9526852.blog.51cto.com/9516852/1673264
原文地址：http://9526852.blog.51cto.com/9516852/1673264
