css布局手机端充值页面h5效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局手机端充值页面h5效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            list-style: none;
            text-decoration: none;
            color: inherit;
            font-weight: normal;
            font-family: "微软雅黑";
            box-sizing: border-box;
            font-style: normal;
        }
        body {
            width: 100%;
            overflow-x: hidden;
        }
        img {
            vertical-align: middle;
            max-width: 100%;
        }
        a:hover,a:active,a:visited,a:link,a:focus {
            -webkit-tap-highlight-color: transparent;
            outline: none;
            text-decoration: none;
        }
        .nav-bar {
            position: relative;
            height: .88rem;
            line-height: .88rem;
            width: 100%;
            text-align: center;
            font-size: .36rem;
            color: #333333;
        }
        .nav-bar .back {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERkQ3RTUwRUI2MkQxMUVCQTdGREQ1RTMzNURCNTEyQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERkQ3RTUwRkI2MkQxMUVCQTdGREQ1RTMzNURCNTEyQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRGRDdFNTBDQjYyRDExRUJBN0ZERDVFMzM1REI1MTJCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRGRDdFNTBEQjYyRDExRUJBN0ZERDVFMzM1REI1MTJCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+USWaLAAAAc9JREFUeNqkls0rRFEYxufeznY2NlKSElakZopiMUzyMZSVf0GUrwWhrIQsjI/iD7C1otFYDFJ27giLWaAIJatpKB9J13PqmTqu+bjneuvp6blz76/3PWfmzDVs2/Z5rWAwuALrhqLiH5Bl2BjjgPAIicLGGb+gKeEBsqhAZDVZlnUmNCEbsCGlk2YJkUFoQDZhg4yfhCSzn5suIbMKRFaLCnHVkWMcmxDLeZ8oAllVILIawTjNda8oAFmCjaqXnOOoZeaBrMEmGdNQayFIzo4AmYONOBY2VWwthQMyD5txjJNys7NCgazDhhk/oPZi4/wBAbKgQL65O5c633oTkAn4NPM1VK0Lye5ahZLfALn1ciIYgUDAD9+C+njtBqoH8F0LlD0hMWICFub1C6gHsEdtEGG7sF7GB6gOsIw2iLA9nsOynqBawF7dLPavwkMRWIKxDDoHvFS7I6WzGCzCeM8NyGiDCDuAtTHeQQ35YAVPSDwkd/GYsRJKAl6iDSIsBNtmrIJSgPm1QYT1w2KMpeys3PUa5VizQ3nIMV7xPy2tDSJsH9bB+AzVAPZieHmJAOwIFlJ2M2x4fRsBLA7rZDwxfR4L43TBdiD584n/CDAAnd+/fBvlcLYAAAAASUVORK5CYII=) center left no-repeat;
            position: absolute;
            top: 0;
            left: .33rem;
            height: 100%;
            display: inline-block;
            background-size: .18rem .32rem;
            width: .5rem;
            height: 100%;
        }
        /*主体*/
        .container {
            padding: .5rem .3rem;
        }
        .container h2 {
            font-size: .32rem;
            color: #000;
        }
        .quick-pay {
            width: 100%;
            height: auto;
            overflow: hidden;
            padding: .62rem 0;
        }
        .quick-pay ul {
            display: flex;
        }
        .quick-pay ul li {
            width: 1.4rem;
            height: .8rem;
            line-height: .8rem;
            background: #e0e6e9;
            color: #333333;
            font-size: .28rem;
            text-align: center;
            margin: 0 .14rem;
            border-radius: .05rem;
        }
        .quick-pay ul li.active {
            background: #008aff;
            color: #FFFFFF;
        }
        .other-pay {
            padding-top: .3rem;
            padding-bottom: .62rem;
        }
        .other-pay input {
            display: inline-block;
            width: 2.55rem;
            height: .8rem;
            line-height: .8rem;
            padding-left: .3rem;
            font-size: .52rem;
            color: #333333;
            border-bottom: .03rem solid #f2f2f2;
            outline: none;
        }
        .pay-type {
            padding-top: .62rem;
        }
        .pay-type ul {
            display: flex;
            flex-direction: column;
            padding: 0 .1rem;
        }
        .pay-type ul li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.05rem;
            width: 100%;
            border: 2px solid #e0e0e0;
            border-radius: 1.05rem;
            font-size: .28rem;
            color: #333333;
            padding-left: .40rem;
            padding-right: .45rem;
            margin-bottom: .35rem;
        }
        .pay-type ul li span sup {
            display: inline-block;
            background: #ff6767;
            font-size: .2rem;
            padding: .02rem .05rem;
            border-radius: .08rem .08rem .08rem 0;
            color: #FFFFFF;
            margin-left: .08rem;
        }
        .pay-type ul li .type {
            display: flex;
            align-items: center;
            height: 100%;
        }
        .pay-type ul li .type i {
            display: inline-block;
            width: .85rem;
            height: 100%;
            background: url(//repo.bfw.wiki/bfwrepo/image/60873fa4600df.png) center center no-repeat;
            background-size: .45rem .40rem;
        }
        .pay-type ul li i.check {
            display: inline-block;
            width: .85rem;
            height: 100%;
            background: url(//repo.bfw.wiki/bfwrepo/image/60ac307989b40.png) right center no-repeat;
            background-size: .31rem .31rem;
            -webkit-filter: grayscale(0);
            /* Webkit */
            filter: gray;
            /* IE6-9 */
            filter: grayscale(1);
            /* W3C */
        }
        .pay-type ul li .type i.wx {
            background: url(//repo.bfw.wiki/bfwrepo/image/60873fa4600df.png) left center no-repeat;
            background-size: .45rem .40rem;
            -webkit-filter: grayscale(0);
            /* Webkit */
            filter: gray;
            /* IE6-9 */
            filter: grayscale(1);
            /* W3C */
        }
        .pay-type ul li .type i.ali {
            background: url(//repo.bfw.wiki/bfwrepo/image/6070e9e47d8ec.png) left center no-repeat;
            background-size: .47rem .38rem;
            -webkit-filter: grayscale(0);
            /* Webkit */
            filter: gray;
            /* IE6-9 */
            filter: grayscale(1);
            /* W3C */
        }
        .pay-type ul li .type i.bank {
            background: url(//repo.bfw.wiki/bfwrepo/image/60873fb8165c1.png) left center no-repeat;
       .........完整代码请登录后点击上方下载按钮下载查看