小米商城 部分导航

原创 2019-01-15 17:45:09 299
摘要:<!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">
		  
				<ul class="topmaincontent">
	                <li><a href="#">小米商城</a><span>|</span></li>
	                <li><a href="#">MIUI</a><span>|</span></li>
	                <li><a href="#">IOT</a><span>|</span></li>
	                <li><a href="#">云服务</a><span>|</span></li>
	                <li><a href="#">小爱分享平台</a><span>|</span></li>
	                <li><a href="#">金融</a><span>|</span></li>
	                <li><a href="#">有品</a><span>|</span></li>
	                <li><a href="#">企业服务</a><span>|</span></li>
	                <li><a href="#">SelectRegion</a></li>
        	    </ul>
		 
            <div class="topmaincontent_right">
<!--             	<ul>
            	 	<ul style="  margin-top: 0px; padding-top: 0px;">  
            		<li style="height: 40px; margin-top: 0px; padding-top: 0px;">dd</li>
            	</ul> -->
                 <ul style="margin-top: 0px; padding-top: 0px;">                	
	                <li><a href="#">登录</a><span>|</span></li>
	                <li><a href="#">注册</a><span>|</span></li>
	                <li><a href="shop/order.html">我的订单&nbsp;</a></li>
	                <li class="header_right_li"><a href="shop/cart.html"><i class="fa fa-shopping-cart" ></i>&nbsp; 购物车 ( 0 )</a> 
						<div>购物车中还没有商品,赶紧选购吧!</div>
					</li> 
               </ul> 
            </div>        	    
	</div>
</div>
<div class="clear"></div>
<div class = "topmenu">
	<div class="box" style="width: 1226px;margin: 0 auto;"> <!-- 这个居中div -->
		 <div class="topmenu_s"> <!-- 小米logo 和年货节gif -->
		 	<img src="img/footlogo.png">   
		 	<img src="img/nianhuojie.gif">
		 </div>	 
		 <div class="topmenu_s1"> <!--  nav -->
				<ul>
					<li class="miphonemainli"><a href="#" >小米手机</a>
						<div class="miphone">
						  	<div class = "miphone_in_main" >			    					  
									<div class="miphonein">
										    <div class="miphone_new">
											<span class ="newitem">新品</span>
										</div>
											<img src="img/mix3-320.png">
									</div>	
									<span class = "spinv"></span>					
									<div  class="miphonein">	
										<div class="miphone_new"></div>				
											<img src="img/qingchun-320.png">
									</div>
									<span class = "spinv"></span>		
									<div  class="miphonein">		
									<div class="miphone_new"></div>						
											<img src="img/pc-320-220-mi8.png">
									</div>	
									<span class = "spinv"></span>				 				 
									<div  class="miphonein">
										 <div class="miphone_new">
											<span  class ="newitem">新品</span>
										</div>
											<img src="img/pc-320-miplay-1.png">
									</div>			
									<span class = "spinv"></span>	
									<div  class="miphonein">		
									<div class="miphone_new"></div>						
											<img src="img/pc-320-220-mi8se.png">
									</div>	
						 	</div>			 
						</div> 
					</li> 					
					<li class="redmiphonemainli"><a href="#">红米</a>
						<div class="redmiphone">
						  	<div class = "miphone_in_main" >			    					  
									<div class="miphonein">
										    <div class="miphone_new">
											<span >新品</span>
										</div>
											<img src="img/note7320-220.png">
									</div>	
									<span class = "spinv"></span>						
									<div  class="miphonein">	
										<div class="miphone_new"></div>				
											<img src="img/6pro320-220.png">
									</div>						
									<span class = "spinv"></span>	
									<div  class="miphonein">		
									<div class="miphone_new"></div>						
											<img src="img/666320.png">
									</div>				 			
									<span class = "spinv"></span>		 
									<div  class="miphonein">
										 <div class="miphone_new">
											<span >新品</span>
										</div>
											<img src="img/6A320.png">
									</div>			
									<span class = "spinv"></span>	
									<div  class="miphonein">		
									<div class="miphone_new"></div>						
											<img src="img/note5-320-220.png">
									</div>	
						 	</div>			 
						</div> 
					</li>
					<li  class="tvmainli"><a href="#">电视</a>
						<div class="tv">
						  	<div class = "miphone_in_main" >			    					  
									<div class="miphonein">
										    <div class="miphone_new">
											<span >新品</span>
										</div>
											<img src="img/4s75.png">
									</div>						
									<div  class="miphonein">	
										<div class="miphone_new"></div>				
											<img src="img/32.png">
									</div>						
									<div  class="miphonein">		
									<div class="miphone_new"></div>						
											<img src="img/4a43.png">
									</div>				 				 
									<div  class="miphonein">
										 <div class="miphone_new">
											<span >新品</span>
										</div>
											<img src="img/50.png">
									</div>			
									<div  class="miphonein">		
									<div class="miphone_new"></div>						
											<img src="img/4A-55.jpg">
									</div>	
									<div  class="miphonein">		
									<div class="miphone_new"></div>						
											<img src="img/475toutu.png">
									</div>									
						 	</div>			 
						</div> 
					</li>
					<li><a href="#">笔记本</a></li>
					<li><a href="#">新品</a></li>
					<li><a href="#">路由器</a></li>
					<li><a href="#">智能硬件</a></li>
					<li><a href="#">社区</a></li>
				</ul>	 	
		 </div>
		 <di class="topmenu_s_r"> <!-- 右边新品等 -->
		 	<form>
		 	<input type="text" class="finnew" name="">
		 	<div  class="contentMenu_form_a"> <a href="">电视新品</a>  <a href="">618预热</a> </div>
		 	<div class="btsearch"><i class="fa fa-search"></i> </div>
		 </form>
		 </div>
    </div>
