<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城</title>
</head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="../font-awesome/css/font-awesome.min.css">
<body>
<div class="top">
<div class="topmain">
</div>
</div>
<div class = "topmenu">
</div>
<div class = "topcontent1">
<div class="topcontent1_l">
</div>
<div class="topcontent1_r">
</div>
</div>
<div class="clear"></div>
<div class = "topcontent2">
<div class="topcontent2_s1">
</div>
<div class="topcontent2_s2" style="background: url(img/c22.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%; ">
</div>
<div class="topcontent2_s2" style="background: url(img/c22.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontent2_s2" style="background: url(img/c23.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
</div>
<div class="clear"></div>
<div class = "topcontentflashshop">
<h2>小米闪购</h2>
<div class="topcontentflashshop_1" style="margin-right: 12px; border-top: 2px solid
green;"></div>
<div class="topcontentflashshop_1" style="margin-right: 12px; border-top: 2px solid
#FFAC13;"></div>
<div class="topcontentflashshop_1" style="margin-right: 12px; border-top: 2px solid
red;"></div>
<div class="topcontentflashshop_1" style="margin-right: 12px; border-top: 2px solid
#E53935;"></div>
<div class="topcontentflashshop_1" style="border-top: 2px solid blue;"></div>
</div>
<div class="clear"></div>
<div class = "topcontentad" style="background: url(img/ad1.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%; margin-top: 40px;">
</div>
<div class = "topcontentphone">
<h2>手机</h2>
<div class="topcontentphone_l">
</div>
<div class="topcontentphone_r">
<div class="topcontentphone_r_top">
<div class="topcontentphone_r_top_s1" style="margin-right: 10px; background: url(img/phonert1.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontentphone_r_top_s1" style="margin-right: 10px; background: url(img/phonert2.png); background-size: 100% 100%;
-moz-background-size: 100% 100%; ">
</div>
<div class="topcontentphone_r_top_s1" style="margin-right: 10px; background: url(img/phonert3.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontentphone_r_top_s1" style="margin-right: 10px; background: url(img/phonert4.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
</div>
<div class="topcontentphone_r_top" style="margin-top: 20px;">
<div class="topcontentphone_r_top_s1" style="margin-right: 10px; background: url(img/phonert5.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontentphone_r_top_s1" style="margin-right: 10px; background: url(img/phonert6.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%; ">
</div>
<div class="topcontentphone_r_top_s1" style="margin-right: 10px; background: url(img/phonert7.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontentphone_r_top_s1" style="margin-right: 10px; background: url(img/phonert8.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class = "topcontentad" style="background: url(img/ad2.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%; margin-top: 40px;">
</div>
<div class = "topcontentapplication">
<h2>家电</h2>
<div class="topcontentapplication_sub">
<div class="topcontentapplication_sub_s1" style="background: url(img/app1.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontentapplication_sub_s1" style="background: url(img/app2.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontentapplication_sub_s1" style="background: url(img/app3.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontentapplication_sub_s1" style="background: url(img/app4.png); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class="topcontentapplication_sub_s1" style="background: url(img/app5.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
</div>
<div class="topcontentapplication_sub">
<div class="topcontentapplication_sub_s1" style="background: url(img/app6.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;margin-top: 30px;">
</div>
<div class="topcontentapplication_sub_s1" style="background: url(img/app7.png); background-size: 100% 100%;
-moz-background-size: 100% 100%;margin-top: 30px;">
</div>
<div class="topcontentapplication_sub_s1" style="background: url(img/app8.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;margin-top: 30px;">
</div>
<div class="topcontentapplication_sub_s1" style="background: url(img/app9.png); background-size: 100% 100%;
-moz-background-size: 100% 100%;margin-top: 30px;">
</div>
<div class="topcontentapplication_sub_s1" style="background: url(img/app10.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;margin-top: 30px;">
</div>
</div>
</div>
<div class="clear"></div>
<div class = "topcontentad" style="background: url(img/ad3.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%; margin-top: 40px;">
</div>
<div class = "topcontentsmart">
智能
</div>
<div class = "topcontentad" style="background: url(img/ad4.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class = "topcontentother">
搭配
</div>
<div class = "topcontentad" style="background: url(img/ad5.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class = "topcontentaccesorries">
配件
</div>
<div class = "topcontentad" style="background: url(img/ad6.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class = "topcontentother1">
周边
</div>
<div class = "topcontentad" style="background: url(img/ad7.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;">
</div>
<div class = "topcontentrecommend">
为你推荐
</div>
<div class = "topcontentrecommend1">
热评产品
</div>
<div class = "contentcon">
内容
</div>
<div class = "contentvideo">
视频
</div>
<div class="footer">
<div class="footertop">
<a href="#"><i class="fa fa-wrench"></i>预约维修服务</a><span></span>
<a href="#"><i class="fa fa-rotate-right"></i>7天无理由退货</a><span></span>
<a href="#"><i class="fa fa-refresh"></i>15天免费换货</a>><span></span>
<a href="#"><i class="fa fa-gift"></i>满150元包邮</a><span></span>
<a href="#"><i class="fa fa-map-marker"></i>520余家售后网点</a>
</div>
<div class="footertopline"></div>
</div>
</body>
</html>
html body
{
margin: 0px; padding: 0px;
}
.clear
{
clear: both;
}
.top
{
width: 100%;
height: 40px;
background-color: #333;
margin-bottom: 10px;
}
.topmain
{
width: 1226px;
height: 40px;
background-color: #330;
margin: 0px auto;
}
.topmenu
{
width: 1226px;
height: 60px;
margin: 0px auto;
background-color: #ccc;
margin-bottom: 20px;
}
.topcontent1
{
width: 1226px;
/*height: 460px;
background-color: #ccc;*/
margin: 0px auto;
margin-bottom: 20px;
}
.topcontent1_l
{
width: 246px;
height: 460px;
background-color: blue;
margin: 0px auto;
float: left;
}
.topcontent1_r
{
width: 980px;
height: 460px;
background-color: pink;
margin: 0px auto;
float: left;
}
.topcontent2
{
width: 1226px;
/*height: 170px;*/
/*background-color: #ccc;*/
margin: 20px auto;
margin-bottom: 100px;
}
.topcontent2_s1
{
width: 245px;
height: 180px;
background-color: #5f5750;
float: left;
}
.topcontent2_s2
{
width: 317px;
height: 180px;
float: left;
margin-left: 10px;
/*background-color: #ccc;*/
}
/*小米闪购*/
.topcontentflashshop
{
width: 1226px;
/*height: 340px;*/
/*background-color: #ccc;*/
margin: 20px auto;
}
.topcontentflashshop_1
{
height: 340px;
width: 235px;
background-color: #ccc;
float: left;;
}
.topcontentad
{
width: 1226px;
height: 120px;
/*background-color: #ccc;*/
margin: 0px auto;
margin-bottom: 40px;
/* background-size: 100% 100%;
-moz-background-size: 100% 100%;*/
}
.topcontentphone
{
width: 1226px;
/*height: 615px;*/
/*background-color: #ccc;*/
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentphone_l
{
width: 250px;
height: 590px;
background: url(../img/phoneleft.jpg); background-size: 100% 100%;
-moz-background-size: 100% 100%;
float: left;
margin-right: 20px;
}
.topcontentphone_r
{
float: left;
}
.topcontentphone_r_top
{
float: top;
width: 950px;
/*background-color: red;*/
}
.topcontentphone_r_top_s1
{
float: left;
width: 220px;
height: 280px;
/*border: 1px solid red;
background-color: blue;*/
}
.topcontentapplication
{
width: 1226px;
/* height: 660px;
background-color: #ccc;*/
margin: 40px auto;
}
.topcontentapplication_sub
{
}
.topcontentapplication_sub_s1
{
float: left;
height: 300px;
width: 240px;
}
.topcontentsmart
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentother
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentaccesorries
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentother1
{
width: 1226px;
height: 660px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentrecommend
{
width: 1226px;
height: 350px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.topcontentrecommend1
{
width: 1226px;
height: 350px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.contentcon
{
width: 1226px;
height: 480px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.contentvideo
{
width: 1226px;
height: 350px;
background-color: #ccc;
margin: 0px auto;
margin-bottom: 40px;
}
.footer /*底部上*/
{
width: 100%;
background-color: #fff;
}
.footertop /*预约服务等*/
{
width: 1226px;
text-align: center;
margin: 0px auto;
}
.footertop span
{/*font-size: 20px;color:#616161;border-left: 1px solid #e0e0e0;margin:0px 56px;*/
font-size: 12px;
border-left:solid 1px #Ccc;
margin: 0px 20px;
}
.footertop i
{
margin-right: 10px;
}
.footertop a
{
text-decoration: none;
color:#616161;
font-size: 16px;
font-weight: 300;
}
.footertop a:hover
{
color:#FF6700;
}
.footertopline
{
width: 1226px;
background-color: #ccc;
margin: 20px auto;
height: 1px;
}
