小米闪购商城的基本结构还原
html代码
小米头戴式耳机
好声音，伴你整个青春
9.90元
199元
提醒我
已有27018人设置提醒
米家驱蚊器 白色
长效驱蚊 静享一整个夏天
1.00元
59元
提醒我
已有27018人设置提醒
小米指环支架 银色
钻进手机的小“圈套”
1.00元
19元
提醒我
已有27018人设置提醒
小米手环2腕带 绿色
多彩腕带 出色生活
16.90元
19.9元
提醒我
已有27018人设置提醒
九号平衡车 白色
年轻人的酷玩具
1949.00元
1999元
提醒我
已有27018人设置提醒
小米移动电源
大容量，一个就够用
119.00元
129元
提醒我
已有27018人设置提醒
小米多功能都市休闲胸...
装下你出行的所有需求
59.00元
69元
提醒我
已有27018人设置提醒
天然气报警器
安全保障持续“在线”
179.00元
100元
提醒我
已有27018人设置提醒
米兔积木矿山卡车 白色
小零件，拼接出大乐趣
89.00元
99元
提醒我
已有27018人设置提醒
米家空气净化器
净化室内空气看不见的细菌
139.00元
159元
提醒我
已有27018人设置提醒
小米净水器
有效滤除抗生素，重金属，细菌
469.00元
499元
提醒我
已有27018人设置提醒
小米路由器
全新一代智能家庭中心
398.00元
499元
提醒我
已有27018人设置提醒
*小米闪购活动规则：小米闪购商品不享受该商品在小米商城的其他优惠政策（包括但不限于优惠券、赠品、满减、满赠等）
温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，请您立即联系小米客服，以便我们及时补正。
+
css代码
*{
margin: 0;
padding: 0;
}
body{
height: 1500px;
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
.topbar{
background: #333;
height: 40px;
}
.topbar .container{
height: 40px;
width: 1226px;
margin: 0 auto;
color: #b0b0b0;
}
.topbar a{
color: #b0b0b0;
text-decoration: none;
font-size: 12px;
}
.container::before,.container::after{
content: "";
display: table;
}
.container::after{
clear: both;
}
.topbar-nav{
float: left;
}
.topbar-info{
float: right;
}
.topbar-cart{
float: right;
}
.topbar-nav span{
font-size: 12px;
margin: 0.5em;
color: #424242;
font-family: sans-serif;
}
.topbar-nav{
height: 40px;
line-height: 40px;
font-size: 0;
}
.topbar-nav a:hover{
color: #fff;
}
.topbar-cart a{
display: block;
height: 40px;
line-height: 40px;
text-align: center;
width: 120px;
background-color: #404040;
}
.topbar-cart a:hover{
background-color: #fff;
color: #ff6700;
}
.topbar-cart span{
margin-left: -4px;
font-size: 12px;
}
.topbar-info a{
display: inline-block;
height: 40px;
line-height: 40px;
text-align: center;
}
.topbar-info a:hover{
color: #fff;
}
.topbar-info .xiaoxi{
padding: 0 15px;
}
.topbar-info{
margin-right:5px;
}
.topbar-info a{
float: left;
padding: 0 5px;
line-height: 40px;
height: 40px;
}
.topbar-info span{
float: left;
line-height: 40px;
height: 40px;
font-family: sans-serif;
font-size: 12px;
color: #424242;
}
.site-header{
height: 100px;
position: relative;
}
.site-header .container{
margin: 0 auto;
height: 100px;
width: 1226px;
}
.logo{
background-color: #ff6700;
width: 55px;
height: 55px;
background-size: 55px 55px;
display: block;
line-height: 55px;
text-align: center;
font-size: 30px;
}
.head-logo{
margin-top: 22px;
float: left;
width: 62px;
height: 55px;
}
.head-nav{
float: left;
width: 820px;
height: 88px;
padding: 13px 0 0 60px;
margin-top: 25px;
}
.head-nav span{
width: 127px;
padding-right: 15px;
cursor: pointer;
text-align: right;
color: #333;
font-size: 16px;
}
.head-search{
float: right;
height: 50px;
margin-top:25px;
position:relative;
}
.site-header a{
color: #fff;
text-decoration: none;
}
.search-form{
display: block;
height: 50px;
}
.header-search .search-form .search-text{
display: block;
width: 245px;
height: 50px;
line-height: 50px;
border: 1px solid #e0e0e0;
outline: 0;
}
.search-text{
right: 51px;
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
}
.search-btn{
right: 0;
top: 0;
width: 52px;
height: 50px;
font-size: 24px;
line-height: 24px;
background: #fff;
color: #616161;
}
.search-text:hover{
border-color: black;
}
.header-search .search-form .search-btn{
display: block;
width: 52px;
height: 50px;
border: 1px solid #e0e0e0;
font-size: 24px;
line-height: 24px;
background: #fff;
color: #616161;
outline: 0;
}
.search-btn:hover{
color: #fff;
background-color: orange;
}
.head-nav span:hover{
color: orange;
}
.seckill{
background: #f5f5f5;
margin-top: 20px;
}
.seckill-head{
background: url(img/01.jpg) 50% 0 no-repeat;
height: 170px;
}
.seckill-banner{
background-color: #414141;
height: 68px;
margin-bottom: 22px;
width: 1226px;
margin: -68px auto 0;
}
.seckill-banner ul{
width: 100%;
overflow: hidden;
height: 68px;
background-color: #414141;
}
.seckill-banner li{
width: 20%;
cursor: pointer;
line-height: 68px;
height: 68px;
text-align: center;
float: left;
list-style: none;
}
.active{
background: #f1393a;
}
.seckill-banner a{
color: #fff;
text-decoration: none;
cursor: pointer;
}
.seckill-banner em{
display: inline-block;
margin-left: 20px;
font-size: 18px;
font-style: normal;
line-height: 1;
vertical-align: middle;
}
.seckill-banner span em{
display: inline-block;
margin-left: 15px;
text-align: left;
line-height: 1.5;
vertical-align: middle;
font-size: 14px;
}
/商品/
.seckillCon ul{
list-style: none;
}
.seckill-con{
width: 1226px;
margin: 0 auto;
padding-top: 20px;
}
.seckillCon ul{
margin-left: -13px;
}
.seckillCon ul li{
background: #fff;
width: 400px;
height: 190px;
margin-left: 13px;
margin-bottom: 13px;
float: left;
}
.img-com{
width: 190px;
height: 190px;
float: left;
margin-left: 0;
padding-top: 0;
background: #e9e9e9;
border: 0 none;
overflow: hidden;
}
.img-com .done{
width: 100%;
height: 190px;
display: block;
padding: 0 ;
border-style: none;
}
.pro-con{
margin-left: 25px;
padding-top: 30px;
position: absolute;
}
.pro-con .name{
font-size: 16px;
color: #333;
height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
line-height: 16px;
}
.desc{
margin-top: 10px;
color: rgba(0,0,0,0.54);
font-size: 12px;
line-height: 35px;
}
.price{
font-size: 16px;
color: #f1393a;
margin-top: 0px;
display: block;
}
.price del{
margin-left: 10px;
font-size: 12px;
color: rgba(0,0,0,0.54);
}
.callme{
margin-top: 14px;
font-size: 14px;
background-color: #83c44e;
background: #83c44e;
color: #fff;
width: 118px;
height: 28px;
line-height: 28px;
text-align: center;
display: block;
}
.callme:hover{
background-color: green;
}
.askme{
color: rgba(0,0,0,0.54);
font-size: 12px;
margin-top: 10px;
position: absolute;
}
.seckill-last{
font-size: 12px;
color: rgba(0,0,0,0.27);
margin:100px auto 35px;
width: 1226px;
}
.site-footer{
width: 1226px;
margin:0 auto;
}
.footer-servier{
border-bottom: 1px solid #e0e0e0;
}
.footer-service li{
float: left;
width: 19.8%;
height: 25px;
border-right: 1px solid #e0e0e0;
font-size: 16px;
line-height: 25px;
text-align: center;
list-style: none;
border-left: 0;
margin-top: 50px;
}
.footer-service a{
color: #616161;
text-decoration: none;
}
.footer-service .last{
border-right: 0;
}
.footer-service a:hover{
color: orange;
}
js代码 （计时器）
var h = 1,
m=59,
s=0;
t=0;
setInterval(function(){
h--;
s--;
t++;
if(h<=0){
h=0;
}
if(s<=0){
s=59;
}
if(t>=2&&s<=0){
m--;
}
document.getElementById("hour").innerHTML = "00"+":";
document.getElementById("min").innerHTML = m+":";
document.getElementById("fen").innerHTML = s;
},1000);