bootstrap+jquery实现移动端手机端选择金额充值表单效果代码
代码语言:html
所属分类:表单美化
代码描述:bootstrap+jquery实现移动端手机端选择金额充值表单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
*{
margin:0;padding:0
}
ol,ul{
list-style: none;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-13, .col-xs-14{
float:none;
}
.mask{
background:#f0eff5;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
}
.h1{padding-top:50px}
.container{
width:90%;
margin:0 auto;
background:#fff;
margin-top:5%;
}
.container_logo{
background:#fbfbfb
}
.play{
margin:0 auto;
padding:10px 0px;
}
.play img{
width:80%;
display:block;
margin:0 auto;
}
.number_amount{
position:relative;
height:42px;
}
.number_amount label{
position:absolute;
top:50%;
margin-top:-18px;
font-size:24px;
left:0;
}
.play input[type="number"]{
width:100%;
height:100%;
font-size:24px;
border:none;
border-bottom:1px solid #eee;
outline: none;
padding:0 30px;
}
.quick_amount{
margin:0 auto;
padding:0;
}
.quick_amount p{
display:inline-block;
text-align:center;
font-size:16px;
line-height:40px;
border:dashed 1px #eee;
color:#888;
margin:10px 3.3%;
}
.quick_amount p.active{
border:#337ab7 1px solid;
color:#337ab7;
border-radius:2px;
}
._submit{
margin:30px auto;
}
.submit-amount{
width:100%;
}
/* .getId{
display:none;
} */
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="container_logo">
<div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
<img src="//repo.bf.........完整代码请登录后点击上方下载按钮下载查看
网友评论0