当前位置:  编程技术>WEB前端

一个支付页面DEMO附截图

    来源: 互联网  发布时间:2014-08-25

    本文导语:  代码如下: 思瑜科技在线充值 /* 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:point...


代码如下:

 
 
 
 
 
 
思瑜科技在线充值 
 
 
/* 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(/blog_article/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; } 
 
 
$(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

    
 
 

您可能感兴趣的文章:

 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 微信支付开发教程(一)微信支付URL配置
  • P2P支付网络 Ripple
  • jQuery 支付按钮 ClassyPaypal
  • PHP支付处理库 Omnipay
  • Android的比特币支付应用 BitPay
  • ??有请:jackyz(J.),关于支付网关,谢谢谢谢 ??
  • [现金支付100元]如何使RedhatLinux9.2的图型用户界面正确显示?
  • PHP开发微信支付实例代码
  • 支付宝前端基础类库 Arale
  • PHP开发微信支付的代码分享
  • jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
  • 请问如果想做网上商场,包括定购、购物车、网上支付,都需要些什么技术?jsp+??
  • ??JNDI 和支付网关(在线等待,参与也有分啊)??
  • 如何用struts调用支付宝接口
  • 浅析PHP微信支付通知的处理方式
  • PHP微信支付通知处理方式实现方法
  • PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3