ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

【项目】小米闪购

2019-05-07 20:48:38  阅读：273  来源： 互联网

标签：597 项目 6GB height 闪购 2099.00 双频 小米


1.图片展示
在这里插入图片描述

2.HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小米闪购-小米商城</title>
<link rel="shortcut icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon" />
<link rel="dns-prefetch" href="//a.huodong.mi.cn">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
	<div class="topbar">
		<div class="container">
			<div class="topbar-nav">
				<a href="">小米商城</a><span>|</span>
				<a href="">MIUI</a><span>|</span>
				<a href="">IoT</a><span>|</span>
				<a href="">云服务</a><span>|</span>
				<a href="">金融</a><span>|</span>
				<a href="">有品</a><span>|</span>
				<a href="">小爱开放平台</a><span>|</span>
				<a href="">企业团购</a><span>|</span>
				<a href="">资质证照</a><span>|</span>
				<a href="">协议规则</a><span>|</span>
				<a href="">下载app</a><span>|</span>
				<a href="">Select Region</a>
			</div>
			
			<div class="topbar-cart">
				<a href=""><i class="iconfont">&#xe60c;</i>购物车<span>（0）</span></a>
			</div>
			
			<div class="topbar-info">
				<a href="">登录</a><span>|</span>
				<a href="">注册</a><span>|</span>
				<a href=""class="sep">消息通知</a><span>|</span>
			</div>
				
		</div>
	</div>
	<div class="header">
		<div  class="container">
			<div class="header-logo">
				<a href="" class="lr">小米官网</a>
			</div>
			<div class="header-nav">
				<ul class="nav-list">
					<li class="nav-category clear-fix"><a href="">全部商品分类</a></li>
					<li class="nav-item"><a href="">小米手机</a></li>
					<li class="nav-item"><a href="">红米</a></li>
					<li class="nav-item"><a href="">电视</a></li>
					<li class="nav-item"><a href="">笔记本</a></li>
					<li class="nav-item"><a href="">家电</a></li>
					<li class="nav-item"><a href="">新品</a></li>
					<li class="nav-item"><a href="">路由器</a></li>
					<li class="nav-item"><a href="">智能硬件</a></li>
					<li class="nav-item"><a href="">服务</a></li>
					<li class="nav-item"><a href="">社区</a></li>
				</ul>
			</div>
			<div class="header-search">
				<form action="" class="search-form">
					<input type="search" name="keyboard"class="search-text"/>
					<input type="submit"value="&#xe616;"class="search-button iconfont"/>
					<div class="search-hot-words">
						<a href="">小米9</a>
						<a href="">小米9 SE</a>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="seckill">
		<div class="seckill-head"></div>
		<div class="container">
			<div id="seckillNav" class="seckill-nav">
				<ul id="tabs">
					<li class="active"><em>16:00</em><span>即将开始</span></li>
					<li><em>18:00</em><span>即将开始</span></li>
					<li><em>20:00</em><span><em id="demo">即将开始<br/>距开始 03:53:18 </em></span></li>
					<li><em>10:00</em><span>明日开始</span></li>
					<li><em>20:00</em><span>明日开始</span></li>
				</ul>
			</div>
			<div class="seckill-goods" id="lists">
				<ul class="clearfix active">
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/1.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
				</ul>
				<ul>
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/2.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
				</ul>
				
				<ul>
					<li>
						<div class="bg"><img src="img/6.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/6.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/6.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/6.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/6.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/6.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/6.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/3.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/3.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
				</ul>
				
				<ul>
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/4.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
				</ul>
				
				<ul>
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/5.jpg"/></div>
						<div class="info">
							<a href=""class="name">小米8 移动4G+版 6GB+128GB 蓝色   	
							</a> 
							<p class="tips"> 全球首款双频GPS，骁龙845</p>	
							<p class="price">2099.00元<del>2999元</del></p>	
							<a href=""class="btn">登录后抢购</a>
							<p class="person">已有597人设置提醒</p>
						</div>
					</li>
				</ul>
			</div>
			
			<p class="seckill-notice">
				*小米闪购活动规则：<br/> 
				1.闪购商品是否参加活动，以订单结算页显示为准，活动包括但不限于优惠券、赠品、满减、满赠等；<br/>
				2.闪购商品数量有限，活动以下单支付成功为准，请加入购物车后尽快下单支付；<br/>
				3.闪购价不含运费，最终以订单结算页价格为准。<br/>
				温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，
				请您立即联系小米客服，以便我们及时补正。
			</p>
		</div>
	</div>
	<div class="footer">
		<div class="container">
			<div class="footer-service">
				<ul class="list-service clearfix">
					<li>
						<a href=""><i class="iconfont"></i>预约维修服务</a>
					</li>
					<li>
						<a href=""><i class="iconfont"></i>7天无理由退货</a>
					</li>
					<li>
						<a href=""><i class="iconfont"></i>15天免费换货</a>
					</li>
					<li>
						<a href=""><i class="iconfont"></i>满150元包邮</a>
					</li>
					<li>
						<a href=""><i class="iconfont"></i>520余家售后网点</a>
					</li>
				</ul>
			</div>
			<div class="footer-links clearfix">
				<dl class="col-links col-links-first">
					<dt>帮助中心</dt>
					<dd><a href="">账户管理</a></dd>
					<dd><a href="">购物指南</a></dd>
					<dd><a href="">订单操作</a></dd>
				</dl>
	
				<dl class="col-links">
					<dt><a>服务支持</a></dt>
					<dd><a href="">售后政策</a></dd>
					<dd><a href="">自助服务</a></dd>
					<dd><a href="">相关下载</a></dd>
				</dl>
				<dl class="col-links">
					<dt>线下门店</dt>
				<dd><a href="">小米之家</a></dd>
				<dd><a href="">服务网点</a></dd>
				<dd><a href="">授权体验店</a></dd>
				</dl>
				<dl class="col-links">
					<dt>关于小米</dt>
					<dd><a href="">了解小米</a></dd>
					<dd><a href="">加入小米</a></dd>
					<dd><a href="">投资者关系</a></dd>
				</dl>
				
				<dl class="col-links">
					<dt>关注我们</dt>
					<dd><a href="">新浪微博</a></dd>
					<dd><a href="">官方微信</a></dd>
					<dd><a href="">联系我们</a></dd>
				</dl>
				
				<dl class="col-links">
					<dt>特色服务</dt>
					<dd><a href="">F 码通道</a></dd>
					<dd><a href="">礼物码</a></dd>
					<dd><a href="">防伪查询</a></dd>
				</dl>
				<div class="col-contact">
					<p class="phone">400-100-5678</p>
					<p>周一至周日 8:00-18:00<br/>（仅收市话费）</p>
					<a href="" class="btn">
					<i class="iconfont"></i>联系客服</a>
				</div>
			</div>
			
		</div>
	</div>
	<div class="site-info">
		<div class="container">
			<div class="logo ir">小米官网</div>
			<div class="info-text">
				<p class="sites">
					<a href="">小米商城</a><span>|</span>
					<a href="">MIUI</a><span>|</span>
					<a href="">米家</a><span>|</span>
					<a href="">米聊</a><span>|</span>
					<a href="">多看</a><span>|</span>
					<a href="">游戏</a><span>|</span>
					<a href="">路由器</a><span>|</span>
					<a href="">米粉卡</a><span>|</span>
					<a href="">政企服务</a><span>|</span>
					<a href="">小米天猫店</a><span>|</span>
					<a href="">隐私政策</a><span>|</span>
					<a href="">商城用户协议</a><span>|</span>
					<a href="">账号协议</a><span>|</span>
					<a href="">问题反馈</a><span>|</span>
					<a href="">廉正举报</a><span>|</span>
					<a href="">诚信合规</a><span>|</span>
					<a href="">Select Region</a>
				</p>
				<p class="beian">
					© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号<br/> 
				    （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械公告 <br/>
					增值电信业务许可证  网络食品经营备案（京）【2018】WLSPJYBAHF-12   食品经营许可证 <br/>
					违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
				</p>
			</div>
			<div class="info-links">
				<a href=""><img src="img/truste.png"/></a>
				<a href=""><img src="img/v-logo-2.png"/></a>
				<a href=""><img src="img/v-logo-1.png"/></a>
				<a href=""><img src="img/v-logo-3.png"/></a>
				<a href=""><img src="img/ba10428a4f9495ac310fd0b5e0cf8370.png"/></a>
			</div>

	</div>
