小米官网

超、凢脫俗 2021-07-24 11:42 555阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			
    		.white_nav{ 
    				width: 100%;
    				height:100px;
    				line-height: 100px;
    				clear: both;
    				position: relative;
    			}
    		li{ 
    			list-style-type: none;
    		}
    		a{ 
    			text-decoration: none;
    		}
    		
    		.logo,.mi_nav{ 
    			float: left;
    			margin-left: 119px;
    		}
    		
    		.mi_nav>li{ 
    			float: left;
    		}
    		
    		.logo{ 
    			margin-top:28px;
    			margin-right:0px;
    		}
    		.mi_nav>li>a{ 
    			color:#757575;
    			font-size: 16px;
    			margin-right:20px;
    		}
    		.mi_nav>li>a:hover{ 
    			color:#ff6700;
    		}
    		
    		.mi_nav{ 
    			width:1000px;
    		}
    		.mi_nav>.search{ 
    			float:right;
    		
    		}
    		.search>input{ 
    			height:48px;
    			width:243px;
    			border:1px solid #e0e0e0;
    			border-right: none;
    			transition: .3s;
    		}
    		.search>button{ 
    			width:50px;
    			height:52px;
    			border:1px solid #e0e0e0 ;
    			font-weight: bold;
    			outline:none;
    			background-color: #fff;
    			transition:.3s;
    		}
    		.search>button:hover{ 
    			background-color: #ff6700;
    			color:#fff;
    			border:#ff6700;
    			
    		}
    		.search>input:focus,.search>input:focus+button{ 
    			border-color:#ff6700;
    		}
    		
    		.mi_nav_hidden{ 
    			width:100%;
    			height:230px;
    			background-image: url(img/手机图像2.jpg);
    			position: absolute;
    			left:0px;
    			display: none;
    			transition: 3s;
    			z-index: 88;
    			
    		}
    		.mi_nav>li:hover .mi_nav_hidden{ 
    			
    			display: block;
    			
    		}
    		/*以上为导航栏*/
    		
    		/*轮播图*/
    		
    		.car{ 
    			width: 1224px;
    			height:460px;
    			
    			background-image: url(img/轮播图1.jpg);
    			background-size:cover;
    			margin-left: 118px;
    			animation: lunbo 10s infinite alternate;
    			position: relative;
    		}
    		
    		@-webkit-keyframes lunbo{ 
    			0%{ 
    				background-image: url(img/轮播图1.jpg);
    			}
    			25%{ 
    				background-image: url(img/轮播图2.jpg);
    			}
    			50%{ 
    				background-image: url(img/轮播图3.jpg);
    			}
    			75%{ 
    				background-image: url(img/轮播图4.jpg);
    			}
    			
    		}
    		/*滑动图*/
    		.huadong{ 
    			width:234px;
    			height:460px;
    			background-color: rgba(0,0,0,.5);
    			position: relative;	
    			box-sizing: border-box;
    			
    		}
    		
    		.huadong li{ 
    			height: 40px;
    			line-height: 50px;
    			padding-left: 47px;
    			
    		}
    		
    		.huadong li a{ 
    			color:white;
    			
    		}
    		.huadong>ul{ 
    			margin-top: 30px;
    			text-align: left;
    			padding: 0px;
    			
    		}
    		
    		.huadong li:hover{ 
    			background-color: #FF6700;
    			
    		}
    		.huadong span{ 
    			margin-left: 80px;
    			color: white;
    		}
    		
    		.huadong_r{ 
    			width:700px;
    			height:460px;
    			background-image:url(img/手机图像3.jpg);
    			position: absolute;
    			top:0px;
    			left:234px;
    			box-shadow: 5px 5px 10px white ;
    			display: none;
    		}	
    		
    		.huadong li:hover>.huadong_r{ 
    			display: block;
    		}  
    		
    		.prev,.next{ 
    			top:50%;
    			font-size: 30px;
    			position: absolute;
    			display:block;
    			color: white;
    			cursor: pointer;
    		}
    		
    		.prev{ 
    			left:234px;
    		}
    		.next{ 
    			left:1200px;
    		}
    		/*轮播结束*/
    		
    		/*小广告位*/
    		.ad{ 
    			margin-top:15px;
    			margin-left:117.5px;
    			height: 180px ;
    			
    		}
    		.ad>ul,.ad>img{ 
    			float:left;
    			
    		}
    		.ad>img{ 
    			width:316px;
    			height:170px;
    			
    		}
    		.ad>ul{ 
    			width:234px;
    			height:170px;
    			background-color: #5F5750;
    			margin-top: 0px;
    			padding: 0px;
    			
    			
    		}
    		.ad>ul>li{ 
    			font-size:12px;
    			color:white;
    			float:left;
    			margin-left: 0px;
    			width:70px;
    			height:64px;
    			text-align: center;
    			border-right:3px solid #665e57;
    			
    		}
    		
    		
    		.im{ 
    			width:24px;
    			height:24px;
    		}
    		.ad>ul>li:nth-child(3),.ad>ul>li:nth-child(6){ 
    			border-right:none;
    		}
    		
    		.before{ 
    			margin-bottom: 18px;
    			margin-top:22px;
    			border-bottom: 3px solid #665e57; 
    			
    		}
    		.ad>img{ 
    			margin-left: 14.6px;
    		}
    		
    		/*小米闪购*/
    		.sg{ 
    			margin-top:40px;
    		}
    		.sg h2{ 
    			float: left;
    			font-weight: normal;
    			padding:0px;
    			margin:0px;
    			margin-left:117.5px;
    			opacity: .6;
    		}
    		.sg_arrow{ 
    			float:right;
    			margin-right:314px;
    		}
    		
    		.sg_arrow>span{ 
    			border:solid 1px #E0E0E0;
    			width:36px;
    			height:24px;
    			display:inline-block;
    			text-align: center;
    			font-weight: bold;
    			opacity: .6;
    			cursor: pointer;
    		}
    		
    		.sg_arrow>span:hover{ 
    			color:#ff6700;
    			
    		}
    		.sg_box>div{ 
    			
    			width:234px;
    			height:339px;
    			background-color: #fafafa;
    			float: left;
    			margin-right: 15px;
    			
    		}
    		.sg_box{ 
    			clear: both;
    			padding-top:20px;
    			margin-left: 117.5px;
    			
    		}
    		.sg_box>div:first-child{ 
    			border-top:1px solid #e53935;
    		}
    		.sg_box>div:nth-child(2){ 
    			border-top:1px solid #ffac13;
    		}
    		.sg_box>div:nth-child(3){ 
    			border-top:1px solid #83c44e;
    		}
    		.sg_box>div:nth-child(4){ 
    			border-top:1px solid #2196f3;
    		}
    		.sg_box>div:nth-child(5){ 
    			border-top:1px solid purple;
    		}
    		
    		.sg_item1>img{ 
    			width: 234px;
    			height:339px;
    		}
    		.sg_item>img{ 
    			width:160px;
    			margin-top:25px
    		}
    		.sg_item{ 
    			text-align: center;
    		}
    		.sg_item>h4{ 
    			font-weight: normal;
    		}
    		
    		.sg_item>p{ 
    			font-size: 12px;
    			color:#b0b0b0;
    		}
    		.sg_item>span{ 
    			color:#FF6700;
    		}
    		.sg_item span del{ 
    			color:#b0b0b0;
    		}
    		.sg_item2{ 
    			width:1230px;
    			margin-top:20px;
    		}
    		
    		/*手机商品*/
    		.phone_container{ 
    			background-color: #f5f5f5;
    			width:100%;
    			padding-top:20px;
    			margin-top: 40px;
    			margin-left:117.5px;
    			width:1232px;
    			height: 730px;
    			overflow: hidden;
    			
    		}
    		
    		.phone_box>h2{ 
    			text-align: left;
    			font-weight: normal;
    			margin-left: 8px;
    		}
    		.phone_box>h2>a{ 
    			/*float:right;*/
    			float: right;
    			
    			font-size: 18px;
    			color:#333333;
    			margin-right: 8px;
    	
    			
    		}
    		.phone_box>h2>a:hover{ 
    			color:#FF6700;
    			transition: 1.5s;
    		}
    		.item_left,.item_right{ 
    			height:614px;
    			float:left;
    		}
    		.item_left{ 
    			width:234px;
    			
    		}
    		.item_left>img{ 
    			width:234px;
    			height:614px;
    		}
    		.item_right{ 
    			width:992px;
    		}
    		.item_right>div{ 
    			width:234px;
    			height:300px;
    			background-color:pink;
    			float:left;
    			margin-left: 14px;
    
    			
    		}
    		.item_right>div:nth-child(1),.item_right>div:nth-child(2),
    		.item_right>div:nth-child(4),.item_right>div:nth-child(3){ 
    			margin-bottom: 14px;;
    		}
    		.item_right>div>img{ 
    			height:300px;
    			width:234px;
    			
    		}
    		.item_right>div>h4,.item_right>div>span{ 
    			left:20px;
    		
    			
    		}
    		
    		.item_left:hover,.item_right>div:hover{ 
    			transform:translate(0px,-5px);
    			box-shadow:10px 15px 10px 15px rgba(0,0,0,0.01);
    			transition: .5s;
    		}
    		.phone_qg{ 
    			width:1230px;
    			margin-left: 117.5px;
    		}
    		
    		/*固定图*/
    		.fix{ 
    			border:solid 1px #f5f5f5;
    			position: fixed;
    			left:1415px;
    			top:108px;
    			
    			
    		}
    		.fixed{ 
    			
    			height:100px;
    			width:100px;
    			
    			border-bottom: solid 1px  #f5f5f5 ;
    			text-align: center;
    			cursor: pointer;
    			
    		}
    		.fixed>img{ 
    			width:100%;
    		}
    		.fixed:hover{ 
    			color:#FF6700;
    			
    		}
    		.fixed>span{ 
    			opacity: .5;
    		}
    		
    		/*手机抢购隐藏样式*/
    		.zi{ 
    			position: relative;
    			width:234px;
    			height:300px;
    			overflow: hidden;
    		}
    		.zii{ 
    			height:80px;
    			width:100%;
    			position: absolute;
    			top:100%;
    			
    			
    			
    		}
    		.zii>img{ 
    			width:234px;
    			height:80px;
    		}
    		.zi:hover .zii{ 
    			top:220px;
    			transition: 2s;
    			
    		}
    		
    		</style>
    		
    	
    		
    	
    	</head>
    	<body>
    		<div class="fix">
    			<div class="fixed">
    				<img src="img/固定图.jpg" alt="" />
    				<span>手机APP</span>
    			</div>
    			<div class="fixed">
    				<img src="img/固定图2.jpg" alt="" />
    				<span>手机APP</span>
    			</div>
    			<div class="fixed">
    				<img src="img/固定图3.jpg" alt="" />
    				<span>手机APP</span>
    			</div>
    			<div class="fixed">
    				<img src="img/固定图4.jpg" alt="" />
    				<span>手机APP</span>
    			</div>
    			<div class="fixed">
    				<img src="img/固定图5.jpg" alt="" />
    				<span>手机APP</span>
    			</div>
    		</div>
    		
    		<div class="white_nav">
    			<img src="img/小米图标.jpg" alt=""  class="logo"/>
    			<ul class="mi_nav">
    				<li><a href="">小米手机</a>
    					<div class="mi_nav_hidden">
    						
    					</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>
    				<li><a href="">路由器</a></li>
    				<li><a href="">智能硬件</a></li>
    				<li><a href="">服务</a></li>
    				<li><a href="">社区</a></li>
    				<li class="search">
    					<input type="text" /><button class="iconfont">&#xe6e4</button>
    					
    				</li>
    			</ul>
    		</div>
    		
    		<div class="wrap car">
    			
    			<div class="huadong">
    				<ul>
    					<li><a href="">手机 电话卡</a><span>></span>
    						<div class="huadong_r">
    							
    						</div>
    					</li>
    					<li><a href="">电视 盒子</a>   <span>></span>
    						<div class="huadong_r">
    							
    						</div>
    					</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="">健康 儿童</a>   <span>></span></li>
    					<li><a href="">耳机 音箱</a>   <span>></span></li>
    					<li><a href="">生活 箱包</a>   <span>></span></li>
    					
    					
    				</ul>
    				
    				</div>
    					
    				<div class="arrow">
    				
    					<span class="prev"><</span>
    					<span class="next">></span>
    				</div>
    		
    			</div>
    		
    		<div class="wrap ad">
    				<ul>	
    					<li class="before"><img src="img/字体图标1.jpg" alt="" class="im"/><br />小米秒杀</li>
    					<li class="before"><img src="img/字体图标2.jpg" alt="" class="im"/><br />企业团购</li>
    					<li class="before"><img src="img/字体图标3.jpg" alt="" class="im"/><br />F码通道</li>
    					<li><img src="img/字体图标4.jpg" alt="" class="im"/><br />米粉卡</li>
    					<li><img src="img/字体图标5.jpg" alt="" class="im"/><br />以旧换新</li>
    					<li><img src="img/字体图标6.jpg" alt="" class="im"/><br />话费充值</li>					
    				</ul>
    				<img src="img/小广告1.jpg" alt="" />
    				<img src="img/小广告2.jpg" alt="" />
    				<img src="img/小广告3.jpg" alt="" />
    		</div>
    			
    		
    		<div class="wrap sg">
    			<div>
    				<h2>小米闪购</h2>
    				<div class="sg_arrow">
    					<span><</span><span>></span>
    				</div>
    			</div>
    			<div class="sg_box">
    				<div class="sg_item1"><img src="img/抢购图1.jpg" alt="" /></div>
    				<div class="sg_item">
    					<img src="img/抢购图2.jpg" alt="" />
    					<h4>米家智能家庭家具看护套装</h4>
    					<p>智能家庭家具</p>
    					<span>259元 <del>270</del></span>
    				</div>
    				<div class="sg_item">
    					<img src="img/抢购图2.jpg" alt="" />
    					<h4>米家智能家庭家具看护套装</h4>
    					<p>智能家庭家具</p>
    					<span>259元 <del>270</del></span>
    					
    				</div>
    				<div class="sg_item">
    					<img src="img/抢购图2.jpg" alt="" />
    					<h4>米家智能家庭家具看护套装</h4>
    					<p>智能家庭家具</p>
    					<span>259元 <del>270</del></span>
    					
    				</div>
    				<div class="sg_item">
    					<img src="img/抢购图2.jpg" alt="" />
    					<h4>米家智能家庭家具看护套装</h4>
    					<p>智能家庭家具</p>
    					<span>259元 <del>270</del></span>
    				</div>
    				
    				<img src="img/抢购图3.jpg" alt="" class="sg_item2" />
    			</div>
    			
    		</div>
    		
    		<div class="phone_container">
    			<div class="wrap">
    				<div class="phone_box">
    					<h2>手机 <a href="">查看全部</a></h2>
    				</div>
    		
    				<div class="phone_item">
    					<div class="item_left"><img src="img/手机图像1.jpg" alt="" /></div>
    					<div class="item_right">
    						<div class="zi"><img src="img/手机图像2.jpg" alt="" />
    							<div class="zii">
    								<img src="img/手机信息.jpg" alt="" />
    							</div>
    						</div>
    						<div class="zi"><img src="img/手机图像3.jpg" alt="" />
    							<div class="zii">
    								<img src="img/手机信息.jpg" alt="" />
    							</div>
    						</div>
    						<div class="zi"><img src="img/手机图像4.jpg" alt="" />
    							<div class="zii">
    								<img src="img/手机信息.jpg" alt="" />
    							</div>
    						</div>
    						<div class="zi"><img src="img/手机图像5.jpg" alt="" />
    								<div class="zii">
    								<img src="img/手机信息.jpg" alt="" />
    							</div>
    						</div>
    						<div class="zi"><img src="img/手机图像6.jpg" alt="" />
    								<div class="zii">
    								<img src="img/手机信息.jpg" alt="" />
    							</div>
    						</div>
    						<div class="zi"><img src="img/手机图像7.jpg" alt="" />
    								<div class="zii">
    								<img src="img/手机信息.jpg" alt="" />
    							</div>
    						</div>
    						<div class="zi"><img src="img/手机图像8.jpg" alt="" />
    								<div class="zii">
    								<img src="img/手机信息.jpg" alt="" />
    							</div>
    						</div>
    						<div class="zi"><img src="img/手机图像9.jpg" alt="" />
    								<div class="zii">
    								<img src="img/手机信息.jpg" alt="" />
    							</div>
    						</div>
    					</div>
    				</div>
    				
    			</div>
    			
    		</div>
    		<img src="img/抢购图9.jpg" alt="" class="phone_qg"/>
    		
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/c08f5e29fa584784aeaaf66bcee63c8b.png