Community Learn Tools Library Leisure
search
English

小米 商城 底部 上

Original 2019-01-12 21:37:22 260
abstract：<!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;
}


Correcting teacher：天蓬老师Correction time：2019-01-13 10:25:25
Teacher's summary：-moz-background-size: 100% 100%;这样兼容处理不错的

Release Notes

Popular Entries