<script src="js/index.js"></script>
</body>
</html>

3.CSS

body{
	height:1550px;
	margin: 0;
	padding: 0;
	font: 12px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
	
}
body,ul,li{
	margin: 0;
	padding: 0;
	
	
}
ul{
	list-style-type: none;
}

/* topbar */
.topbar{
	background: #333;
	height: 40px;
	
}

.container{
	/* border:1px solid black; */
	margin: 0 auto;
	width: 1226px;	
}

.container::before,.container::after,
.clear-fix::BEFORE,.clear-fix::AFTER{
	content: "";
	display: table;
}

.container::after,
.clear-fix::AFTER{
	clear: both;
}

a{
	text-decoration: none;
}

.topbar a{
	color: #b0b0b0;
	font-size: 12px;
}
.topbar a:HOVER{
	color: #fff;
}

.topbar-nav{
	float: left;
	height: 40px;
	line-height: 40px;
	font-size: 0;
}

.topbar-nav span{
	font-size: 12px;
	color: #424242;
	font-family: sans-serif;
	margin: 0.5em;
}


.topbar-info,.topbar-cart{
	float: right;
}


.topbar-cart a{
	display: block;
	height: 40px;
	line-height: 40px;
	text-align: center;
	width: 120px;
	background: #424242;
}