</div>

<div class="clear"></div>
<div class = "topcontent1">
	<div class="topcontent1_l">
					<ul class="content_pic_ul">
						<li class = "content_pic_phone"><a href="">手机 电话卡 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_menu">
										<div class="vmenue">
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/mix3-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米Mix3</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/qingchun-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8亲春版</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/pingmu-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8屏幕指纹版</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/m8-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8</a></div>
											</div>					
											<div class="clear"></div>									
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/m8se-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8SE</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/mix2s80-80white.png"></div>
												<div class="vmenueitem_0"><a href="">小米Mix2S</a></div>
											</div>
										</div>

										<div class="vmenue1">
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/max3-80-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米Max3</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/qingchun-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8亲春版</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/pingmu-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8屏幕指纹版</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/m8-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8</a></div>
											</div>					
											<div class="clear"></div>									
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/m8se-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8SE</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/mix2s80-80white.png"></div>
												<div class="vmenueitem_0"><a href="">小米Mix2S</a></div>
											</div>
										</div>

										<div class="vmenue2">
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/666666.png"></div>
												<div class="vmenueitem_0"><a href="">红迷6</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/qingchun-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8亲春版</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/pingmu-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8屏幕指纹版</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/m8-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8</a></div>
											</div>					
											<div class="clear"></div>									
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/m8se-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8SE</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/mix2s80-80white.png"></div>
												<div class="vmenueitem_0"><a href="">小米Mix2S</a></div>
											</div>
										</div>
										<div class="vmenue3">
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/mimobile.jpg"></div>
												<div class="vmenueitem_0"><a href="">小米移动电话卡</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/qingchun-80.png"></div>
												<div class="vmenueitem_0"><a href="">小米8亲春版</a></div>
											</div>
											<div class="clear"></div>
											<div class="vmenueitem">
												<div class="vmenueitem_0"><img src="img/yunfuwu.jpg"></div>
												<div class="vmenueitem_0"><a href="">云服务物</a></div>
											</div>
										</div>


	 						 
					       </div>
						</li>
						<li><a href="">电视机 盒子</a><i class="fa fa-angle-right"></i></li>
						<li><a href="">笔记本 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">智能 家电 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">健康 家居 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">出行 儿童 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">路由器 手机配件 </a><i class="fa fa-angle-right"></i></li>
						<li><a href="">移动电源 插线板</a><i class="fa fa-angle-right"></i></li>
						<li><a href="">耳机 音箱 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_menu">
		 
							</div>
     
						</li>
						<li><a href="">生活 米兔</a> <i class="fa fa-angle-right"></i></li>
					</ul>	
	</div>
	<div class="topcontent1_r">
		
	</div>
