摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>小米商城 - 小米MIX 3、小米8、红米6 Pro、小米电视官方网站</title> <link rel="shortcut icon" type=&q
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小米商城 - 小米MIX 3、小米8、红米6 Pro、小米电视官方网站</title>
<link rel="shortcut icon" type="image/x-icon" href="img/footlogo.png"/>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
</head>
<style>
*{margin: 0;padding: 0;}
.clear{clear: both;}
.top{height: 40px;width: 100%;background: #333333;}
.topBar{height: 40px;width: 1226px;background: #ccc;margin: 0 auto;}
.content{width: 1226px;margin: 0px auto;}
.content .menu{height:60px;background: #CCCCCC;margin:10px auto;}
/*轮播图*/
.content .pic{height:480px;margin: 10px auto;}
.pic_left{height: 480px;width:246px;background: #CCCCCC;float: left;}
.pic_right{height: 480px;width: 980px;background: blue;float: left;}
.content .picList{height: 170px;margin: 10px auto;}
.picList_1{height: 170px;width: 235px;background: #5f5750;margin-right: 13px;float: left;}
.picList_2{height: 170px;width: 317px;float: left;}
/*小米闪购*/
.content .miShop{height: 340px;margin: 10px auto;}
.miShopList{height: 340px;width:235px;background: #CCCCCC;float: left;}
.content .img{height: 120px;margin: 30px auto;}
.content .title{height: 80px;background: #CCCCCC;margin: 10px auto;}
.content .productList{height:620px;background: #CCCCCC;margin: 10px auto;}
.foots{height: 180px;width: 100%;background: #CCCCCC;margin: 10px auto;}
.foot{height: 180px;width: 1228px;background:#CCCCCC;margin: 0 auto;}
</style>
<body>
<div class="top">
<div class="topBar"></div>
</div>
<div class="contents">
<div class="content">
<div class="menu"></div>
<!--轮播图-->
<div class="pic">
<div class="pic_left"></div>
<div class="pic_right"></div>
</div>
<div class="clear"></div>
<div class="picList">
<div class="picList_1"></div>
<div class="picList_2" style="background: url(img/midAD1.jpg);margin-right: 13px;"></div>
<div class="picList_2" style="background: url(img/midAD2.jpg);margin-right: 13px;"></div>
<div class="picList_2" style="background: url(img/midAD3.jpg);"></div>
</div>
<div class="clear"></div>
<!--小米闪购-->
<div class="miShop">
<h1>小米闪购</h1>
<div class="miShopList" style="margin-right: 12.7px;border-top:1px solid red;"></div>
<div class="miShopList" style="margin-right: 12.7px;border-top:1px solid orange;"></div>
<div class="miShopList" style="margin-right: 12.7px;border-top:1px solid green;"></div>
<div class="miShopList" style="margin-right: 12.7px;border-top:1px solid blue;"></div>
<div class="miShopList" style="border-top:1px solid red;"></div>
</div>
<div class="clear"></div>
<div class="img" style="background: url(img/longAD1.jpg);"></div>
<div class="title">手机</div>
<div class="productList"></div>
<div class="img" style="background: url(img/longAD2.jpg);"></div>
<div class="title">家电</div>
<div class="productList"></div>
<div class="img" style="background: url(img/longAD3.jpg);"></div>
<div class="title">智能</div>
<div class="productList"></div>
<div class="img" style="background: url(img/longAD4.jpg);"></div>
<div class="title">搭配</div>
<div class="productList"></div>
<div class="img" style="background: url(img/longAD5.jpg);"></div>
<div class="title">配件</div>
<div class="productList"></div>
<div class="img" style="background: url(img/longAD6.jpg);"></div>
<div class="title">周边</div>
<div class="productList"></div>
<div class="title">为您推荐</div>
<div class="productList" style="height: 300px;"></div>
<div class="title">内容</div>
<div class="productList" style="height: 450px;"></div>
<div class="title">视频</div>
<div class="productList" style="height: 300px;"></div>
</div>
</div>
<div class="foots">
<div class="foot"></div>
</div>
</body>
</html>
