小米商城主体部分布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="shortcut icon" type="image/x-icon" href="static/images/footlogo.png">
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="static/layui/layui.js" ></script>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<div>
<div>
<ul>
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">IOT</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">小爱分享平台</a><span>|</span></li>
<li><a href="#">金融</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">企业服务</a><span>|</span></li>
<li><a href="#">SelectRegion</a></li>
</ul>
<div>
<ul>
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="shop/order.html">我的订单</a></li>
<li><a href="shop/cart.html"><i class="fa fa-shopping-cart" ></i> 购物车 ( 0 )</a>
<div>购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<img src="static/images/footlogo.png" alt="">
<img src="static/images/logoAD.gif" alt="" style="margin-left: 10px;">
</div>
<ul>
<li>小米手机
<div>
<div>
<ul>
<li>
<span>新品</span>
<span><a><img src="static/images/phone/phone1.png" alt=""></a></span>
<span><a>小米9</a></span>
<span>2999元起</span>
</li>
<li>
<span>新品</span>
<span><a><img src="static/images/phone/phone1.png" alt=""></a></span>
<span><a>小米9</a></span>
<span>2999元起</span>
</li>
<li>
<span>新品</span>
<span><a><img src="static/images/phone/phone1.png" alt=""></a></span>
<span><a>小米9</a></span>
<span>2999元起</span>
</li>
<li>
<span>新品</span>
<span><a><img src="static/images/phone/phone1.png" alt=""></a></span>
<span><a>小米9</a></span>
<span>2999元起</span>
</li>
<li>
<span>新品</span>
<span><a><img src="static/images/phone/phone1.png" alt=""></a></span>
<span><a>小米9</a></span>
<span>2999元起</span>
</li>
<li>
<span>新品</span>
<span><a><img src="static/images/phone/phone1.png" alt=""></a></span>
<span><a>小米9</a></span>
<span>2999元起</span>
</li>
</ul>
</div>
</div>
</li>
<li>红米</li>
<li>电视</li>
<li>笔记本</li>
<li>家电</li>
<li>新品</li>
<li>路由器</li>
<li>智能硬件</li>
<li>服务</li>
<li>社区</li>
</ul>
<div>
<form>
<input type="text" name="">
<div><a href="" title="">电视新品</a> <a href="" title="">618预热</a></div>
<div><i class="fa fa-search"></i></div>
</form>
</div>
</div>
<div>
<div>
<ul>
<li>
<a href="">手机 电话卡 <i class="fa fa-angle-right"></i></a>
<div >
<ul>
<li><a href=""><img src="static/images/phone/phone1.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone2.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone6.jpg">移动4G专区</a></li>
<li><a href=""><img src="static/images/phone/phone1.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone2.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone6.jpg">移动4G专区</a></li>
</ul>
<ul>
<li><a href=""><img src="static/images/phone/phone1.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone2.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone6.jpg">移动4G专区</a></li>
<li><a href=""><img src="static/images/phone/phone1.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone2.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone6.jpg">移动4G专区</a></li>
</ul>
</div>
</li>
<li><a href="">电视机 盒子 <i class="fa fa-angle-right"></i></a></li>
<li><a href="">笔记本 <i class="fa fa-angle-right"></i></a></li>
<li><a href="">智能 家电 <i class="fa fa-angle-right"></i></a></li>
<li><a href="">健康 家居 <i class="fa fa-angle-right"></i></a></li>
<li><a href="">出行 儿童 <i class="fa fa-angle-right"></i></a></li>
<li><a href="">路由器 手机配件 <i class="fa fa-angle-right"></i></a></li>
<li><a href="">移动电源 插线板<i class="fa fa-angle-right"></i></a></li>
<li>
<a href="">耳机 音箱 <i class="fa fa-angle-right"></i></a>
<div >
<ul>
<li><a href=""><img src="static/images/phone/phone1.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone2.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone6.jpg">移动4G专区</a></li>
<li><a href=""><img src="static/images/phone/phone1.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone2.png">红米6A</a></li>
<li><a href=""><img src="static/images/phone/phone6.jpg">移动4G专区</a></li>
</ul>
</div>
</li>
<li><a href="">生活 米兔 <i class="fa fa-angle-right"></i></a></li>
</ul>
</div>
<div></div>
</div>
<div>
<div>
<ul>
<li><a><i class="fa fa-mobile-phone fa-2x"></i>选购手机</a></li>
<li><a><i class="fa fa-gift fa-2x"></i><span>企业团购</span></a></li>
<li><a><i class="fa fa-facebook fa-2x"></i>F码通道</a></li>
<li><a><i class="fa fa-file-text fa-2x"></i>米粉卡</a></li>
<li><a><i class="fa fa-refresh fa-2x"></i>以旧换新</a></li>
<li><a><i class="fa fa-credit-card fa-2x"></i>话费充值</a></li>
</ul>
</div>
<div style="background: url(static/images/midAD1.jpg);"></div>
<div style="background: url(static/images/midAD2.jpg);"></div>
<div style="background: url(static/images/midAD3.jpg);"></div>
</div>
<div>
<h2>小米闪购</h2>
<div style="background-color: #f1eded;">
<div>18:00 场</div>
<div class="flash fa fa-flash fa-4x"></div>
<div>距离开始还有</div>
<div>
<span>00</span>
<span>:</span>
<span>00</span>
<span>:</span>
<span>00</span>
</div>
</div>
<div>
<a href="">
<img src="static/images/flashbuy/flashbuy1.jpg" alt="">
<h3>米家空气净化器Pro 白色 </h3>
<p>大空间，快循环</p>
<p>
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div></div>
</a>
</div>
<div>
<a href="">
<img src="static/images/flashbuy/flashbuy2.jpg" alt="">
<h3>米家空气净化器Pro 白色 </h3>
<p>大空间，快循环</p>
<p>
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div></div>
</a>
</div>
<div>
<a href="">
<img src="static/images/flashbuy/flashbuy3.jpg" alt="">
<h3>米家空气净化器Pro 白色 </h3>
<p>大空间，快循环</p>
<p>
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div></div>
</a>
</div>
<div>
<a href="">
<img src="static/images/flashbuy/flashbuy4.jpg" alt="">
<h3>米家空气净化器Pro 白色 </h3>
<p>大空间，快循环</p>
<p>
<span style="color:#ff6709">1399 元</span>
<del>1499元</del>
</p>
<div></div>
</a>
</div>
</div>
<div style="background:url(static/images/longAD1.jpg);"></div>
</div>
</div>
<div>
<div>
<div>
<h2>手机</h2>
<div>
<a href=""> 查看全部 <span><i class="fa fa-angle-right"></i></span></a>
</div>
</div>
<div>
<div style="background: url(static/images/buy/手机AD.jpg);"></div>
<div>
<ul>
<li>
<a href="#">
<span>享八折</span>
<img src="static/images/buy/手机1.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<img src="static/images/buy/手机2.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<span>享八折</span>
<img src="static/images/buy/手机3.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<img src="static/images/buy/手机4.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<span>享八折</span>
<img src="static/images/buy/手机5.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<span>享八折</span>
<img src="static/images/buy/手机6.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<img src="static/images/buy/手机7.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<img src="static/images/buy/手机8.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
</ul>
</div>
</div>
<div style="background:url(static/images/longAD2.jpg);"></div>
</div>
<div>
<div>
<h2>家电</h2>
<div>
<ul>
<li>热门</li>
<li>电视影音</li>
<li>电脑</li>
<li>家居</li>
</ul>
</div>
</div>
<div class="contentText jd">
<div>
<div style="background: url(static/images/buy/智能AD1.jpg);"></div>
<div style="background: url(static/images/buy/智能AD2.jpg);"></div>
</div>
<div>
<ul>
<li>
<a href="#">
<span>减100</span>
<img src="static/images/buy/家电1.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<img src="static/images/buy/家电2.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<span>享八折</span>
<img src="static/images/buy/家电3.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<img src="static/images/buy/家电4.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<img src="static/images/buy/家电2.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<img src="static/images/buy/家电6.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li>
<a href="#">
<span>享八折</span>
<img src="static/images/buy/家电7.jpg">
<h3>小米5X 4G+64GB</h3>
<p>光学变焦双摄，拍人更美</p>
<p>1499 元</p>
</a>
</li>
<li style="background: none;">
<div>
<a href="" title="">
<img src="static/images/buy/家电8.jpg" alt="">
<h3>小米5X 4G+64GB</h3>
<p>1499 元</p>
</a>
</div>
<div></div>
</li>
</ul>
</div>
</div>
<div style="background:url(static/images/longAD3.jpg);"></div>
</div>
<div class="content zn">
<div>
<h2>智能</h2>
<div>
<ul>
<li>热门</li>
<li>出行</li>
<li>健康</li>
<li>酷玩</li>
<li>路由器</li>
</ul>
</div>
</div>
<div class="contentText jd">
<div>
<div style="background: url(static/images/buy/智能AD1.jpg);"></div>
<div style="background: url(static/images/buy/智能AD2.jpg);"></div>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<div></div>
<div></div>
</li>
</ul>
</div>
</div>
<div style="background:url(static/images/longAD4.jpg);"></div>
</div>
</div>
</div>
<div>
<div>
<div>
<ul>
<li><a href="#"><i class="fa fa-wrench"></i>预约维修服务</a></li>
<li><a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a></li>
<li><a href="#"><i class="fa fa-refresh"></i>15天免费换货</a></li>
<li><a href="#"><i class="fa fa-gift"></i>满150元包邮</a></li>
<li><a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a></li>
</ul>
</div>
<div>
<dl>
<dt>帮助中心</dt>
<dd><a href="" title="">账户管理</a></dd>
<dd><a href="" title="">购物指南</a></dd>
<dd><a href="" title="">订单操作</a></dd>
</dl>
<dl>
<dt>服务支持</dt>
<dd><a href="" title="">售后政策</a></dd>
<dd><a href="" title="">自助服务</a></dd>
<dd><a href="" title="">相关下载</a></dd>
</dl>
<dl>
<dt>线下门店</dt>
<dd><a href="" title="">小米之家</a></dd>
<dd><a href="" title="">服务网点</a></dd>
<dd><a href="" title="">授权体验店</a></dd>
</dl>
<dl>
<dt>关于小米</dt>
<dd><a href="" title="">了解小米</a></dd>
<dd><a href="" title="">加入小米</a></dd>
<dd><a href="" title="">投资者关系</a></dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd><a href="" title="">新浪微博</a></dd>
<dd><a href="" title="">官方微信</a></dd>
<dd><a href="" title="">联系我们</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="" title="">F 码通道</a></dd>
<dd><a href="" title="">礼物码</a></dd>
<dd><a href="" title="">防伪查询</a></dd>
</dl>
<div>
<p>400-100-5678</p>
<p>周一至周日 8:00-18:00<br>(仅收市话费)</p>
<button><span class="fa fa-commenting "></span> 联系客服</button>
</div>
</div>
</div>
<div>
<div>
<div><img src="static/images/footlogo.png" alt=""></div>
<div>
<div>
<ul>
<li><a>小米商城</a><span>|</span></li>
<li><a>MIUI</a><span>|</span></li>
<li><a>米家</a><span>|</span></li>
<li><a>米聊</a><span>|</span></li>
<li><a>多看</a><span>|</span></li>
<li><a>游戏</a><span>|</span></li>
<li><a>路由器</a><span>|</span></li>
<li><a>米粉卡</a><span>|</span></li>
<li><a>政企服务</a><span>|</span></li>
<li><a>小米天猫店</a><span>|</span></li>
<li><a>隐私政策</a><span>|</span></li>
<li><a>问题反馈</a><span>|</span></li>
<li><a>Select Region</a></li>
</ul>
</div>
<div>
<a href="">©mi.com</a>
京ICP证110507号
<a href="">京ICP备10046444号</a>
<a href="">京公网安备11010802020134号</a>
<a href="">京网文[2014]0059-0009号</a>
<br>
违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
</div>
</div>
<div>
<img src="static/images/footericon1.png" alt="">
<img src="static/images/footericon2.png" alt="">
<img src="static/images/footericon3.png" alt="">
<img src="static/images/footericon4.png" alt="">
<img src="static/images/footericon5.png" alt="">
</div>
</div>
<div>
探索黑科技，小米为发烧而生！
</div>
</div>
</div>
</body>
</html>
*{margin: 0px;padding: 0px}
ul,li{list-style: none}
a{text-decoration: none;color: #ccc;cursor: pointer;}
/*头部*/
.header{width: 100%;height: 40px;background-color: #333;}
.menu{width:1226px;height: 40px;margin: 0 auto;line-height: 40px}
.menu>ul{float: left;}
.menu>ul>li{float: left;font-size: 12px;}
.menu>ul>li a:hover{color: #fff;}
.menu>ul>li span{margin: 0 8px;color: #6c6d69;}
.menu>div{float: right;}
.menu>div ul li{float: left;}
.menu>div ul li span{margin: 0 5px;color: #6c6d69;}
.menu>div ul li a:hover{color: #fff;}
.menu>div ul .menu_r_gwc{width: 120px;height: 40px;text-align:center;color: #aaa;background-color: #424242;position: relative;margin-left: 10px; }
.menu>div ul .menu_r_gwc div{display:none;width:300px;height:100px;background-color: #ffc;color: #ccc;position: absolute;right: 0px;z-index: 100;}
.menu>div ul .menu_r_gwc:hover div{display:block;}
.menu>div ul .menu_r_gwc:hover a{color: #ff6700;}
.menu>div ul .menu_r_gwc:hover{background-color: #fff;}
/*内容*/
.content{width: 1226px;margin: 10px auto}
/*导航条*/
.contentMenu{height: 66px;margin: 20px auto;}
.contentOne .contentMenu>div,ul{float: left;}
.contentOne .contentMenu>ul{line-height: 66px;height:66px;margin-left: 15px}
.contentOne .contentMenu>ul>li{float: left;font-size: 17px;margin: 0 5px;}
.contentOne .contentMenu .contentMenu_form{width: 300px;height: 50px;float: right;padding: 8px 0;position: relative;}
.contentOne .contentMenu .contentMenu_form input[type="text"]{width:248px;height: 48px;float: left;border: 1px solid #ccc;border-right: none}
.contentOne .contentMenu .contentMenu_form .btn{border: 1px solid #ccc;width:48px;height: 48px;float: left;}
.contentOne .contentMenu .contentMenu_form .btn i{font-size: 22px;color: #424242;line-height: 50px;margin-left: 14px;}
.contentOne .contentMenu .contentMenu_form .btn:hover{background-color: #ff6700;border: 1px solid #ff6700;}
.contentOne .contentMenu .contentMenu_form .btn i:hover{color: #fff;}
.contentOne .contentMenu .contentMenu_form_tag{width:150px; position: absolute;right: 25px;top: 25px}
.contentOne .contentMenu .contentMenu_form_tag a{color: #aaa;font-size: 12px;padding: 3px;background-color: #ebebeb;}
.contentOne .contentMenu .contentMenu_form_tag a:hover{background-color: #ff6700;color: #fff;}
/*下拉*/
.MI_phone{display:none;width: 100%;height: 230px;background: #fff;border-top: 1px solid #ccc;border-bottom:1px solid #ccc;position: absolute;left: 0;top:146px;z-index: 2;}
.contentMenu .MI_phone .MI_phone1{display:block;width: 1226px;height: 230px;margin: 0 auto;}
.contentMenu .MI_phone ul li{width:203px;height: 230px;text-align: center;float: left;}
.contentMenu .MI_phone ul li span{display: block;}
.contentMenu .MI_phone ul li a{font-size: 12px;color:#333;}
.contentMenu .MI_phone ul li .new{width: 60px;height: 18px;margin: 0 auto;font-size: 12px;border: 1px solid #ff6700;color: #ff6700;text-align: center;line-height: 18px;}
.contentMenu .MI_phone ul li .img{width:160px;height:110px;text-align: center;padding:0 21.5px;margin:15px auto;border-right: 1px solid #ccc;}
.contentMenu .MI_phone ul li:last-child .img{border-right: none;}
.contentMenu .MI_phone ul li .money{height:18px;text-align: center;line-height: 18px}
.contentMenu .MI_phone ul li span:last-child{height: 24px;font-size: 12px;color: #ff6700;line-height: 24px;}
/*banner*/
.contentPic{overflow: hidden;}
/*侧边导航*/
.contentPic_l{background-color: #646464;width: 246px;height: 480px;float: left;position: relative;}
.contentPic_l .contentPic_l_menu{width: 246px;height:440px;margin: 20px 0px;}
.contentPic_l .contentPic_l_menu>li{width: 246px;height: 44px;line-height: 44px;font-size: 15px;}
.contentPic_l .contentPic_l_menu>li>a{display: block;height:44px;line-height: 44px;color: #fff;padding-left:30px;position: relative;}
.contentPic_l .contentPic_l_menu>li>a:hover{background-color: #ff6700;}
.contentPic_l .contentPic_l_menu>li>a i{color: #ccc;font-size: 20px;position: absolute;right:30px;top:10px;}
/*侧边下拉*/
.contentPic_l_menu2{width:980px;height: 480px;z-index: 5;position: absolute;top:0px;left:246px;display: none;}
.contentPic_l .contentPic_l_menu>li:hover .contentPic_l_menu2{display: block;}
.contentPic_l .contentPic_l_menu>li .contentPic_l_menu2 ul{width:245px;height:478px;background-color: #fff;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.contentPic_l .contentPic_l_menu>li .contentPic_l_menu2 ul:last-child{border-right: 1px solid #ccc;}
.contentPic_l .contentPic_l_menu>li .contentPic_l_menu2 li{width: 245px;height: 80px;}
.contentPic_l .contentPic_l_menu>li .contentPic_l_menu2 li a{display: block;padding: 20px 20px;line-height: 40px;color:#333;}
.contentPic_l .contentPic_l_menu>li .contentPic_l_menu2 li a img{width:40px;height:40px;margin-right: 15px;}
.contentPic_l .contentPic_l_menu>li .contentPic_l_menu2 li:hover a{color: #ff6700;}
.contentPic_r{background-color: #999;width: 980px;height: 480px;float: left}
.contentPic_url{margin-top: 10px;overflow: hidden}
.contentPic_url_1{width:236px; height:170px;float: left;background-color: #5F5750}
.contentPic_url_1 ul li{width:77px;height:77px;float: left;color: #ccc;font-size: 15px;text-align: center;margin:3px 0px;border-right: 1px solid #6C645D;}
.contentPic_url_1 ul li:nth-child(3n){border:none;}
.contentPic_url_1 ul li a{display:block;padding:10px 0;margin: 12px auto;font-size: 12px;}
.contentPic_url_1 ul li a i{font-size: 24px;line-height: 24px;display: block;}
.contentPic_url_1 ul li:hover a,i{color:#fff;}
.contentPic_url_p{width:317px; height:170px;float: left;margin-left: 13px;background-color: #ccc}
/*小米闪购*/
.contentShop{margin-top: 20px;overflow: hidden;}
.contentShop h2{font-size: 22px;font-weight: 400;}
.contentShop_1{width: 236px;height: 300px;float: left;margin-left:11.5px;background-color: #fff;padding-top:40px;position: relative;}
.contentShop_1:nth-child(2){margin-left: 0px;}
.contentShop_1 div{width: 100%;text-align: center;}
.contentShop_1 .time{font-size: 24px;color: #ef3a3b;}
.contentShop_1 .flash{height: 64px;margin:25px 0px; color: #ef3a3b;}
.contentShop_1 .detail{font-size: 15px;line-height: 24px;color: #ccc;}
.contentShop_1 .clock{margin-top: 30px;color: #605751;font-size: 24px;line-height: 46px;}
.contentShop_1 .clock .hour,.minute,.second{display:inline-block;background:#605751;width: 46px;height: 46px;color: #fff;}
.contentShop_1 .picshopImg{width: 160px;height: 160px;margin:0px 38px 22px;}
.contentShop_1 .picshopTitle{color: #999;font-size: 14px;}
.contentShop_1 .picshopDesc{font-size: 12px;color: #aaa;margin: 10px 0;}
.contentShop_1 .picshopPrice{font-size: 13px;color: #aaa;}
.contentShop_1 .bg{background: rgba(0,0,0,0.02);width: 100%;height: 100%;position: absolute;top: 0;left: 0px;}
.contentShop_1 a{text-align: center;}
.contentImg{background-color: #ccc;height: 120px;margin:20px 0;}
/*手机*/
.contentTwo{background-color: #F5F5F5;padding-top: 20px;padding-bottom: 30px;}
.contentTwo .tab{height: 56px;line-height: 56px;}
.contentTwo .tab h2{font-size: 22px;font-weight: 200;float: left;}
.contentTwo .tab .tab_fr{height:56px;float: right;}
.contentTwo .tab .tab_fr a{color:#333;font-size: 16px;}
.contentTwo .tab .tab_fr a span{display:block;width: 20px;height: 20px;margin-top:18px;background: #999;border-radius: 10px;line-height: 20px ;text-align: center;float: right;color: #fff;margin-left: 10px;}
.contentTwo .tab .tab_fr a:hover{color:#ff6700;}
.contentTwo .tab .tab_fr a:hover span{background-color:#ff6700;}
.contentTwo .contentUl{height: 80px;margin-top: 10px;}
.contentTwo .contentText{overflow: hidden}
.contentTwo .contentText .contentText_l{width: 234px;height: 614px;float: left;}
.contentTwo .contentText .contentText_r{width: 978px;height: 614px;float: left;margin-left: 14px;}
.contentTwo .contentText .contentText_r ul{margin-left: -14px;margin-top: -14px;}
.contentTwo .contentText .contentText_r li{width: 234px;height: 300px;background: #fff;float: left;margin-left:14px;margin-top: 14px;text-align: center;color: #ccc;position: relative;}