</div>
<div class="clear"></div>
<div class = "topcontent2">
	<div class="topcontent2_s1">
				<ul>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-mobile-phone fa-2x"></span>选购手机</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-gift fa-2x"></span>企业团购</li>
                    <li><span class="fa fa-facebook fa-2x"></span>F码通道</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-file-text fa-2x"></span>米粉卡</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-refresh fa-2x"></span>以旧换新</li>
                    <li><span class="fa fa-credit-card fa-2x"></span>话费充值</li>
                </ul>
	</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="phonemore">查看更多 <span> <i class="fa fa-angle-right"></i> </div>
		<div class="clear"></div>
	<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 class="topcontentsmartheadl">
		 智能   
	</div>
	<div  class="topcontentsmartheadr">
		<span>热门</span> <span>出行</span> <span>健康</span> <span>酷玩</span> <span>陆游器</span>
	</div>	
</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 class="footer1bot">
	 	<div class="footer1bots">
		 	<ul class="footer1bot_ul">
		 		<li class="footer1botliheader">帮助中心</li>
		 		<li><a href="#" >账户管理</a></li>
		 		<li><a href="#" >购物指南</a></li>
		 		<li><a href="#" >订单操作</a></li>	 		
		 	</ul>
        </div>
        <div class="footer1bots">
		 	<ul>
		 		<li class="footer1botliheader">服务支持</li>
		 		<li><a href="#" >售后政策</a></li>
		 		<li><a href="#" >自助服务</a></li>
		 		<li><a href="#" >相关下载</a></li>	 		
		 	</ul>	
        </div>
        <div class="footer1bots">
		 	<ul>
		 		<li class="footer1botliheader">线下门店</li>
		 		<li><a href="#" >小米之家</a></li>
		 		<li><a href="#" >服务网点</a></li>
		 		<li><a href="#" >授权体验店</a></li>	 		
		 	</ul>	
        </div>
        <div class="footer1bots">
		 	<ul>
		 		<li class="footer1botliheader">关于小米</li>
		 		<li><a href="#" >了解小米</a></li>
		 		<li><a href="#" >加入小米</a></li>
		 		<li><a href="#" >投资者关系</a></li>	 		
		 	</ul>	
        </div> 

        <div class="footer1bots">
		 	<ul>
		 		<li class="footer1botliheader">关注我们</li>
		 		<li><a href="#" >新浪微博</a></li>
		 		<li><a href="#" >官方微信</a></li>
		 		<li><a href="#" >联系我们</a></li>	 		
		 	</ul>	
        </div>
        <div class="footer1bots">
		 	<ul>
		 		<li class="footer1botliheader">特色服务</li>
		 		<li><a href="#" >F 码通道</a></li>
		 		<li><a href="#" >礼物码</a></li>
		 		<li><a href="#" >防伪查询</a></li>	 		
		 	</ul>	
        </div> 
        <div class="footer1bots_e">
        	<span  class="tel">400-100-5678</span>
        	<span  class="teldes">周一至周日 8:00-18:00<br>
(仅收市话费)</span>
			<button><span class="fa fa-commenting "></span>&nbsp;联系客服</button>
        </div>        
	 </div>
	 <!-- 最下面 -->
	 <div class="clear"></div>

	 <div class="footer1bots_ef">
	 	<div class="footer1bots_efs" style="margin-right: 10px; padding-top: 20px;"">
	 		<img src = "img/footlogo.png">
        </div>
        <div class="footer1bots_efs">
					<ul style="padding-left: 0px;">
                        <li><a href="#">小米商城</a></li><div></div>
                        <li><a href="#">MIUI</a></li><div></div>
                        <li><a href="#">米家</a></li><div></div>
                        <li><a href="#">米聊</a></li><div></div>
                        <li><a href="#">多看</a></li><div></div>
                        <li><a href="#">游戏</a></li><div></div>
                        <li><a href="#">路由器</a></li><div></div>
                        <li><a href="#">米粉卡</a></li><div></div>
                        <li><a href="#">政企服务</a></li><div></div>
                        <li><a href="#">小米天猫店</a></li><div></div>
                        <li><a href="#"&am					

批改老师:查无此人批改时间:2019-01-15 18:03:50
老师总结:做的不错,不过内容太多,作业显示不完成。继续加油

发布手记

热门词条