Html
    Css
    Js

    
                        
html,body,.warp {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background:#eee;
}
html {
	font-size:62.5%;
}
.warp {
	display:-webkit-box;
	-webkit-box-orient:vertical;
}
header {
	width:100%;
	height:4rem;
	background:deepskyblue;
	text-align:center;
	line-height:4rem;
	font-size:18px;
	color:white;
}
section {
	-webkit-box-flex:1;
	display:-webkit-box;
	-webkit-box-orient:vertical;
}
section .inputTxt {
	width:100%;
	height:6rem;
	overflow:hidden;
	position:relative;
}
section .inputTxt input {
	width:100%;
	height:100%;
	outline:none;
	border:none;
	padding-left:20px;
	font-size:18px;
}
section .inputTxt .icon {
	width:20px;
	height:20px;
	position:absolute;
	top:25px;
	right:30px;
	display:none;
}
section .inputTxt .icon img {
	width:100%;
	height:100%;
}
section .promise {
	color:red;
	font-size:14px;
	height:14px;
	width:100%;
	padding-left:15px;
}
section .stwichBox {
	-webkit-box-flex:1;
	background:#fff;
	margin-top:1.5rem;
}
section .stwichTab {
	width:100%;
	height:5rem;
	font-size:20px;
	display:-webkit-box;
	-webkit-box-orient:horizontal;
}
section .stwichTab p {
	margin:0;
	padding:0;
	line-height:5rem;
	text-align:center;
	-webkit-box-flex:1;
	border-bottom:4px solid #eee;
}
section .stwichTab .hover {
	color:deepskyblue;
	border-bottom:4px solid deepskyblue;
}
section .Phonelist {
	width:100%;
	height:auto;
	display:-webkit-box;
	-webkit-box-orient:horizontal;
	overflow:hidden;
}
section .Phonelist .list {
	width:100%;
	height:auto;
}
section .Phonelist .list .phoneCostMod {
	display:-webkit-box;
	-webkit-box-orient:vertical;
	width:30%;
	height:4rem;
	color:#ccc;
	border:1px solid #ccc;
	border-radius:5px;
	margin:2% 0;
	margin-left:2%;
	float:left;
	outline:none;
	background:#fff;
	overflow:hidden;
}
section .Phonelist .list .phoneCostMod p {
	font-size:16px;
	margin:0;
	padding-top:5px;
	text-align:center;
}
section .Phonelist .list .phoneCostMod span {
	display:block;
	font-size:14px;
	text-align:center;
}
section .Phonelist .list .disAbled {
	background:#fff;
	color:deepskyblue;
	border:1px solid skyblue;
}
section .Phonelist .list .selected {
	background:deepskyblue;
	color:white;
}
section .payBtn {
	clear:both;
	width:100%;
	height:6rem;
	background:#fff;
	margin-top:20px;
}
section .payBtn button {
	width:80%;
	height:4rem;
	margin:20px 10%;
	background:#ccc;
	border:none;
	font-size:16px;
	color:white;
	border-radius:10px;
	outline:none;
}
section .payBtn .payDis {
	background:#00BFFF;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

仿移动缴费页面

下载代码用本地浏览器查看效果会更好一点

2
      稻草●人0
      2017/6/22 10:50:17
      可以真的付费吗
          90后大叔0
          2017/6/22 11:03:16

          这个只是一个demo ,可以根据自己的需求去加支付宝或者其他的支付方式的接口

      回复