付款页面DEMO
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHRxdWVlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
<!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 rel="stylesheet" type="text/css" href="http://yanshi.bj8dream.com/static/xiaoniren/css/common.css" />
<base target="_self" />
<title>思瑜科技在线充值</title>
<script type="text/javascript" src="http://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 class="paying">
<p class="paytit">
<strong>您好。fx! 系统代理商</strong>
<span>欢迎您登录票务管理系统</span>
<em>账户剩余金额:¥81291.00元</em>
<i>已消费:¥64521元</i>
</p>
<form action="/huayi_test/order/charge.php" method="post" class="validator" name="f" onsubmit="return chongzhi();" >
<div class="payamont">
<input type="text" id="money" name="money" value="" />
<span>元 (输入充值金额,不支持小数。最低 500元)</span>
</div>
<div class="clr"></div>
<ul class="ui-list-icons clrfix">
<li>
<input type="radio" name="bank" id="ABC" value="" checked="checked">
<label class="icon-box current" for="ABC">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon ABC" title="中国农业银行"></span>
<span class="bank-name">中国农业银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="ICBC" value="">
<label class="icon-box" for="ICBC">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon ICBC" title="中国工商银行"></span>
<span class="bank-name">中国工商银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="CCB" value="">
<label class="icon-box" for="CCB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon CCB" title="中国建设银行"></span>
<span class="bank-name">中国建设银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="CCB" value="">
<label class="icon-box" for="CCB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon CCB" title="中国建设银行"></span>
<span class="bank-name">中国建设银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="PSBC" value="">
<label class="icon-box" for="PSBC">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon PSBC" title="中国邮政储蓄银行"></span>
<span class="bank-name">中国邮政储蓄银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="BOC" value="">
<label class="icon-box" for="BOC">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon BOC" title="中国银行"></span>
<span class="bank-name">中国银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="CMB" value="">
<label class="icon-box" for="CMB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon CMB" title="招商银行"></span>
<span class="bank-name">招商银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="COMM" value="">
<label class="icon-box" for="COMM">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon COMM" title="交通银行"></span>
<span class="bank-name">交通银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="SPDB" value="">
<label class="icon-box" for="SPDB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon SPDB" title="浦发银行"></span>
<span class="bank-name">浦发银行</span>
</label>
</li>
<li>
<input type="radio" name="bank" id="CEB" value="">
<label class="icon-box" for="CEB">
<span class="icon-box-sparkling" bbd="false"> </span>
<span class="false icon CEB" title="中国光大银行"></span>
<span class="bank-name">中国光大银行</span>
</label>
</li>
</ul>
<div class="paybok"><input class="csbtx" type="button" value="确认充值" onclick="this.form.submit();" /></div>
</form>
</div> </body>
</html>
版权声明:本文博主原创文章,博客,未经同意不得转载。
付款页面DEMO的更多相关文章
- 大项目之网上书城(六)——个人页面和书页面Demo
目录 大项目之网上书城(六)--个人页面和书页面Demo 主要改动 1.user.jsp 代码 效果图 user.js 代码 3.shu.jsp 代码 效果图 4.其他小改动 LoginServlet ...
- 使用Flexible适配移动端html页面 - demo记录
前段时间看了大神的博客文章[使用Flexible实现手淘H5页面的终端适配](地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layou ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- Vue页面Demo
为了学习了解Vue.js,试着写了一个demo,如下; 准备工作: 需要引入的js和css库有: 1.vue.js 主要是学习,所以引入了这个js库,实际运行时应该使用vue.min.js 2.axi ...
- 页面Demo实现
1.实现效果如下所示: 此Demo涉及到的知识点有: 1.页面布局思路; 2.TableViewCell实现单元格动态行高; 3.设置字符串中数字的颜色; 4.Cell圆角实现方法之一; 5.Cell ...
- h5 网络断网时,返回上一个页面 demo (与检测网络代码相结合,更直观看到结果)
页面一: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8& ...
- 开发vue单页面Demo
第1步:安装webpack脚手架 npm install webpack -g (全局安装) (新电脑启动npm run dev版本报错,是因为webpack-server版本更新的问题,要安装pac ...
- Zencart先生成订单后付款,类似淘宝后台修改订单价格
Zencart 使用 Paypal 付款,会出现漏单的情况,即 paypal 已经收到客户的付款,但是网站后台没有客户的订单.导致 paypal 漏单的原因大致会是当客户跳转到Paypal 网站付款完 ...
- PHP语言开发Paypal支付demo的具体实现
如果我们的应用是面向国际的.那么支付的时候通常会考虑使用paypal.以下为个人写的一个paypal支付示例,已亲测可行.paypal有个很不错的地方就是为开发者提供了sandbox(沙箱)测试功能. ...
随机推荐
- 使用Google Roads API抓取道路信息(java实现)
Google Roads API提供了强大的道路获取接口,用户仅仅需调用对应的API就能够获取对应区域的道路坐标以及道路的限速信息. 详细的调用方法例如以下: https://roads.google ...
- <EditText /> This text field does not specify an inputType or a hint
我是一个警告,xml代码是: <EditText android:id="@+id/str_ipaddress" android:layout_width="wra ...
- 队列优化和斜率优化的dp
可以用队列优化或斜率优化的dp这一类的问题为 1D/1D一类问题 即状态数是O(n),决策数也是O(n) 单调队列优化 我们来看这样一个问题:一个含有n项的数列(n<=2000000),求出每一 ...
- C经典之14-双向链表存储1-10---ShinePans
#include <stdio.h> #include <conio.h> #include <stdlib.h> //system(); 这个指令须要用到此头文件 ...
- Android 纯代码加入点击效果
项目中非常多的Button, 同一时候配置非常多button切图,Selector是不是非常烦, 使用以下这个类,就能够直接为Button添加点击效果. 不用多个图片,不用Selector. 使用方法 ...
- 【Android接口实现】ActionBar利用整理的一些细节
转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 关于ActionBar的使用,非常多大神早就已经写了非常好的文章进行了介绍,所以ActionBar的基本使用 ...
- Mysql 当安装完成后不执行 mysql 和 performance_schema 数据库
Mysql问题 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) Mysql ...
- javascript和css浏览器兼容性总结
一些浏览器的兼容性做一个总结的问题以下: 为什么会出现这样的现象是?主要表现为Firefox这样的良好支持的浏览器W3C标准,这是现在CSS支持最好的浏览器,和ie它比较早出现,在w3c支持一直没有做 ...
- sensor调试过程HAL层数据不能被转移到app
最近调试e-compass传感器,我遇到了一个奇怪的问题,驱动器正常报告数据.但该数据到HAL后该层已经无法上传app. 经debug,我发现这是一个供应商派的代码存在bug,open的fd没有设置N ...
- c# 获取某个对象的[公有属性]的名称,类型,值
/// <summary> /// 获取某个对象的[公有属性]的名称,类型,值 /// </summary> /// <typeparam name="T&qu ...