css布局手机端充值页面h5效果代码
代码语言: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 {
dis.........完整代码请登录后点击上方下载按钮下载查看
网友评论0