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;positio.........完整代码请登录后点击上方下载按钮下载查看