.topbar-cart a:HOVER{
	background: #fff;
	color: #ff6700;
}

.topbar-cart span{
	margin-left: -4px;
	font-size: 12px;
}

.topbar-cart i{
	font-size: 20px;
	line-height: 20px;
	margin-right: 10px;
	vertical-align: -4px;
	
}
.topbar-info a{
	float:left;
	padding: 0 5px;
	line-height: 40px;
	height: 40px;
}
.topbar-info span{
	float:left;
	font-size: 12px;
	color: #424242;
	font-family: sans-serif;
	line-height: 40px;
	height: 40px;
}
.topbar-info{
	margin-right: 15px;
}
.topbar-info .sep{
	
	padding-right: 10px;
}
/*  header */
.header{
	height: 100px;
	
}
.header .header-logo{
	height:55px;
	float: left;
	width: 62px;
	margin-top: 22px;
	/* border: 1px solid black; */
}
.header .header-logo a{
	display: block;
	width: 55px;
	height: 55px;
	background: #ff6700 url(../img/mi-logo.png) no-repeat 50% 50%;
}
.header .header-logo .lr{
	text-align: left;
	/* text-indent 首行缩进 */
	text-indent: -23000000em;
	
}
/*header nav  */
.header .header-nav{
	height:100px;
	float: left;
	width: 820px;
	/* border: 1px solid black; */
}
.header .header-nav .nav-list{
	width: 820px;
	height: 88px;
	font-size: 16px;
	padding: 12px 0 0 30px;
	
}
.header .header-nav .nav-list .nav-item{
	float: left;
	
}
.header .header-nav .nav-list .nav-category{
	float: left;
	width: 127px;
	padding: 0 15px 0 0;
	
}

.header .header-nav .nav-list .nav-category a{
	display: block;
	text-align:right;
	padding:26px 0 38px;
	color: #333;
}
.header .header-nav .nav-list .nav-item a{
	display: block;
	padding: 26px 10px 38px;
	color: #333;
}
.header .header-nav .nav-list .nav-item a:HOVER{
	color: #ff6700;
}

