body { width:100%; height:100%; font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;color:#373737;background-color: #fff;} html{ font-size:62.5%; }/*rem是一个相对大小的值，它是相对于根元素; 62.5%实际为10px; 87.5%为14px;*/ .viewport {width:100%; margin:0 auto;} /*焦点图*/ .slideBox{ position:relative; overflow:hidden; margin:0 auto; max-width:640px;/* 设置焦点图最大宽度 */ } .slideBox .hd{ position:absolute; height:28px; line-height:28px; bottom:0; right:0; z-index:1; } .slideBox .hd li{ display:inline-block; width:8px; height:8px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#C6C6C6; text-indent:-9999px; overflow:hidden; margin:0 6px; } .slideBox .hd li.on{ background:#FF4000; } .slideBox .bd{ position:relative; z-index:0; } .slideBox .bd li{ position:relative; text-align:center; } .slideBox .bd li img{ background:url(../img/loading.gif) center center no-repeat; vertical-align:top; width:100%;}/* 图片宽度100%，达到自适应效果 */ .slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0); } /* 去掉链接触摸高亮 */ .slideBox .bd li .tit{ display:block; width:100%; position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px; background:url(images/focusBg.png) repeat-x; color:#fff; text-align:left; } /*公用横线*/ .bdr{ border-top:1px solid #DDDDDD; width:100%; height:0.5px; border-top:1px solid #DDDDDD;} /*头部开始*/ header{ height:45px; width:100%; background-color:#fff; box-sizing:border-box; padding:3px 8px; display:-webkit-box; display:box; display:flex;} header .logo{ box-sizing:border-box; -webkit-box-flex:1; flex:1; background-size:contain;} header .logo img{ height:39px;} header .right_nav{ } header .right_nav ul { display:-webkit-box; display:box; display:flex;} header .right_nav ul li{ background-size:contain; } header .right_nav ul li a{text-align:center; -webkit-tap-highlight-color:rgba(0,0,0,0); } header .right_nav .tea_market{ background:url(../img/tea_market.png) center no-repeat; background-size:35px; width:40px; height:40px; } header .right_nav .tea_market_choose{ background:url(../img/tea_market_choose.png) center no-repeat; background-size:35px; width:40px; height:40px;} header .right_nav .tea_yuanbao{ background:url(../img/tea_yuanbao.png) center no-repeat; background-size:35px; width:40px; height:40px;} header .right_nav .tea_yuanbao_choose{ background:url(../img/tea_yuanbao_choose.png) center no-repeat; background-size:35px; width:40px; height:40px;} header .right_nav .shop_cart{ background:url(../img/shop_cart.png) center no-repeat; background-size:35px; width:40px; height:40px;} header .right_nav .shop_cart_choose{ background:url(../img/shop_cart_choose.png) center no-repeat; background-size:35px; width:40px; height:40px;} /*底部样式*/ .zw{ width:100%; height:48px;}/*底部遮挡*/ footer{ height:48px; width:100%; background-color:#fff; border-top:1px solid #C2C2C2; display:flex; -webkit-box-pack:justify; justify-content:space-between; align-content:center; z-index:11; box-sizing:border-box; position:fixed; bottom:0; left:0; }/*-webkit-box-pack:justify;在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。*/ footer a{ float:left; width:20%; text-align:center; color:#303030; font-size:1.4rem; font-family:"微软雅黑"; } footer:after{ content:"."; clear:both; display:block;} footer .tea_icon{ background:url(../img/tea_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px; } footer .tea_choose_icon{ background:url(../img/tea_choose_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px; color:#2BB085; } /*footer .cup_icon{ background:url(../img/cup_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px;} footer .cup_choose_icon{ background:url(../img/cup_choose_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px; color:#2BB085;}*/ footer .cart_icon{ background:url(../img/cart_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px;} footer .cart_choose_icon{ background:url(../img/cart_choose_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px; color:#2BB085;} /*footer .trade_icon{ background:url(../img/trade_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px;} footer .trade_choose_icon{ background:url(../img/trade_choose_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px; color:#2BB085;}*/ footer .home_icon{ background:url(../img/home_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px;} footer .home_choose_icon{ background:url(../img/home_choose_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px; color:#2BB085;} footer .shop_icon{ background:url(../img/shop_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px;} footer .shop_choose_icon{ background:url(../img/shop_choose_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px; color:#2BB085;} footer .my_icon{ background:url(../img/my_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px;} footer .my_choose_icon{ background:url(../img/my_choose_ico.jpg) top center no-repeat; background-size:25px 25px; padding-top:25px; color:#2BB085;} /*加载更多*/ .load_more{ width:100%; box-sizing:border-box; padding:3px 8px 6px 8px;} .load_more a{height:25px; display:block; background-color:#E0E0E0; border-radius:5px; text-align:center; font:1.2rem/25px "微软雅黑"; color:#8A8A8A;} /*技术支持*/ .sw{ width:100%; height:35px;} .support{ height:35px; width:100%; background-color:#F5F5F5; border-top:1px solid #ccc; position:fixed; bottom:0; left:0; text-align:center; font:1.2rem/35px "微软雅黑"; color:#404040;}