小米商城的导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小米商城</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="xiaomi/css/style01.css">
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<header>
<div class="hc mc">
<div class="hc_l l" style="width:700px;">
<a href="" style="padding-left:0px;">小米商城</a>
<a href="">MIUI</a>
<a href="">loT</a>
<a href="">云服务</a>
<a href="">金融</a>
<a href="">有品</a>
<a href="">小爱开放平台</a>
<a href="">政企服务</a>
<a href="">资质证照</a>
<a href="">协议规则</a>
<a href="">下载app</a>
<a href="" style="border-right:none;">Select Region</a>
</div>
<div class="hc_r r" style="width:280px;">
<a href="xiaomilogin/html">登录</a>
<a href="">注册</a>
<a href="">消息通知</a>
<a href="" style="width:100px;border-right:none;background:#424242;"><span class="layui-icon layui-icon-cart"></span>购物车(0)</a>
</div>
<div class="clear"></div>
</div>
</header>
<main>
<div class="mcontentup mc">
<div class="mcheader" style="margin-top:24px;">
<div class="mch_l l"><a href="#"><img src="xiaomi/images/logo.png"></a></div>
<div class="mch_m">
<a name="imga" onmouseover="fa(this)" onmouseleave="fa1(this)" href="">小米手机</a>
<div class="mch_img" name="imgi">
<div class="mch_imgbox">
<p class="xp">新品</p>
<a href=""><img src="xiaomi/images/t0mix3.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/t01qingchun.png"></a>
<p><a href="">小米8 青春版</a></p>
<p class="jg">1399元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/t02mi8.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<p class="xp">新品</p>
<a href=""><img src="xiaomi/images/t03miplay.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/t04mi8se.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
</div>
<a name="imga" onmouseover="fa(this)" onmouseleave="fa1(this)" href="">红米</a>
<div class="mch_img" name="imgi">
<div class="mch_imgbox">
<p class="xp">新品</p>
<a href=""><img src="xiaomi/images/hm1.png"></a>
<p><a href="">红米Note 7</a></p>
<p class="jg">999元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/hm2.png"></a>
<p><a href="">小米8 青春版</a></p>
<p class="jg">1399元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/hm3.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<p class="xp">新品</p>
<a href=""><img src="xiaomi/images/hm4.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/hm5.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
</div>
<a name="imga" onmouseover="fa(this)" onmouseleave="fa1(this)" href="">电视</a>
<div class="mch_img" name="imgi">
<div class="mch_imgbox">
<p class="xp">新品</p>
<a href=""><img src="xiaomi/images/hm1.png"></a>
<p><a href="">小米电视4S 75英寸</a></p>
<p class="jg">7999元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/hm2.png"></a>
<p><a href="">小米8 青春版</a></p>
<p class="jg">1399元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/hm3.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<p class="xp">新品</p>
<a href=""><img src="xiaomi/images/hm4.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
<span></span>
<div class="mch_imgbox">
<a href=""><img src="xiaomi/images/hm5.png"></a>
<p><a href="">小米MIX 3</a></p>
<p class="jg">3299元起</p>
</div>
</div>
<a name="imga" href="">笔记本</a>
<a name="imga" href="">家电</a>
<a name="imga" href="">新品</a>
<a name="imga" href="">路由器</a>
<a name="imga" href="">智能硬件</a>
<a name="imga" href="">服务</a>
<a name="imga" href="">社区</a>
</div>
<div class="mch_r r" style="width:292px;height:50px;border:1px solid #e0e0e0;">
<input type="text" placeholder="小米8 小米MIX 2S" style="width:242px;height:50px;border:1px solid #e0e0e0;">
<span class="layui-icon layui-icon-search" style="font-size:18px;font-weight:bold;"></span>
</div>
</div>
<div class="clear"></div>
<div style="margin-top:24px;">
<div class="mcnav_l l">
<a onmouseover="fa(this)" onmouseleave="fa1(this)" href="">手机 电话卡 <span class="layui-icon layui-icon-right"></span></a>
<div class="mcnav_box" >
<div class="mcnav_imgbox">
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
</div>
<div class="mcnav_imgbox">
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
</div>
</div>
<a onmouseover="fa(this)" onmouseleave="fa1(this)" href="">电视 盒子 <span class="layui-icon layui-icon-right"></span></a>
<div class="mcnav_box" >
<div class="mcnav_imgbox">
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
</div>
<div class="mcnav_imgbox">
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
<a href=""><img src="xiaomi/images/sj01.png">小米MIX 3</a>
<a href=""><img src="xiaomi/images/sj02.png">小米8 青春版</a>
</div>
</div>
<a href="">笔记本 平板 <span class="layui-icon layui-icon-right"></span></a>
<a href="">家电 插线板 <span class="layui-icon layui-icon-right"></span></a>
<a href="">出行 穿戴 <span class="layui-icon layui-icon-right"></span></a>
<a href="">智能 路由器 <span class="layui-icon layui-icon-right"></span></a>
<a href="">电源 配件 <span class="layui-icon layui-icon-right"></span></a>
<a href="">健康 儿童 <span class="layui-icon layui-icon-right"></span></a>
<a href="">耳机 音箱 <span class="layui-icon layui-icon-right"></span></a>
<a href="">生活 箱包 <span class="layui-icon layui-icon-right"></span></a>
</div>
<div class="mcnav_r r" id="slideShowContainer">
<ul id="picUl">
<li><a href="#"><img src="xiaomi/images/xmad_11.jpg" alt=""/></a></li>
<li><a href="#"><img src="xiaomi/images/xmad_12.jpg" alt=""/></a></li>
<li><a href="#"><img src="xiaomi/images/xmad_13.jpg" alt=""/></a></li>
<li><a href="#"><img src="xiaomi/images/xmad_14.jpg" alt=""/></a></li>
</ul>
<ul id="dotUl">
<li class="selected">1</li>
<li class="unselected">2</li>
<li class="unselected">3</li>
<li class="unselected">4</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div style="margin-top:15px;">
<div class="mcnav-zx">
<div style="border-bottom: 1px solid gray;">
<a href=""><i class="layui-icon layui-icon-cellphone"></i>选购手机</a>
<a href=""><i class="layui-icon layui-icon-cellphone"></i>企业团购</a>
<a href="" style="border:none;"><i class="layui-icon layui-icon-cellphone"></i>F码通道</a>
</div>
<div>
<a href=""><i class="layui-icon layui-icon-cellphone"></i>米粉卡</a>
<a href=""><i class="layui-icon layui-icon-cellphone"></i>以旧换新</a>
<a href="" style="border:none;"><i class="layui-icon layui-icon-cellphone"></i>话费充值</a>
</div>
</div>
<a href="" style="margin-left:9px;"><img src="xiaomi/images/xmad_111.jpg" class="img32"></a>
<a href="" style="margin-left:8px;"><img src="xiaomi/images/xmad_112.jpg" class="img32"></a>
<a href="" style="margin-left:8px;"><img src="xiaomi/images/xmad_113.jpg" class="img32"></a>
</div>
<div class="clear"></div>
<div style="margin-top:35px;">
<div class="xbt">
<h2 style="float:left;">小米闪购</h2>
<p style="width:75px;float:right;"><i class="layui-icon layui-icon-left"></i><i class="layui-icon layui-icon-right"></i></p>
</div>
<div class="img40" style="background-color:#F1EDED;border-top:1px solid red;">
<br>
<p style="font-size:20px;color:red;text-align: center;margin:30px 0;">10:00 场</p>
<p style="text-align: center;"><img src="xiaomi/images/xmsg.png"></p>
<p style="font-size:14px;color:gray;text-align: center;margin:30px 0;">距离结束还有</p>
<p style="width:200px;padding:0px 15px;"><span class="sfm">00</span><span class="sfm">00</span><span class="sfm">00</span></p>
</div>
<div class="img40" style="border-top:1px solid #ff6700;margin-left:13px;">
<a href=""><img class="img41" src="xiaomi/images/xmsg1.jpg"></a>
</div>
<div class="img40" style="border-top:1px solid green;margin-left:13px;">
<a href=""><img class="img41" src="xiaomi/images/xmsg2.jpg"></a>
</div>
<div class="img40" style="border-top:1px solid blue;margin-left:13px;">
<a href=""><img class="img41" src="xiaomi/images/xmsg3.jpg"></a>
</div>
<div class="img40" style="border-top:1px solid red;margin-left:13px;">
<a href=""><img class="img41" src="xiaomi/images/xmsg4.jpg"></a>
</div>
</div>
<div class="clear"></div>
<div style="margin-top:35px;"><a href=""><img src="xiaomi/images/01sj.jpg" class="img1"></a></div>
</div>
</div>
<div class="clear"></div>
<div style="width:100%;background-color:#f5f5f5; margin-top:35px;">
<div class="mcontentdown mc">
<div>
<div class="xbt">
<h2 style="float:left;">手机</h2>
<p style="width:80px;float:right;"><span id="span1">查看全部</span><i id="icon1" class="layui-icon layui-icon-right"></i></p>
</div>
<a href=""><img class="img51" src="xiaomi/images/sj0.jpg"></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
</div>
<div class="clear"></div>
<div style="margin-top:35px;"><a href=""><img src="xiaomi/images/02dsj.jpg" class="img1"></a></div>
<div class="clear"></div>
<div style="margin-top:35px;">
<div class="xbt">
<h2 style="float:left;">家电</h2>
<p style="width:auto;float:right;">
<span class="span2">热门</span>
<span class="span2">电视影音</span>
<span class="span2">电脑</span>
<span class="span2">家居</span></p>
</div>
<a href=""><img class="img52" src="xiaomi/images/jd0.jpg"></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src="xiaomi/images/jd01.jpg"></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img60" src=""></a>
<a href=""><img class="img60" src=""></a>
</div>
<div class="clear"></div>
<div style="margin-top:35px;"><a href=""><img src="xiaomi/images/03yx.jpg" class="img1"></a></div>
<div class="clear"></div>
<div style="margin-top:35px;">
<div class="xbt">
<h2 style="float:left;">智能</h2>
<p style="width:auto;float:right;">
<span class="span2">热门</span>
<span class="span2">出行</span>
<span class="span2">健康</span>
<span class="span2">酷玩</span>
<span class="span2">路由器</span>
</p>
</div>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img60" src=""></a>
<a href=""><img class="img60" src=""></a>
</div>
<div class="clear"></div>
<div style="margin-top:35px;"><a href=""><img src="xiaomi/images/04b.jpg" class="img1"></a> </div>
<div class="clear"></div>
<div style="margin-top:35px;">
<div class="xbt">
<h2 style="float:left;">搭配</h2>
<p style="width:auto;float:right;">
<span class="span2">热门</span>
<span class="span2">耳机</span>
<span class="span2">音箱</span>
<span class="span2">电源</span>
<span class="span2">电池存储卡</span>
</p>
</div>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img60" src=""></a>
<a href=""><img class="img60" src=""></a>
</div>
<div class="clear"></div>
<div style="margin-top:35px;"><a href=""><img src="xiaomi/images/05dlq.jpg" class="img1"></a> </div>
<div class="clear"></div>
<div style="margin-top:35px;">
<div class="xbt">
<h2 style="float:left;">配件</h2>
<p style="width:auto;float:right;">
<span class="span2">热门</span>
<span class="span2">保护套</span>
<span class="span2">贴膜</span>
<span class="span2">其它配件</span>
</p>
</div>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img60" src=""></a>
<a href=""><img class="img60" src=""></a>
</div>
<div class="clear"></div>
<div style="margin-top:35px;"><a href=""><img src="xiaomi/images/06lyej.jpg" class="img1"></a> </div>
<div class="clear"></div>
<div style="margin-top:35px;">
<div class="xbt">
<h2 style="float:left;">周边</h2>
<p style="width:auto;float:right;">
<span class="span2">热门</span>
<span class="span2">出行</span>
<span class="span2">居家</span>
<span class="span2">生活周边</span>
<span class="span2">箱包</span>
</p>
</div>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img60" src=""></a>
<a href=""><img class="img60" src=""></a>
</div>
<div class="clear"></div>
<div style="margin-top:35px;"><a href=""><img src="xiaomi/images/07ms.jpg" class="img1"></a> </div>
<div class="clear"></div>
<div style="margin-top:35px;">
<div class="xbt">
<h2 style="float:left;">为你推荐</h2>
<p style="width:75px;float:right;"><i class="layui-icon layui-icon-left"></i><i class="layui-icon layui-icon-right"></i></p>
</div>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
<a href=""><img class="img52" src=""></a>
</div>
<div class="clear"></div>
<div>
<p>热评产品</p>
<a href=""><img class="img70" src=""></a>
<a href=""><img class="img70" src=""></a>
<a href=""><img class="img70" src=""></a>
<a href=""><img class="img70" src=""></a>
<a href=""><img class="img71" src=""></a>
<a href=""><img class="img71" src=""></a>
<a href=""><img class="img71" src=""></a>
<a href=""><img class="img71" src=""></a>
</div>
<div class="clear"></div>
<div>
<p>内容</p>
<a href=""><img class="img80" src=""></a>
<a href=""><img class="img80" src=""></a>
<a href=""><img class="img80" src=""></a>
<a href=""><img class="img80" src=""></a>
</div>
<div class="clear"></div>
<div>
<p>视频</p>
<a href=""><img class="img90" src=""></a>
<a href=""><img class="img90" src=""></a>
<a href=""><img class="img90" src=""></a>
<a href=""><img class="img90" src=""></a>
</div>
<div class="clear"></div>
</div>
</main>
<footer>
<div class="fcontent" style="background-color:#fff;">
<div class="ftnav mc">
<a href=""><span class=""></span>预约维修服务</a>
<a href=""><span class=""></span>7天无理由退货</a>
<a href=""><span class=""></span>15天免费换货</a>
<a href=""><span class=""></span>满150元包邮</a>
<a href="" style="border-right:none;"><span class=""></span>520余家售后网点</a>
</div>
<div class="ftc mc">
<div class="ftc_l l">
<div><p>帮助中心</p> <p>服务支持</p><p>线下门店</p><p>关于小米</p><p>关注我们</p><p>特色服务</p></div>
<div>
<a href="">账户管理</a>
<a href="">售后政策</a>
<a href="">小米之家</a>
<a href="">了解小米</a>
<a href="">新浪微博</a>
<a href="">F码通道</a>
<a href="">购物指南</a>
<a href="">自助服务</a>
<a href="">服务网点</a>
<a href="">加入小米</a>
<a href="">官方微信</a>
<a href="">礼物码</a>
<a href="">订单操作</a>
<a href="">相关下载</a>
<a href="">授权体验店</a>
<a href="">投资者</a>
<a href="">联系我们</a>
<a href="">防伪查询</a>
</div>
</div>
<div class="ftc_r r">
<p style="font-size:20px;color:#ff5700;margin-bottom: 5px;">400-100-5678</p>
<p style="font-size:8px;margin-bottom: 5px;">周一至周日8:00-18:00</p>
<p style="font-size:8px;margin-bottom: 5px;">(仅收市话费)</p><br>
<button class="btfoot">联系客服</button>
</div>
</div>
</div>
<div class="ftft mc" style="padding-top:30px;">
<img src="xiaomi/images/logo.png" class="l" style="padding-right:5px;">
<a href="">小米商城</a> |
<a href="">MIUI</a> |
<a href="">米家</a> |
<a href="">米聊</a> |
<a href="">多看</a> |
<a href="">游戏</a> |
<a href="">路由器</a> |
<a href="">米粉卡</a> |
<a href="">政企服务</a> |
<a href="">小米天猫店</a> |
<a href="">隐私政策</a> |
<a href="">商城用户协议</a> |
<a href="">账号协议</a> |
<a href="">问题反馈</a> |
<a href="">廉正举报</a> |
<a href="">诚信合规</a> |
<a href="">Select Region</a>
<br/>© <span>mi.com</span> 京ICP证110507号 <span>京ICP备10046444号</span> <span>京公网安备11010802020134号</span> <span>京网文[2017]1530-131号</span>
<br/><span>（京）网械平台备字（2018）第00005号</span> <span>互联网药品信息服务资格证 (京) -非经营性-2014-0090</span> <span>营业执照</span> <span>医疗器械公告</span>
<br/><span>增值电信业务许可证</span> 网络食品经营备案（京）【2018】WLSPJYBAHF-12 <span>食品经营许可证</span>
<br/>违法和不良信息举报电话：185-0130-1238 <span>知识产权侵权投诉</span> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</div>
</footer>
<script>
//通过js控制，动态修改相应的样式，达到图片轮播的效果
/*图片轮播*/
var slideShowContainer = document.getElementById("slideShowContainer");
var pic = document.getElementById("picUl").getElementsByTagName("li");
var dot = document.getElementById("dotUl").getElementsByTagName("li");
var index = 0;
var timer = null;
/*定义图片切换函数*/
function changePic (curIndex) {
for(var i = 0;i < pic.length;++i){
pic[i].style.display = "none";
dot[i].className = "unselected";
}
pic[curIndex].style.display = "block";
dot[curIndex].className = "selected";
}
/*index超出图片总量时归零*/
function autoPlay(){
if(+index >= pic.length){
index = 0;
}
changePic(index);
index++;
}
/*定义并调用自动播放函数*/
timer = setInterval(autoPlay,1500);
/*鼠标划过整个容器时停止自动播放*/
slideShowContainer.onmouseover = function(){
clearInterval(timer);
}
/*鼠标离开整个容器时继续播放下一张*/
slideShowContainer.onmouseout = function(){
timer = setInterval(autoPlay,1500);
}
/*遍历所有数字导航实现划过切换至对应的图片*/
for(var i = 0;i < dot.length;i++){
dot[i].onmouseover = function(){
clearInterval(timer);
index = this.innerText-1;
changePic(index)
}
}
//顶部导航条下拉图片框，左侧导航栏右拉图片框 移上显示、移出隐藏
function fa(ele){
ele.nextElementSibling.style.display='block';
}
function fa1(ele){
ele.nextElementSibling.style.display='none';
}
</script>
</body>
</html>
*{margin:0px;padding:0px;}
.mc{margin:0px auto;width:1226px;}
.mt{margin-top:10px;}
.mbt{margin-bottom:10px;}
.l{float:left;}
.r{float:right;}
.clear{clear:both;}
a{text-decoration: none;text-align: center;}
/* 头部 */
header{width:100%;height:40px;background-color:#333;}
header a{text-decoration: none;border-right:1px solid #423B36;float:left;padding:0px 7px;color:#b0b0b0;}
header a:hover{color:white;}
.hc{width:1226px;height:30px;text-align: center;line-height: 16px;padding:12px 0px;font-size:12px;}
.mcontentup{background-color:#fff;}
main a{float:left;text-decoration: none;text-align: center;color:#333;}
/* 主体顶部导航条 */
.mch_l{width:230px;}
.mch_m>a{font-size:16px;line-height: 56px;padding:0px 10px;}
.mch_m>a:hover{color:#ff5700;}
.mch_r{width:300px;height:54px;background-color:#fff;}
.mch_img{display:none;width:100%;height:230px;background-color:#fff;border-top:1px solid #e0e0e0;
border-bottom:1px solid #e0e0e0;text-align: center;position: absolut