/* header header-search */
.header .header-search{
	height:50px;
	margin-top:25px;
	float: right;
	width: 296px;
/* 	border: 1px solid black; */
}
.header-search .search-form{
	position:relative;
	display: block;
	height: 50px;
	width: 296px;
}
.header-search .search-form .search-text{
	position:absolute;
	top:0;
	right:51px;
	display: block;
	width: 245px;
	height: 50px;
	line-height: 50px;
	border: 1px solid #e0e0e0;
	outline: 0;
}
.header-search .search-form .search-hot-words a{
	display: inline-block;
	margin-left: 5px;
	padding: 0 5px;
	font-size: 12px;
	background: #eee;
	color: #616161;
	transition: all .2s;
}
.header-search .search-form .search-hot-words a:-webkit-any-link{
	cursor: pointer;
	
}
.header-search .search-form .search-hot-words a:HOVER{
	color:#fff;
	background: #ff6700; 
}
.header-search .search-form .search-hot-words {
    position: absolute;
    top: 14px;
    right: 62px;
    z-index: 2;
    text-align: right;
}
.header-search .search-form .search-button{
	position:absolute;
	top:0;
	right:0;
	display: block;
	width: 52px;
	height: 50px;
	border: 1px solid #e0e0e0;
	font-size: 24px;
	line-height: 24px;
	background: #fff;
	color: #616161;
	outline: 0;
	
}
.header-search .search-form .search-button:HOVER {
	background: #ff6700;
	color: #fff;
}
/* seckill */
.seckill{
	background-color: #f5f5f5;
	
}
.seckill-head{
	background: url(../img/seckill-head.jpg) no-repeat 50% 50%;
	height: 170px;
	margin-top: 19px;
}
.seckill-nav{
	margin:-68px 0 22px;
	height: 68px;
	background: #414141;
	width: 1226px;
}
.seckill-navfixed{
	position: fixed;
	top:60px;
	
}
.seckill-nav li{
	display: block;
	float:left;
	color: #fff;
	width: 20%;
	line-height: 68px;
	text-align: center;
	cursor: pointer;
}
.seckill-nav li em{
	margin-left:30px;
	display: inline-block;
	font-style: normal;
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
}
.seckill-nav li span{
	margin-left:15px;
	display: inline-block;
	text-align: left;
	line-height: 1;
	vertical-align: middle;
	font-size: 14px;
}
.seckill-nav li span em{
	display: inline-block;
	font-size: 14px;
	margin-left: 0;
	font-style: normal;
	text-align: left;
	line-height: 20px;
}
.seckill-nav .active{
	background-color: #f1393a;	
} 
.seckill-goods .active{
	display: block;
	
}
.seckill-goods ul{
	display:none;
	margin-right: -13px;
	
}
.seckill-goods li{
	float:left;
	width: 400px;
	height: 190px;
	background: #fff;
	/* border: 1px solid black; */
	margin-right: 13px;
	margin-bottom: 13px;
}
.seckill-goods .bg{
	float: left;
	width: 190px;
	height: 190px;
	/* border: 1px solid red; */
}
.seckill-goods .bg img{
	height: 190px;
}
.seckill-goods .info{
	padding-top:30px;
	margin-left:210px;
	width: 190px;
	height: 190px;
	/* border: 1px solid black; */
}
.seckill-goods .info .name{
	font-size: 16px;
	color: #333;
	height: 16px;
	line-height: 16px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.seckill-goods .info .tips{
	font-size: 12px;
	line-height: 12px;
	color: #b0b0b0;
	margin-top: 10px;
}
.seckill-goods .info .price{
	font-size: 16px;
	line-height: 16px;
	color: #f1393a;
	margin-top: 14px;
	margin-bottom: 0;
	/* border: 1px solid #f1393a; */
}
.seckill-goods .info .price del{
	color:#999;
	font-size: 12px;
	line-height: 12px;
	margin-left: 10px;
}
.seckill-goods .info .btn{
	display: inline-block;
	width: 118px;
	height: 28px;
	font-size: 14px;
	color: #fff;
	line-height: 28px;
	text-align: center;
	background-color: #fe393a;
	margin-top: 19px;
}

.seckill-goods .info .person{
	font-size: 12px;
	line-height: 12px;
	color: #999;
	margin-top: 10px;
}
.seckill-notice{
	font-size: 12px;
	color: #999;
	margin-top: 100px;
	padding-bottom: 35px;
}
.footer{
	display:block;
}
.footer .container{
	/* border:1px solid red; */
	
}
.footer-service{
	padding: 27px 0;
	border-bottom: 1px solid #e0e0e0;
	display: block;
}
.footer-service .list-service{
	margin-bottom: 27px;
}
.list-service li{
	float: left;
    width: 19.8%;
    height: 25px;
   /*  border-left: 1px solid #e0e0e0; */
    font-size: 16px;
    line-height: 25px;
    text-align: center;
	
}
.list-service li a{
	color: #757575;
	
}
.list-service li a:HOVER{
	color: #ff6700;
	
}
.col-links{
	display:block;
	float:left;
	width: 160px;
    height: 112px;
    margin: 0;
    margin: 1em 0;
}
.col-links dl{
	
}
.col-links dt{
	padding-left:39px;
	margin: -1px 0 26px;
    font-size: 14px;
    line-height: 1.25;
    color: #424242;
}
.col-links dd{
	margin: 10px 0 0;
    font-size: 12px;
    margin: 0 0 0 40px;
    padding:3px 0;
}
.col-links dd a{
	color: #757575;
}
.col-links dd a:HOVER{
	color: #ff6700;
}

.col-contact{
	float: right;
	width: 251px;
    height: 112px;
    border-left: 1px solid #e0e0e0;
    text-align: center;
}
.col-contact p{
	display: block;
	margin: 0 0 16px;
    font-size: 12px;
}
.col-contact .phone{
	padding-top:20px;
	font-size:22px; 
	color:#ff6700;
	line-height: 1;
	margin: 10px 0 5px;
}	

.btn-line-primary{
	border-color: #ff6700;
    background: #fff;
    color: #ff6700;
}
.btn {
    display: inline-block;
    width: 158px;
    height: 25px;
    padding: 0;
    margin-top:-5px;
    border: 1px solid #ff6700;
    font-size: 13px;
    line-height: 25px;
    text-align: center;
    background: #fff;
 	color: #ff6700;
}
.btn:HOVER{
	background: #ff6700;
 	color: #fff;
}
iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
   
}

