jquery模仿手机端微信支付过程效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery模仿手机端微信支付过程效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <title>jQuery微信支付代码</title> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" /> <style> /* CSS RESET */ * { padding: 0; margin: 0; } body { font: 12px "微软雅黑", Arial; background: #efeff4; min-width: 320px; max-width: 640px; color: #000; } a { text-decoration: none; color: #666666; } a, img { border: none; } img { vertical-align: middle; } ul, li { list-style: none; } em, i { font-style: normal; } .clear { clear: both } .clear_wl:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; } .fl { float: left } .fr { float: right } .all_w { width: 91.3%; margin: 0 auto; } /*基础字体属性*/ .f10 { font-size: 10px } .f11 { font-size: 11px } .f12 { font-size: 12px } .f14 { font-size: 14px } .f13 { font-size: 13px } .f16 { font-size: 16px } .f18 { font-size: 18px } .f20 { font-size: 20px } .f22 { font-size: 22px } .f24 { font-size: 24px } .f26 { font-size: 26px } .f28 { font-size: 28px } .f32 { font-size: 32px } .fb { font-weight: bold } /********/ .header { background: #393a3e; color: #f5f7f6; height: auto; overflow: hidden; } .gofh { float: left; height: 45px; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; } .gofh a { padding-right: 10px; border-right: 1px solid #2e2f33; } .gofh a img { width: 40%; } .wenx_xx { text-align: center; font-size: 16px; padding: 18px 0; } .wenx_xx .zhifu_price { font-size: 45px; } .ljzf_but { border-radius: 3px; height: 45px; line-height: 45px; background: #44bf16; display: block; text-align: center; font-size: 16px; margin-top: 14px; color: #fff; } /*浮动层*/ .ftc_wzsf { display: none; width: 100%; height: 100%; position: fixed; z-index: 999; top: 0; left: 0; min-width: 320px; max-width: 640px; } .ftc_wzsf .hbbj { width: 100%; height: 100%; position: absolute; z-index: 8; background: #000; opacity: 0.4; top: 0; left: 0; } .ftc_wzsf .srzfmm_box { position: absolute; z-index: 10; background: #f8f8f8; width: 88%; left: 50%; margin-left: -44%; top: 20%; } .qsrzfmm_bt { font-size: 16px; border-bottom: 1px solid #c9daca; overflow: hidden; } .qsrzfmm_bt a { display: block; width: 10%; padding: 10px 0; text-align: center; } .qsrzfmm_bt img.tx { width: 10%; padding: 10px 0; } .qsrzfmm_bt span { padding: 15px 5px; } .zfmmxx_shop { text-align: center; font-size: 12px; padding: 10px 0; overflow: hidden; } .zfmmxx_shop .mz { font-size: 14px; float: left; width: 100%; } .zfmmxx_shop .zhifu_price { font-size: 24px; float: left; width: 100%; } .ml5 { margin-left: 5px; } .mm_box { width: 89%; margin: 10px auto; height: 40px; overflow: hidden; border: 1px solid #bebebe; } .mm_box li { border-right: 1px solid #efefef; height: 40px; float: left; width: 16.3%; background: #FFF; } .mm_box li.mmdd { background: #FFF url(//repo.bfw.wiki/bfwrepo/image/60d1d5bed7c1f.png) center no-repeat; background-size: 25%; } .mm_box li:last-child { border-right: none; } .xiaq_tb { padding: 5px 0; text-align: center; border-top: 1px solid #dadada; } .numb_box { position: absolute; z-index: 10; background: #f5f5f5; width: 100%; bottom: 0px; } .nub_ggg { border: 1px solid #dadada; overflow: hidden; border-bottom: none; } .nub_ggg li { width: 33.3333%; border-bottom: 1px solid #dadada; float: left; text-align: center; font-size: 22px; } .nub_ggg li a { display: block; color: #000; height: 50px; line-height: 50px; overflow: hidden; } .nub_ggg li a:active { background: #e0e0e0; } .nub_ggg li a.zj_x { border-left: 1px solid #dadada; border-right: 1px solid #dadada; } .nub_ggg li span { display: block; color: #e0e0e0; background: #e0e0e0; height: 50px; line-height: 50px; overflow: hidden; } .nub_ggg li span.del img { width: 30%; } .fh_but { position: absolute.........完整代码请登录后点击上方下载按钮下载查看
网友评论0