临摹米家有品首页
（1）html部分
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>有品</title><link href="css/bootstrap.css" type="text/css" /><link href="css/base.css" type="text/css" rel="stylesheet" /><link href="css/standard.css" type="text/css" rel="stylesheet" /><link href="css/standard-1.css" type="text/css" rel="stylesheet" /></head><body><div id="root"><div class="home-wrap"><div class="m-site-top"><div class="container"><div class="fr"><div class="fl-m-user-con site-item"><div class="m-no-login"><a href="https://youpin.mi.com/app/shop/login?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">登录</a><a href="https://account.xiaomi.com/pass/register?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">注册</a></div><span class="fl-m-line"></span><div class="clearfix"></div></div><div class="fr-m-download site-item"><a href="#" class=""><span></span> 下载APP</a><div class="site-item-nav "><div class="site-nav-inner"><img class="qr-code" src="img/c1.png" /><p>下载有品APP<br /> 得新人1000元礼包</p></div></div></div><div class="clearfix"></div></div><div class="clearfix"></div></div></div><div class="m-header"><div class="container"><div class="m-header-top"><div class="m-logo"><img src="img/c2.png" /></div><div class="m-card-wrap"><img src="img/c3.png" /></div><div class="m-search"><div class="search-form "><div class="search-card-wrap"><img src="img/c4.png" /></div><div class="search-input-con"><input type="text" placeholder="冬日里不能错过的美食" /></div><div class="clearfix"></div></div></div></div><div class="m-nav"><ul class="nav-list"><li><span class="item">有品推荐</span></li><li><span class="item">家电</span></li><li><span class="item">影音</span></li><li><span class="item">餐厨</span></li><li><span class="item">服饰</span></li><li><span class="item">智能</span></li><li><span class="item">健康</span></li><li><span class="item">洗护</span></li><li><span class="item">日杂</span></li><li><span class="item">饮食</span></li><li><span class="item">居家</span></li><li><span class="item">手机</span></li><li><span class="item">箱包</span></li><li><span class="item">配件</span></li><li><span class="item">婴童</span></li><li><span class="item">出行</span></li><li><span class="item">品牌</span></li></ul></div></div></div><div class="m-banner"><div class="m-ban-con"><div class="swiper-container"><div class="swiper-wrapper"><a href="#" style="display: block;" data-swiper-slide-index="0"><img src="img/move1.jpg"></a><a href="#" style="display: none;" data-swiper-slide-index="1"><img src="img/move2.jpg"></a><a href="#" style="display: none;" data-swiper-slide-index="2"><img src="img/move3.jpg"></a><a href="#" style="display: none;" data-swiper-slide-index="3"><img src="img/move4.jpg"></a><a href="#" style="display: none;" data-swiper-slide-index="4"><img src="img/move5.jpg"></a></div><div class="swiper-pagination"><span class="swiper-pagination-bullet"><input type="radio" /></span><span class="swiper-pagination-bullet"><input type="radio" /></span><span class="swiper-pagination-bullet"><input type="radio" /></span><span class="swiper-pagination-bullet"><input type="radio" /></span><span class="swiper-pagination-bullet"><input type="radio" /></span></div></div></div></div><div class="p-hero-wrap"><div class="container"><ul class="p-hreo-nav"><li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=r9509d039c0bc6bc4"><img src="img/p1.jpg" alt="" /></li><li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=s8939d03918810635"><img src="img/p2.jpg" alt="" /></li><li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3"><img src="img/p3.jpg" alt="" /></li><li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=qcec75039f10ed7b3"><img src="img/p4.jpg" alt="" /></li><li class="m-tag-a no-mr" data-src="https://home.mi.com/app/shop/content?id=rada7d03957b90e05"><img src="img/p5.jpg" alt="" /></li></ul></div></div><div class="h-section"><div class="container"><div class="h-sec-top"><h2 class="h-subTit">有品推荐<span>有品为您甄选 悦心购买</span></h2><a href="">更多></a><div class="clearfix"></div></div><div class="m-sec-main"><div class="item-pos0" data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3"><div class="h-layer-con"><div data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3"><img src="img/h-sec1-1.jpg" alt="" /><img src="img/h-sec1-2.png" alt="" /><div class="clearfix"></div></div></div></div><div class="item-pos1" data-src="https://home.mi.com/app/shop/content?id=sd87cd03985daac35"><div class="item-inner "><img src="img/h-sec1-3.jpg" alt="" /></div></div><div class="item-pos2" data-src="https://home.mi.com/app/shop/content?id=ma5e65039f6882631"><div class="item-inner "><img src="img/h-sec1-4.jpg" alt="" /></div></div></div></div></div><div class="h-section"><div class="container"><div class="h-sec-top"><h2 class="h-subTit">小米众筹<span>寻觅世间好物</span></h2><a href="">更多></a><div class="clearfix"></div></div><div class="m-sec-main"><div class="item-pos0"><div class="item-inner"><img src="img/h-sec2-1.jpg" /><div class="pro-text"><p class="pro-info">造梦者恒氧除霾新风机</p><p class="pro-price">￥<span>4999</span></p></div></div><div class="m-progress-wrap"><div class="m-bar-con"><img src="img/h-sec2-t.jpg" /></div><div class="m-progress-info"><div class="fl-m-suppory"><span class="sup-num">646<span>/200</span></span>人参与<span class="m-tag-hot" style="background-color: rgb(255, 156, 0);">火</span></div><div class="fr-m-persent"><span class="m-num">326</span><span class="m-num-flag">%</span></div><div class="clearfix"></div></div></div></div><div class="item-pos1"><div class="item-inner"><img src="img/h-sec2-2.jpg" /><div class="pro-text"><p class="pro-info">2018年复古中国风日历</p><p class="pro-price">￥<span>59</span></p></div></div><div class="m-progress-wrap"><div class="m-bar-con"><img src="img/h-sec2-t.jpg" /></div><div class="m-progress-info"><div class="fl-m-suppory"><span class="sup-num">17241<span>/2000</span></span>人参与<span class="m-tag-hot" style="background-color: rgb(255, 156, 0);">爆</span></div><div class="fr-m-persent"><span class="m-num">862</span><span class="m-num-flag">%</span></div><div class="clearfix"></div></div></div></div><div class="item-pos2"><div class="item-inner"><img class="pic" src="img/h-sec2-3.jpg" /><img class="pic" src="img/h-sec2-4.png" /><div class="pro-text"><p class="pro-info">玺佳全镂空机械表</p><p class="pro-price">￥<span>799</span></p></div><div class="clearfix"></div></div><div class="m-progress-wrap"><div class="m-bar-con"><img src="img/h-sec2-t.jpg" /></div><div class="m-progress-info"><div class="fl-m-suppory"><span class="sup-num">5867<span>/1000</span></span>人参与<span class="m-tag-hot" style="background-color: rgb(255, 156, 0);">爆</span></div><div class="fr-m-persent"><span class="m-num">586</span><span class="m-num-flag">%</span></div><div class="clearfix"></div></div></div></div><div class="item-pos3"><div class="item-inner"><img src="img/h-sec2-5.jpg" /><div class="pro-text"><p class="pro-info">iHealth智能血糖仪</p><p class="pro-price">￥<span>99起</span></p></div></div><div class="m-progress-wrap"><div class="m-bar-con"><img src="img/h-sec2-t.jpg" /></div><div class="m-progress-info"><div class="fl-m-suppory"><span class="sup-num">16305<span>/1000</span></span>人参与<span class="m-tag-hot" style="background-color: rgb(255, 156, 0);">爆</span></div><div class="fr-m-persent"><span class="m-num">1630</span><span class="m-num-flag">%</span></div><div class="clearfix"></div></div></div></div></div></div></div><div class="h-section h-new-sec"><div class="container"><div class="h-sec-top"><h2 class="h-subTit">热门<span>大家都爱的贴心好物</span></h2><a href="">更多></a><div class="clearfix"></div></div><div class="m-sec-main"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec3-1.webp" /></div><div class="pro-item-text"><p class="pro-info">8H乳胶弹簧静音床垫M3</p><p class="pro-desc" title="20厘米厚度，独立袋装弹簧支撑，全面透气">20cm厚度，独立袋装弹簧支撑...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1439</span><span class="pro-flag">起</span><span class="m-sale-tag">直降</span></p></div></div></div><div class="swiper-slide"><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec3-2.webp" /></div><div class="pro-item-text"><p class="pro-info">小米电视4A 65英寸</p><p class="pro-desc" title="4K全高清屏 人工智能语音 海量片源 第六代画质引擎">4K全高清，人工智能语音...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">4699</span><!--<span class="pro-flag">起</span><span class="m-sale-tag">直降</span>--></p></div></div></div><div class="swiper-slide"><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec3-3.webp" /></div><div class="pro-item-text"><p class="pro-info">云米智能互联烟灶套装（天然气）</p><p class="pro-desc" title="烟灶相互联动，自动排风，火越大吸力越大，下厨新体验">烟灶相互联动，自动排风，火越...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">2999</span><!--<span class="pro-flag">起</span><span class="m-sale-tag">直降</span>--></p></div></div></div><div class="swiper-slide"><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec3-4.webp" /></div><div class="pro-item-text"><p class="pro-info">番茄鸡蛋冻干面 12杯/箱</p><p class="pro-desc" title="非油炸冻干技术，新鲜口感，汤汁浓郁">非油炸冻干技术，新鲜口感，汤...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">59.9</span><!--<span class="pro-flag">起</span><span class="m-sale-tag">直降</span>--><span class="m-fee-tag">有品配送</span></p></div></div></div><div class="swiper-slide" style="display: none;"><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec3-5.webp" /></div><div class="pro-item-text"><p class="pro-info">石墨烯发热腰带</p><p class="pro-desc" title="石墨烯发热，超轻薄，秒热技术，防烫伤">石墨烯发热，超轻薄，秒热技术...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">129</span><span class="pro-flag">起</span><!--<span class="m-sale-tag">直降</span>--><span class="m-fee-tag">有品配送</span></p></div></div></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div></div></div><div class="h-section"><div class="container"><div class="h-sec-top"><div class="h-sec-top"><h2 class="h-subTit">新品<span>每一件产品 给您不一样的感动</span></h2><a href="">更多></a><div class="clearfix"></div></div></div><div class="m-sec-main m-sec-main-a"><div class="item-pos0" style="margin-right: 5px;"><div class="item-inner item-inner-a"><img src="img/h-sec4-3.jpg" /><div class="pro-text"><p class="pro-info">乐范按摩助眠颈枕</p><p class="pro-desc" title="按摩解压，放松入眠，专利锁扣，收纳自如">按摩解压，放松入眠，专利锁...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">99</span></p></div></div></div><div class="item-pos1" style="margin-right: 5px;"><div class="item-inner" style="background-color: rgb(246, 243, 235);"><img src="img/h-sec4-5.png" /><div class="pro-text"><p class="pro-info">小米米家空气净化器2S</p><!--<p class="pro-desc" title=""></p>--><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">899</span></p></div></div></div><div class="item-pos2"><div class="item-inner item-inner-b"><div class="h-layer-con-a"><img src="img/h-sec4-1.png" alt="" /><img src="img/h-sec4-2.png" alt="" /><div class="clearfix"></div></div><div class="pro-text"><p class="pro-info">芯迈软木羊毛足垫</p><p class="pro-desc" title="【购买两双立减15元，部分尺码为预售，12月6日陆续发货。】恒温保暖，柔软回弹，双重吸湿">【购买两双立减15元，部分...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">49</span></p></div></div></div><div class="item-pos3" style="margin-right: 5px;margin-top: 5px;"><div class="item-inner" style="background-color: rgb(237, 243, 230);"><img src="img/h-sec4-6.png" /><div class="pro-text"><p class="pro-info">飞行员夹克羽绒服 男款</p><!--<p class="pro-desc"></p>--><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">499</span></p></div></div></div><div class="item-pos4" style="margin-top:5px ;margin-right: 5px;"><div class="item-inner item-inner-c"><div class="h-layer-con-c"><img src="img/h-sec4-7.jpg" /><img src="img/h-sec4-8.png" /></div><div class="pro-text"><p class="pro-info" title="【12.6限量发售 10:00开抢！】石头扫地机器人">【12.6限量发售 10:00开抢！】...</p><!--<p class="pro-desc"></p>--><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">2499</span></p></div></div></div><div class="item-pos5-more" style="margin-top: 5px;"><div class="item-inner"><span>更多新品></span></div></div><div class="clearfix"></div></div><div class="clearfix"></div></div></div><div class="h-section"><div class="container"><div class="h-sec-top"><h2 class="h-subTit">品牌<span>精心制作，价美质优</span></h2><a href="">更多></a><div class="clearfix"></div></div><div class="m-sec-main"><div class="swiper-container swiper-container-a"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/h-sec5-1.webp" /></div><div class="swiper-slide"><img src="img/h-sec5-2.webp" /></div><div class="swiper-slide"><img src="img/h-sec5-3.webp" /></div><div class="swiper-slide"><img src="img/h-sec5-4.webp" /></div><div class="swiper-slide" style="display: none;"><img src="img/h-sec5-5.webp" /></div><div class="swiper-slide" style="display: none;"><img src="img/h-sec5-6.webp" /></div><div class="swiper-slide" style="display: none;"><img src="img/h-sec5-7.webp" /></div><div class="swiper-slide" style="display: none;"><img src="img/h-sec5-8.webp" /></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div></div></div><div class="h-section h-section-6"><div class="container"><div class="m-randomBg-top"><div class="m-spacial-guide-fl" style="background: rgb(174, 214, 223)"><h2 class="top-tit">手机</h2><span class="m-more">更多></span></div><div class="m-randomBg-img-fr"><div class="m-tag-a"><img src="img/h-sec6-0.jpg" alt="" /></div></div><div class="clearfix"></div></div><div class="m-product-list"><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec6-1.webp" /></div><p class="pro-desc" title="">【6G+64GB版周二早1...</p><div class="h-text-inner"><p class="pro-info">小米6</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">2299</span><span class="pro-flag">起</span></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec6-2.webp" /></div><p class="pro-desc" title="">【12月5日晚8点全色系开...</p><div class="h-text-inner"><p class="pro-info">小米MIX2 Unibody...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">4699</span><!--<span class="pro-flag"></span>--></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec6-3.webp" /></div><p class="pro-desc" title="">【买赠学院双肩包+圈铁耳机...</p><div class="h-text-inner"><p class="pro-info">小米MIX2</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">3299</span><span class="pro-flag">起</span></p></div><div class="clearfix"></div></div><div class="pro-item pro-item-a"><div class="pro-item-img"><img src="img/h-sec6-4.webp" /></div><p class="pro-desc" title="">【32G/128G版买赠学...</p><div class="h-text-inner"><p class="pro-info">小米MAX2</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1399</span><span class="pro-flag">起</span></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec6-5.webp" /></div><p class="pro-desc" title="">【光学变焦双摄，拍人更美/...</p><div class="h-text-inner"><p class="pro-info">小米5X</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1399</span><span class="m-sale-tag">直降</span></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec6-6.webp" /></div><p class="pro-desc" title="">【12月19日早10点开售...</p><div class="h-text-inner"><p class="pro-info">MIX2 STARCK 全陶...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">4999</span><span class="pro-flag">起</span></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec6-7.webp" /></div><p class="pro-desc" title="">【最高直降300元，128...</p><div class="h-text-inner"><p class="pro-info">小米NOTE3</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1999</span><span class="pro-flag">起</span></p></div><div class="clearfix"></div></div><div class="pro-item pro-item-a"><div class="pro-item-img"><img src="img/h-sec6-8.webp" /></div><p class="pro-desc" title="">【5.5"高清大屏/高...</p><div class="h-text-inner"><p class="pro-info">小米NOTE3</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1999</span><span class="pro-flag">起</span></p></div><div class="clearfix"></div></div><div class="clearfix"></div></div></div></div><div class="h-section h-section-6"><div class="container"><div class="m-randomBg-top"><div class="m-spacial-guide-fl" style="background: rgb(246, 207, 197);"><h2 class="top-tit">居家</h2><span class="m-more">更多></span></div><div class="m-randomBg-img-fr"><div class="m-tag-a"><img src="img/h-sec7-0.jpg" alt="" /></div></div><div class="clearfix"></div></div><div class="m-product-list"><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec7-1.webp" alt="" /></div><p class="pro-desc">20厘米厚度，独立袋装弹簧...</p><div class="h-text-inner"><p class="pro-info">8H乳胶弹簧静音床垫M3</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1439</span><span class="pro-flag">起</span><span class="m-sale-tag">直降</span></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec7-2.webp" alt="" /></div><p class="pro-desc">天然乳胶，0胶水环保材质，...</p><div class="h-text-inner"><p class="pro-info">8H乳胶弹簧静音床垫M1</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">569</span><span class="pro-flag">起</span><span class="m-sale-tag">直降</span></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec7-3.webp" alt="" /></div><p class="pro-desc">航天相变材料，动态调温，控...</p><div class="h-text-inner"><p class="pro-info">宇宙沙盘双向调节控温被</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">699</span><span class="pro-flag">起</span><span class="m-sale-tag">直降</span></p></div><div class="clearfix"></div></div><div class="pro-item pro-item-a"><div class="pro-item-img"><img src="img/h-sec7-4.webp" alt="" /></div><p class="pro-desc">0螺丝组装，万元级配置，优...</p><div class="h-text-inner"><p class="pro-info">8H独立袋装弹簧布艺沙发</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1199</span><span class="pro-flag">起</span><!--<span class="m-sale-tag">直降</span>--></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec7-5.webp" alt="" /></div><p class="pro-desc">超大发光角度，明暗可调，5...</p><div class="h-text-inner"><p class="pro-info">Yeelight智能皎月吸顶...</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">499</span><span class="pro-flag">起</span><!--<span class="m-sale-tag">直降</span>--></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec7-6.webp" alt="" /></div><p class="pro-desc">1:4:1黄金比填充，更轻...</p><div class="h-text-inner"><p class="pro-info">8H 3D七孔保暖被</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">229</span><span class="pro-flag">起</span><span class="m-sale-tag">直降</span></p></div><div class="clearfix"></div></div><div class="pro-item"><div class="pro-item-img"><img src="img/h-sec7-7.webp" alt="" /></div><p class="pro-desc">双面睡感，双面温感，大圈径...</p><div class="h-text-inner"><p class="pro-info">8H双面双温感乳胶弹簧床垫</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1999</span><span class="pro-flag">起</span><!--<span class="m-sale-tag">直降</span>--></p></div><div class="clearfix"></div></div><div class="pro-item pro-item-a"><div class="pro-item-img"><img src="img/h-sec7-8.webp" alt="" /></div><p class="pro-desc">95%大朵白鹅绒，59°错...</p><div class="h-text-inner"><p class="pro-info">8H 95%白鹅绒静音鹅绒被</p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num">1629</span><span class="pro-flag">起</span><span class="m-sale-tag">直降</span></p></div><div class="clearfix"></div></div><div class="clearfix"></div></div></div></div><div class="h-section h-section-6"><div class="container"><div class="m-randomBg-top"><div class="m-spacial-guide-fl" style="background: rgb(207, 192, 223);"><h2 class="top-tit">服饰</h2><span class="m-more">更多></span></div><div class="m-randomBg-img-fr"><div class="m-tag-a"><img src="img/h-sec8-0.jpg" alt="" /></div></div><div class="clearfix"></div></div><div class="m-product-list"><div class="pro-item"><div class="pro-item-img"><img src="" alt="" /></div><p class="pro-desc"></p><div class="h-text-inner"><p class="pro-info"></p><p class="pro-price"><span class="pro-unit">￥</span><span class="m-num"></span><span class="pro-flag">起</span><span class="m-sale-tag">直降</span></p></div></div><div class="pro-item"></div><div class="pro-item"></div><div class="pro-item pro-item-a"></div><div class="pro-item"></div><div class="pro-item"></div><div class="pro-item"></div><div class="pro-item pro-item-a"></div></div></div></div></div></div><!--<script src="js/jquery.js" type="text/javascript"></script>--><script src="js/jquery-2.1.0.js" type="text/javascript"></script><script src="js/bootstrap.js" type="text/javascript"></script><script src="js/base.js" type="text/javascript"></script></body></html>（2）css部分
base.css
* {margin: 0;padding: 0;
}img {border: none;cursor: pointer;
}.clearfix {clear: both;
}.home-wrap {min-width: 1080px;margin: 0 auto;
}.container {width: 1080px;margin: 0 auto;
}.m-site-top {background: #333;
}.fr {float: right;
}.fr a {text-decoration: none;color: #fff;
}.fr .fl-m-user-con {float: left;height: 48px;
}.fr .fl-m-user-con .m-no-login {float: left;width: 90px;height: 48px;margin-right: 8px;
}.fr .fl-m-user-con .fl-m-line {float: right;display: inline-block;height: 21px;border-left: 1px solid #fff;margin-top: 15px;margin-left: 6px;margin-right: 3px;
}.fr .fl-m-user-con .m-no-login a {line-height: 48px;font-size: 16px;margin-left: 8px;
}.fr .fr-m-download {float: right;margin-left: 5px;position: relative;
}.fr .fr-m-download a {display: block;height: 48px;width: 110px;line-height: 48px;
}.site-item-nav {position: absolute;top: 48px;left: -20px;display: none;
}.site-item-nav .site-nav-inner {width: 120px;height: 140px;font-size: 14px;color: #aaa;text-align: center;
}.qr-code {width: 100px;height: 100px;
}.m-header {padding-top: 20px;margin-bottom: 5px;
}.m-header .m-header-top {height: 51px;
}.m-header .m-header-top>div {display: inline-block;
}.m-header .m-header-top .m-logo img {width: 123px;height: 45px;cursor: pointer;
}.m-card-wrap,
.m-search {float: right;
}.m-card-wrap {margin-top: 23px;margin-left: 5px;
}.search-form {padding-top: 18px;border-bottom: 1px solid #ccc;
}.search-card-wrap {float: left;
}.search-input-con {float: right;
}.search-input-con input {display: inline-block;border: none;width: 250px;height: 25px;
}.m-nav {margin-top: 30px;
}.nav-list {list-style-type: none;font-size: 14px;cursor: pointer;
}.nav-list li {margin: 0;padding: 0;display: inline-block;width: 59px;height: 46px;text-align: center;color: #333;
}.m-banner .m-ban-con {width: 1080px;margin: 0 auto;
}.m-banner .m-ban-con .swiper-container {position: relative;
}.m-banner .m-ban-con .swiper-container .swiper-pagination {position: absolute;height: 21px;width: 1080px;bottom: 10px;text-align: center;
}.m-banner .m-ban-con .swiper-container .swiper-pagination-bullet {cursor: pointer;margin-left: 8px;margin-right: 8px;line-height: 16px;
}.p-hero-wrap {margin-top: 30px;
}.p-hero-wrap .container .p-hreo-nav {padding-bottom: 10px;border-bottom: 1px solid #ccc;
}.p-hero-wrap .container .p-hreo-nav .m-tag-a {display: inline-block;margin-right: 102px;cursor: pointer;
}.p-hero-wrap .container .p-hreo-nav .m-tag-a.no-mr {display: inline-block;margin-right: 0;
}.p-hero-wrap .container .p-hreo-nav .m-tag-a img {width: 130px;height: 140px;
}.h-section {margin-top: 90px;
}.h-section .container .h-sec-top {margin-bottom: 20px;
}.h-section .container .h-sec-top h2 {float: left;font-size: 24px;font-weight: 400;color: #333;
}.h-section .container .h-sec-top h2 span {font-size: 14px;color: #333;margin-left: 10px;
}.h-section .container .h-sec-top a {float: right;text-decoration: none;cursor: pointer;font-size: 16px;line-height: 31px;color: #666;
}.h-section .container .h-sec-top a:hover {color: #333;
}.h-section .container .m-sec-main {margin-top: 30px;
}.h-section .container .m-sec-main>div {display: inline-block;
}.h-section .container .m-sec-main .h-layer-con {width: 538px;height: 206px;
}.h-section .container .m-sec-main .h-layer-con div {position: relative;float: left;
}.h-section .container .m-sec-main .h-layer-con div img {width: 538px;height: 206px;position: absolute;left: 0;top: 0;
}.h-section .container .m-sec-main .item-inner {position: relative;
}.h-section .container .m-sec-main .item-inner img {width: 266px;height: 206px;
}.h-section .container .m-sec-main .item-inner .pro-text {position: absolute;left: 0;top: 0;color: #333;padding: 10px;
}.h-section .container .m-sec-main .item-inner .pro-text .pro-info {margin-top: 10px;height: 26px;line-height: 26px;
}.h-section .container .m-sec-main .item-inner .pro-text .pro-price {height: 26px;line-height: 26px;color: red;font-size: 14px;
}.h-section .container .m-sec-main .m-progress-wrap .m-bar-con img {width: 266px;height: 3px;
}.h-section .container .m-sec-main .m-progress-wrap .m-progress-info {margin-top: 10px;
}.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fl-m-suppory{float: left;color: #333;font-size: 14px;
}
.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fr-m-persent{float: right;margin-right: 15px;color: red;
}
.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fl-m-suppory .sup-num{color: red;font-size: 16px;
}
.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fl-m-suppory .m-tag-hot{font-size: 16px;
}
.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fl-m-suppory .sup-num span{color: #333;font-size: 15px;
}
.h-section .container .m-sec-main .item-pos2 .item-inner{width: 266px;height: 210px;
}
.h-section .container .m-sec-main .item-pos2 .item-inner .pic{position: absolute;left: 0;top: 0;
}
standard.css
.swiper-button-prev,
.swiper-button-next {width: 40px;height: 40px;border-radius: 40px;box-shadow: 0 0 1px #aaa;background: #ccc;position: absolute;top: 50%;transform: translate(0, -50%);
}.swiper-button-prev {left: 10px;
}.swiper-button-next {right: 10px;
}.swiper-button-prev:hover,
.swiper-button-next:hover {background: #bb3b00;
}.swiper-container {position: relative;
}.h-new-sec {padding: 50px 0 25px;background: #f5f5f5;
}.swiper-container {margin-bottom: 30px;
}.swiper-slide {background: #fff;display: inline-block;padding-bottom: 8px;cursor: pointer;
}.pro-item {text-align: center;padding-bottom: 10px;margin-bottom: 5px;
}.pro-item-img {width: 266px;
}.pro-item-img img {width: 195px;height: 195px;
}.pro-item-text {color: #333;
}.pro-info {margin-top: 10px;height: 26px;line-height: 26px;
}.pro-desc {height: 24px;line-height: 24px;font-size: 14px;color: #aaa;
}.pro-price {height: 26px;line-height: 26px;color: red;padding: 0 auto;
}.pro-price>.pro-unit,
.m-num,
.pro-flag {font-size: 14px;
}.pro-price .m-sale-tag {margin-left: 8px;background: #c00000;color: #fff;font-size: 15px;padding: 0 5px;
}.pro-price .m-fee-tag {margin-left: 0 5px;background: #d1bfa6;color: #fff;font-size: 15px;padding: 0 5px;
}.swiper-slide>img {width: 266px;height: 252px;
}.swiper-container-a {margin-bottom: 0;
}
standard-1.css
.h-section .container .m-sec-main .item-pos0 .item-inner-a img {width: 266px;height: 423px;
}.h-section .container .m-sec-main-a>div {float: left;display: inline-block;
}.h-section .container .m-sec-main .item-pos2 .item-inner-b {float: right;width: 538px;height: 210px;
}.h-section .container .m-sec-main-a .item-pos2 .item-inner-b .h-layer-con-a img {width: 538px;height: 210px;position: absolute;top: 0;right: 0;
}.h-section .container .m-sec-main .item-pos4 .item-inner-c {width: 266px;height: 210px;
}.h-section .container .m-sec-main .item-pos4 .item-inner-c .h-layer-con-c img {width: 266px;height: 210px;position: absolute;top: 0;right: 0;
}.h-section .container .m-sec-main .item-pos5-more .item-inner {width: 266px;height: 210px;background: #f7f5eb;color: #845f3f;text-align: center;line-height: 210px;
}.h-section-6 {margin-top: 50px;
}.m-spacial-guide-fl {width: 266px;height: 370px;float: left;color: #fff;position: relative;
}.top-tit {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.m-more {position: absolute;top: 85%;left: 50%;transform: translate(-50%, 0);
}.m-randomBg-img-fr {float: right;
}.m-tag-a img {width: 809px;height: 370px;
}.m-product-list .pro-item {border: 1px solid #ccc;width: 264px;height: 315px;float: left;margin-right: 5px;position: relative;padding-bottom: 0;cursor: pointer;
}
.m-product-list .pro-item .pro-desc{font-size: 16px;color: #845f3f;
}
.m-product-list .pro-item .h-text-inner{margin-top: 10px;background: #ddd;padding: 5px 0 8px;position: absolute;bottom: 0;left: 0;right: 0;
}
.m-product-list .pro-item .h-text-inner .pro-info{color: #333;
}
.m-product-list .pro-item-a {margin-right: 0;
}（3）效果图