.site-info{
	/* border: 1px solid black; */
	padding: 30px 0;
	font-size: 12px;
	background-color: #fafafa;
}
.site-info .container{
	position: relative;
	display: block;
}
.site-info .container .logo{
	position:absolute;
	width: 57px;
    height: 57px;
 /*   	border: 1px solid black; */
   	margin-right: 10px;
   	top: 15px;
   	left: 0;
   	background: #ff6700 url(../img/mi-logo.png) no-repeat 50% 50%;
}
.site-info .container .ir {
    display: block;
    text-indent: -20000em;
    text-align: left;
    overflow: hidden;
} 
.site-info .container .info-text{
	/* border: 1px solid red; */
	padding-left: 67px;
}
.site-info .container .info-text .sites{
/* 	border: 1px solid green;  */
	
}
.site-info .container .info-text .sites a {
	text-decoration: none;
	color: #b0b0b0;
	padding: 0 8px;
}
.site-info .container .info-text .sites span{
	color: #b0b0b0;
}
.site-info .container .info-text .sites a:HOVER {
	color: #ff6700;
}
.site-info .container .info-text .beian{
	color:#b0b0b0;
}


.site-info .info-links {
    height: 28px;
    margin: 4px 0 0;
    padding-left: 67px;
}
.site-info .info-links img{
	height: 28px;
	width: 85px;
}

3.JS

/*得到seckill-nav类下的所有li*/
var tabs=document.getElementById("tabs").getElementsByTagName("li");

/*得到seckill-goods类下的所有ul*/
var lists=document.getElementById("lists").getElementsByTagName("ul");
for(var i=0;i<tabs.length;i++){
	tabs[i].onclick=showList;
	
	
}

function showList(){
	for(var i=0;i<tabs.length;i++){
		if(tabs[i]===this){
			tabs[i].className="active";
			lists[i].className="clearfix active";
			
		}else{
			tabs[i].className="";
			lists[i].className="clearfix";
		}
	}
}
/*获取滚动条滚动的高度*/
var scrollTop=document.documentElement.scrollTop;
window.onscroll=function(){
	/*获取滚动条滚动的高度*/
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||window.pageXOffset||0;
	/*兼容性问题   若老版本或除了谷歌 火狐document.body.scrollTop*/
	var seckillNav=document.getElementById("seckillNav");
	if(scrollTop>=260&&scrollTop<=674){
		seckillNav.className="seckill-nav seckill-navfixed";
	}
	else{
		seckillNav.className="seckill-nav";
	}
};

var demo = document.getElementById("demo");
var endTime = new Date(); // 最终时间
setInterval(clock,1000); // 开启定时器
function clock(){
 var nowTime = new Date(); // 一定是要获取最新的时间
 var sec=nowTime.getSeconds();
 var min=nowTime.getMinutes();
 var h=nowTime.getHours();
 var str="";
	
	if(h<20){
		if(20-h<10){
			str="0"+(20-h-1)+":"+(60-min)+":"+(60-sec);
		}
		else{
			str=(20-h-1)+":"+(60-min)+":"+(60-sec);
		}
	}
	else{
		str=(44-h-1)+":"+(60-min)+":"+(60-sec);
	}
	demo.innerHTML="即将开始"+"<br/>"+"距开始"+str;
}

标签：597,项目,6GB,height,闪购,2099.00,双频,小米
来源： https://blog.csdn.net/weixin_39843945/article/details/89928892

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有