摘要：<!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;float: left;background: #CCCCCC;}
/*手机*/
.phone_left{height: 620px;width: 235px;float: left;background: #CCCCCC;}
.phone_right{height: 620px;width:980px;float: left;margin-left: 10px;}
.phone_right div{height: 305px;width: 235px;background: #CCCCCC;float: left;}
/*家电*/
.house{float: left;height: 300px;width: 235px;background: #CCCCCC;}
/*智能*/
.brain{float: left;height: 300px;width: 235px;background: #CCCCCC;}
/*搭配*/
.match{float: left;height: 300px;width: 235px;background: #CCCCCC;}
/*配件*/
.component{float: left;height: 300px;width: 235px;background: #CCCCCC;}
/*周边*/
.circum{float: left;height: 300px;width: 235px;background: #CCCCCC;}
/*为您推荐*/
.recommend{float: left;height:300px;width: 235px;background: #CCCCCC;margin-right: 12.7px;}
/*热评产品*/
.hot{float: left;height: 420px;width: 297px;background: #CCCCCC;margin-right:12.6px;}
/*内容*/
.content1{float: left;height: 420px;width: 297px;background: #CCCCCC;margin-right:12.6px;}
/*视频*/
.video{float: left;height:300px;width: 297px;background: #CCCCCC;margin-right:12.6px;}
.content .img{height: 120px;margin: 30px auto;}
.content .title{height: 80px;background: #CCCCCC;margin: 10px auto;}
.content .productList{height:620px;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 class="phone_left" style="background: url(img/buy/手机AD.jpg);"></div>
<div class="phone_right">
<div></div>
<div style="margin-left:12.7px;"></div>
<div style="margin-left:12.7px;"></div>
<div style="margin-left:12.7px;"></div>
<div style="margin-top: 10px;"></div>
<div style="margin-left:12.7px;margin-top: 10px;"></div>
<div style="margin-left:12.7px;margin-top: 10px;"></div>
<div style="margin-left:12.7px;margin-top: 10px;"></div>
</div>
</div>
<div class="img" style="background: url(img/longAD2.jpg);"></div>
<div class="title">家电</div>
<div class="productList">
<div class="house" style="background: url(img/buy/家电AD1.jpg);" ></div>
<div class="house" style="margin-left: 12.7px;"></div>
<div class="house" style="margin-left: 12.7px;"></div>
<div class="house" style="margin-left: 12.7px;"></div>
<div class="house" style="margin-left: 12.7px;"></div>
<div class="house" style="margin-top: 10px;background: url(img/buy/家电AD2.jpg);"></div>
<div class="house" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="house" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="house" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="house" style="margin-left: 12.7px;margin-top: 10px;">
<div style="height: 145px;background: blue;"></div>
<div style="height: 145px;margin-top: 10px;background: blue;"></div>
</div>
</div>
<div class="img" style="background: url(img/longAD3.jpg);"></div>
<div class="title">智能</div>
<div class="productList">
<div class="brain" style="background: url(img/buy/智能AD1.jpg);" ></div>
<div class="brain" style="margin-left: 12.7px;"></div>
<div class="brain" style="margin-left: 12.7px;"></div>
<div class="brain" style="margin-left: 12.7px;"></div>
<div class="brain" style="margin-left: 12.7px;"></div>
<div class="brain" style="margin-top: 10px;background: url(img/buy/智能AD2.jpg);"></div>
<div class="brain" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="brain" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="brain" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="brain" style="margin-left: 12.7px;margin-top: 10px;">
<div style="height: 145px;background: blue;"></div>
<div style="height: 145px;margin-top: 10px;background: blue;"></div>
</div>
</div>
<div class="img" style="background: url(img/longAD4.jpg);"></div>
<div class="title">搭配</div>
<div class="productList">
<div class="match" style="background: url(img/buy/搭配AD1.jpg);" ></div>
<div class="match" style="margin-left: 12.7px;"></div>
<div class="match" style="margin-left: 12.7px;"></div>
<div class="match" style="margin-left: 12.7px;"></div>
<div class="match" style="margin-left: 12.7px;"></div>
<div class="match" style="margin-top: 10px;background: url(img/buy/搭配AD2.jpg);"></div>
<div class="match" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="match" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="match" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="match" style="margin-left: 12.7px;margin-top: 10px;">
<div style="height: 145px;background: blue;"></div>
<div style="height: 145px;margin-top: 10px;background: blue;"></div>
</div>
</div>
<div class="img" style="background: url(img/longAD5.jpg);"></div>
<div class="title">配件</div>
<div class="productList">
<div class="component" style="background: url(img/buy/配件AD1.jpg);" ></div>
<div class="component" style="margin-left: 12.7px;"></div>
<div class="component" style="margin-left: 12.7px;"></div>
<div class="component" style="margin-left: 12.7px;"></div>
<div class="component" style="margin-left: 12.7px;"></div>
<div class="component" style="margin-top: 10px;background: url(img/buy/配件AD2.jpg);"></div>
<div class="component" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="component" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="component" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="component" style="margin-left: 12.7px;margin-top: 10px;">
<div style="height: 145px;background: blue;"></div>
<div style="height: 145px;margin-top: 10px;background: blue;"></div>
</div>
</div>
<div class="img" style="background: url(img/longAD6.jpg);"></div>
<div class="title">周边</div>
<div class="productList">
<div class="circum" style="background: url(img/buy/周边AD1.jpg);" ></div>
<div class="circum" style="margin-left: 12.7px;"></div>
<div class="circum" style="margin-left: 12.7px;"></div>
<div class="circum" style="margin-left: 12.7px;"></div>
<div class="circum" style="margin-left: 12.7px;"></div>
<div class="circum" style="margin-top: 10px;background: url(img/buy/周边AD2.jpg);"></div>
<div class="circum" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="circum" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="circum" style="margin-left: 12.7px;margin-top: 10px;"></div>
<div class="circum" style="margin-left: 12.7px;margin-top: 10px;">
<div style="height: 145px;background: blue;"></div>
<div style="height: 145px;margin-top: 10px;background: blue;"></div>
</div>
</div>
<div class="title">为您推荐</div>
<div class="productList" style="height: 300px;">
<div class="recommend"></div>
<div class="recommend"></div>
<div class="recommend"></div>
<div class="recommend"></div>
<div class="recommend" style="margin-right: 0;"></div>
</div>
<div class="title">热评产品</div>
<div class="productList" style="height:420px;">
<div class="hot"></div>
<div class="hot"></div>
<div class="hot"></div>
<div class="hot" style="margin-right: 0;"></div>
</div>
<div class="title">内容</div>
<div class="productList" style="height:420px;">
<div class="content1"></div>
<div class="content1"></div>
<div class="content1"></div>
<div class="content1" style="margin-right: 0;"></div>
</div>
<div class="title">视频</div>
<div class="productList" style="height: 300px;">
<div class="video"></div>
<div class="video"></div>
<div class="video"></div>
<div class="video" style="margin-right: 0;"></div>
</div>
</div>
</div>
<div class="foots">
<div class="foot"></div>
</div>
</body>
</html>
