jquery手机端房贷税费计算器效果代码-html代码-BFW代码库

代码语言：html
代码描述：jquery手机端房贷税费计算器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-type" content="text/html">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
		<title>税费计算器</title>
		<style>
		    /* @charset "utf-8"; */
/* CSS Document */

/*-----------基本样式------------*/
body{margin:0;padding:0;font:12px "宋体";line-height:22px}
form, ul, li, p, h1, h2, h3, h4, h5, h6,dl,dt,dd {margin:0;padding:0}
input{font-size:12px;line-height:18px;color:#999}
.tablist1 select {width:90%;height:28px;font-size:12px;line-height:18px;color:#999}
.tablist1 .select_width {width:60%;}
img,input {border:0 none}
ul, li {list-style-type:none}
p{text-indent:2em}
a{color:#333;text-decoration:none;blr:expression(this.onFocus=this.blur());outline:none}
a:hover{color:#ea5504}
select{appearance:none;-moz-appearance:none;-webkit-appearance:none;border:none;outline: none;}

/*-----------公用样式------------*/
.show{display:block}
.hidden{display:none}
.f3{color:#333}
.f6,.f6 a{color:#666}
.f9,.f9 a{color:#999}
.f9 a:hover{color:#ea5504}
.f63{font:bold 14px "宋体";color:#f63}
.fb{font-weight:bold}
.fea5504,.fea5504 a{color:#ea5504}
.f008000{color:#008000}
.f14,.f14 a{font-size:14px}
.white,.white a{color:#fff}
.f20{font:20px "黑体";color:#ea5504}
.f24{font:bold 24px "黑体";color:#ea5504}
.hr_1{clear:both;height:10px;overflow:hidden}
.hr_2{clear:both;height:13px}
.hr_3{width:971px;clear:both;height:11px;border-top:1px solid #f5891e}
.hr_4{clear:both;height:6px}
.hr_5{clear:both;height:15px}
.fn a{text-decoration:none}
.fl{width:100%;}
.fltab{width:100%;}
.fr{width:100%;}
.clear{clear:both;overflow:hidden}
.ftc{text-align:center}
.ftr{text-align:right}
/*.br{border:1px solid #f3a275}*/
.br2{border:1px solid #f6b693;height:1px;font-size:0;clear:both;overflow:hidden}
h1,h2,h5{font:20px "黑体";color:#ea5504;padding-left:5px}
h3{font:bold 14px "宋体";color:#ea5504;padding-left:8px;margin:7px 0 0 8px;float:left;display:inline}
h1 a,h2 a,h5 a{color:#ea5504}
.left{float:left;}
.right{float: right;}
.header{width:994px;height:78px;border-bottom:1px solid #ea5504;margin:0 auto;}
	.logo{margin:31px 0 0 6px;display:inline}
	.top_nav{margin-top:53px}
.headline{width: 100%;height: 0.8rem;background: #f08300;color: #fff;text-align: center;line-height: 0.8rem;font-size: 0.32rem;font-weight: bold;}
.headline span{display: inline-block;width:15%;height:0.8rem;}
.headline .headline_span2{display: inline-block;width:70%;}
.headline_span1{background:url("../images/icon-35.png")no-repeat center;background-size: 20%;}
.cArea{width:100%;margin:0 auto;overflow:hidden}
	#tab1{width:100%;height:0.8rem;clear:both;background:#fbe5d9}
		#tab1 li{width:33.33%;float:left;height:0.8rem;line-height:0.8rem;text-align:center;font-weight:bold; font-size:0.28rem;}
		#tab1 li a{color:#666}
		#tab1 li a:hover{color:#ea5504}
		#tab1 li.now{float:left;height:0.8rem;line-height:0.8rem;text-align:center;font-weight:bold; font-size:0.28rem;background: #fff;}
		#tab1 li.now a{color:#ea5504}
		#tab1 ul li b{ font:12px/22px "宋体"; font-weight:bold}
		#tablist1{width:100%;height:auto;}
			.tablist1{width:100%;height:auto;padding:0;clear:both;position:relative;overflow:hidden}
				#tab2{width:100%;text-align: center;margin-top:0.3rem;}
				#tab2 ul,#tab3 ul,#tab4 ul{width:100%;}
                #tab2 ul{height:0.86rem;border-bottom: 1px solid #c8c8c8;}
				#tab2 li{width:30%;height:0.8rem;float:left;display:block;color:#464646;cursor:pointer;font-weight:bold;font-size:0.28rem;line-height: 0.8rem;margin:0 10%;border-bottom: 3px solid #fff;}
				#tab2 a,#tab3 a,#tab a{display:inline-block;width:100%;height:0.8rem;}
                #tab2 .active,#tab3 .active,#tab4 .active{border-bottom: 3px solid #f08300;color:#f08300;}
                #tablist2{width:100%;padding:2% 0 10% 0;}
					.tablist2{}
					.input1{width:40%;border:1px solid #7f9db9}
					.input2{width:75px;border:1px solid #7f9db9}
					.input3{width:143px;border:1px solid #7f9db9}
					.input4{width:99px;border:1px solid #7f9db9}
					.but1{width:80%;height:0.8rem;color:#fff;font:bold 16px "宋体";margin-right:20%;border-radius: 6px;background: #f08300;}
					/*.br_1{border:1px solid #d2d2d2;width:100%;}*/
					/*.br_2{border-left:1px solid #f8e1cd;padding-left:6px}*/
					
				#tab3{width:48px;left:80px;position:absolute}
				#tab3 li{width:45px;height:30px;float:left;display:block;color:#666;cursor:pointer;font-weight:bold;font-size:14px}
				#tablist3{width:828px;margin-left:124px}
				#tablist3 span{padding:10px 0 0 10px;float:left}
                #tablist3 span.s1{float:right;margin-right:10px}
				
				#tab4{width:141px;left:50px;position:absolute}
				#tab4 li{width:121px;height:30px;display:block;color:#666;cursor:pointer;font-weight:bold;font-size:14px}
				#tablist4{width:695px;margin-left:170px}
				
				.detail{width:520px;height:auto;border:1px solid #f7bfa0;padding:1px; position:absolute; left:0px; top:20px;}
				.detail table tr td.fbe5d9{background:#fbe5d9}
				.detail table tr td.fff{background:#fff}
				.detail table tr td span{padding:0 10px}

/*--------------页脚内容---------------*/
.footer{margin:0 auto;border-top:1px solid #c8c8c8;width:965px;margin-top:10px;padding:10px 0 16px 0;color:#666;clear:both}
.footer ul li{text-align:center;line-height:22px}
.footer ul li a{color:#666}
.footer ul li a:hover{color:#ea5504}
.copy{font:12px Arial}

/*-----------新头部------------*/
.top_head{ width:100%; height:34px; padding-top:10px;overflow:visible}
.top_head1{ width:974px; margin: 0 auto; height:27px; overflow:visible;position:relative;}
	.top_head1 div{line-height:27px;}
	.underline a:hover{ line-height:27px; text-decoration:underline}
	.top_button{cursor: pointer; height:27px; width:12px;border:0px;}
	.top_centre{width:678px; float:left;}
	.top_right1{ float:right; width:143px; text-align:center}
		.top_right1 a:hover{ text-decoration:underline}
.top_head2{ width:974px; margin: 0 auto; height:33px;}
	.head2_left{ width:185px; height:30px; float:left;color: #FFFFFF;font: 18px "黑体"; text-indent:20px; line-height:30px; padding-top:3px;}
	.head2_left a{ color:#fff}
	.head2_left a:hover{ color:#fff;text-decoration: underline; }
	.head2_right{ width:779px; height:33px; float:left; padding-left:10px;}
	.head2_piece{ width:80px; float:left; text-align:center}
	.head2_piece a{ width:70px; height:33px;float:left; color:#666666; line-height:33px; margin-right:15px; display:block; text-align:center; font-weight: bold;}
	.head2_piece a:hover{color:#fff}
	.head2_piece1{width:180px; text-align:center; float:right; line-height:33px;}
.top_head3{ width:942px; margin: 0 auto; height:25px; border-left:1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-right:1px solid #CCCCCC;background-color:#fffaf4; padding-left:30px; line-height:25px;}
	.top_head3 a:hover{text-decoration: underline; color:#EA5504}
.top_colour{ color:#cccccc}
.collection{width:auto;position:absolute;top:120px;right:300px}
				.collection span{float:right;padding-left:20px}
				.collection span.s1{background-position:-244px -449px}
				.collection span.s2{background-position:-244px -472px}
				.collection span font{color:#ea5504;font-size:12px}
.checkbox{ height:20px; padding: 2px;  border: 1px solid #7F9DB9; width:80px; float:left; display:inline}
.search_nav1{ width:225px; padding-left:5px;}
.msmo{width:60px; height:auto; float:left;position:absolute; z-index:2;left:70px; top:1px;}
.msmo b{ color:#666666}
.msmo_1{position:absolute;width:40px; border:1px solid #CCCCCC;  height:70px;z-index:1; left:63px; top:0px; background-color:#FFFFFF; padding-top:25px; text-align:center; padding-left:7px;display:none}
.msmo_1 li{ line-height:22px; text-align:left}
.msmo_2{ margin-left:50px; float:left; display:inline}
.substation{ float:left; overflow:visible}

/* 弹性盒
   ======================================================================= */

.box {
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
.flex-10 {
    -webkit-box-flex: 10;
    -moz-box-flex: 10;
    -webkit-flex: 10;
    -ms-flex: 10;
    flex: 10;
}
.flex-9 {
    -webkit-box-flex: 9;
    -moz-box-flex: 9;
    -webkit-flex: 9;
    -ms-flex: 9;
    flex: 9;
}
.flex-8 {
    -webkit-box-flex: 8;
    -moz-box-flex: 8;
    -webkit-flex: 8;
    -ms-flex: 8;
    flex: 8;
}
.flex-7 {
    -webkit-box-flex: 7;
    -moz-box-flex: 7;
    -webkit-flex: 7;
    -ms-flex: 7;
    flex: 7;
}
.flex-6 {
    -webkit-box-flex: 6;
    -moz-box-flex: 6;
    -webkit-flex: 6;
    -ms-flex: 6;
    flex: 6;
}
.flex-5 {
    -webkit-box-flex: 5;
    -moz-box-flex: 5;
    -webkit-flex: 5;
    -ms-flex: 5;
    flex: 5;
}
.flex-4 {
    -webkit-box-flex: 4;
    -moz-box-flex: 4;
    -webkit-flex: 4;
    -ms-flex: 4;
    flex: 4;
}
.flex-3 {
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
}
.flex-2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}
.flex-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#tab1 ul{text-align: center;}
.fltab .fltd01{border-bottom:1px solid #d1d1d1;}
.fr{margin-top: 30px;display: none;}



.headline{width: 100%;height: 0.75rem;background: #2bb673;color: #fff;text-align: center;line-height: 0.75rem;font-size: 0.32rem;font-weight: bold;}
.tab_ul{width:100%;}
.tab_ul li{text-align: center;height:0.85rem;line-height: 0.85rem;font-weight: bold;font-size: 0.28rem;color:#464646;margin:0 5%;}
.li_active{border-bottom: 3px solid #f08300;}
.list_ul{width:100%;font-size: 0.28rem;color:#464646;text-align: center;font-weight: bold;}
.text_r{text-align: right;}
.text_l{text-align: left;}
.list_li{width:100%;height:0.9rem;border-top: 1px solid #d1d1d1;line-height: 0.9rem;}
.font_weigth{font-weight: bold;}
.text_indent{text-indent: 0.2rem;}
.text_indent_50{text-align: right;border: none;outline: none;color:#a3a3a3;padding-right: 5%;font-weight: bold;font-size: 0.28rem;}
.span_color{color:#a3a3a3;}
.radio_div{margin-right: 5%;}
.span_bg{display: inline-block;width:20%;height:0.9rem;background: url("//repo.bfw.wiki/bfwrepo/icon/60947efc8452a.png")no-repeat center;background-size: contain;}
.span_bg_active{background: url("//repo.bfw.wiki/bfwrepo/icon/5d834c0bc45e9.png")no-repeat center;background-size: contain;}
.fs_span1,.fs_span2{display: inline-block;width:70%;height:0.9rem;text-align: left;padding-left: 10%;}
.select-area{position: relative;overflow: hidden;text-indent: 10%;color:#464646;background: url("//repo.bfw.wiki/bfwrepo/icon/5eb4949404188.png")no-repeat 90% center;background-size: 5%;}
.select-area select{position: absolute;left: 0;top: 0;opacity: 0;width: 100%;color:#464646;}
.select-area span{color:#a3a3a3;}
.padding_right{padding-right: 0.3rem;}
.font_color{color:#a3a3a3;}
.btn{width:70%;margin: 1rem 15%;height:0.65rem;color:#fff;border: none;outline: none;font-size: 0.3rem;font-weight: bold;background: #2bb673;border-radius: 10px;}
.select-area select{width:100%;height:100%;}
.borderBottom{border-bottom:1px solid #d1d1d1;}.........完整代码请登录后点击上方下载按钮下载查看