<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="https://yanshi.bj8dream.com/static/xiaoniren/css/common.css" /> <base target="_self" /> <title>思瑜科技在线充值</title> <script type="text/javascript" src="https://yanshi.bj8dream.com/static/xiaoniren/js/jQuery_v172_min.js"></script> <style type="text/css"> /* Bank Select */ .ui-list-icons li { float:left; margin:0px 10px 25px 0px; width:218px; padding-right:10px; display:inline; } .ui-list-icons li input { vertical-align:middle; } .ui-list-icons li .icon-box { cursor:pointer; width:190px; background:#FFF; line-height:36px; border:1px solid #DDD; vertical-align:middle; position:relative; display:inline-block; zoom:1; } .ui-list-icons li .icon-box.hover, .ui-list-icons li .icon-box.current { border:1px solid #FA3; } .ui-list-icons li .icon-box-sparkling { position:absolute; top:-18px; left:0px; height:14px; line-height:14px; } .ui-list-icons li .icon { float:left; width:126px; padding:0px; height:36px; display:block; line-height:30px; color:#07f; font-weight:bold; white-space:nowrap; overflow:hidden; position:relative; z-index:1; } .ui-list-icons li .bank-name { position:absolute; left:5px; z-index:0; height:36px; width:121px; overflow:hidden; } /* Bank Background */ .ui-list-icons li .ABC, .ui-list-icons li .ICBC, .ui-list-icons li .CCB, .ui-list-icons li .PSBC, .ui-list-icons li .BOC, .ui-list-icons li .CMB, .ui-list-icons li .COMM, .ui-list-icons li .SPDB, .ui-list-icons li .CEB { background:#FFF url(images/ICBC_bank.gif) no-repeat 5px center; } /* Bank Submit */ .paybok { padding:0px 0px 0px 20px; } .paybok .csbtx { border-radius:3px; color:#FFF; font-weight:bold; } </style> <script type="text/javascript"> $(function(){ //Bank Hover $('.ui-list-icons > li').hover(function(){ $(this).children('.icon-box').addClass('hover'); }, function(){ $(this).children('.icon-box').removeClass('hover'); }); //Bank Click $('.ui-list-icons > li').click(function(){ for ( var i=0; i<$('.ui-list-icons > li').length; i++ ){ $('.ui-list-icons > li').eq(i).children('.icon-box').removeClass('current'); } $(this).children('.icon-box').addClass('current'); }); }) </script> </head> <body> <div> <p> <strong>您好，fx！系统代理商</strong> <span>欢迎您登录票务管理系统</span> <em>账户余额：￥81291.00元</em> <i>已消费：￥64521元</i> </p> <form action="/huayi_test/order/charge.php" method="post" onsubmit="return chongzhi();" > <div> <input type="text" value="" /> <span>元 （输入充值金额，不支持小数，最低 500元）</span> </div> <div></div> <ul> <li> <input type="radio" value="" checked="checked"> <label for="ABC"> <span bbd="false"> </span> <span title="中国农业银行"></span> <span>中国农业银行</span> </label> </li> <li> <input type="radio" value=""> <label for="ICBC"> <span bbd="false"> </span> <span title="中国工商银行"></span> <span>中国工商银行</span> </label> </li> <li> <input type="radio" value=""> <label for="CCB"> <span bbd="false"> </span> <span title="中国建设银行"></span> <span>中国建设银行</span> </label> </li> <li> <input type="radio" value=""> <label for="CCB"> <span bbd="false"> </span> <span title="中国建设银行"></span> <span>中国建设银行</span> </label> </li> <li> <input type="radio" value=""> <label for="PSBC"> <span bbd="false"> </span> <span title="中国邮政储蓄银行"></span> <span>中国邮政储蓄银行</span> </label> </li> <li> <input type="radio" value=""> <label for="BOC"> <span bbd="false"> </span> <span title="中国银行"></span> <span>中国银行</span> </label> </li> <li> <input type="radio" value=""> <label for="CMB"> <span bbd="false"> </span> <span title="招商银行"></span> <span>招商银行</span> </label> </li> <li> <input type="radio" value=""> <label for="COMM"> <span bbd="false"> </span> <span title="交通银行"></span> <span>交通银行</span> </label> </li> <li> <input type="radio" value=""> <label for="SPDB"> <span bbd="false"> </span> <span title="浦发银行"></span> <span>浦发银行</span> </label> </li> <li> <input type="radio" value=""> <label for="CEB"> <span bbd="false"> </span> <span title="中国光大银行"></span> <span>中国光大银行</span> </label> </li> </ul> <div><input type="button" value="确认充值" /></div> </form> </div> </body> </html>
一个支付页面DEMO附截图
内容版权声明：除非注明，否则皆为本站原创文章。