摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小米商城</title> </head> <link rel="stylesheet" type=&quo
<!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;
}
批改老师：天蓬老师批改时间：2019-01-13 10:25:25
老师总结：-moz-background-size: 100% 100%;这样兼容处理不错的
