小米闪购首页实战（HTML+CSS+JS）

1.效果图如下

2.CSS代码如下（style.css）

body,ul,li
{
	margin:0;
	padding:0;
	
}
body
{
	height:2500px;
}
ul
{
	list-style:none;
}
/*解决高度塌陷*/
.container::before,.container::after,.clearfix::before,.clearfix::after
{
	content:"";
	display:table;
}
.container::after,.clearfix::after
{
	clear:both;
}
/*顶部CSS样式*/
.topbar
{
	background-color:#333;
	height:40px;
	
}
.container
{
	margin:0 auto;
	width:1226px;
	
}
.topbar-nav
{
	float:left;
	height:40px;
	line-height:40px;
	font-size:0;
}
.topbar-info,.topbar-cart
{
	float:right;
	height:40px;
	line-height:40px;
	font-size:0;
	
}
.topbar span
{
font-size:12px;
color:#666;	
font-family:sans-serif;
	margin:0.5em;
}
a
{
	text-decoration:none;
	
}
.topbar a
{
	color:#999;
	font-size:12px;
	
}
.topbar a:hover
{
	color:#FFF;
}
.topbar-cart a:hover
{
	background-color:#FFF;
	color:#ff6700
}
.topbar-info
{
	margin-right:25px;
}
/*头部导航栏CSS样式*/
.header
{
	height:100px;
	
}
.header-logo
{
	float:left;
	width:62px;
	margin-top:22px;
	
}
.header-logo img
{
	height:55px;
	width:55px;
}

.header-nav
{
	float:left;
	width:820px;
	height:100px;
}
.header-nav .nav-list
{
	width:820px;
	height:88px;
	font-size:16px;
	padding:12px 0 0 30px;
}
.header-nav .nav-list .nav-category
{
	float:left;
	width:127px;
	padding:0 15px 0 0;
}
.header-nav .nav-list .nav-category a
{
	display:block;
	text-align:right;
	padding:26px 0 38px;
	color:#333;
}
.header-nav .nav-list .nav-item
{
	float:left;
}
.header-nav .nav-list .nav-item a
{
	display:block;
	padding:26px 10px 38px;
	color:#333;
	
}
.header-nav .nav-list .nav-item a:hover
{
	
	color:#ff6700;
	
}
.header-search
{
	float:right;
	width:296px;
	height:50px;
	margin-top:25px;
}
/*最右边的搜索框样式*/
.header-search .search-form
{
	display:block;
	width:296px;
	height:50px;
	position:relative;
}
.header-search .search-form .search-text
{
	display:block;
	position:absolute;
	top:0;
	right:51px;
	width:245px;
	height:50px;
	line-height:50px;
	border:1px solid #e0e0e0;
	outline:0;
}
.header-search .search-form .search-button
{
	display:block;
	position:absolute;
	top:0;
	right:0;
	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-color:#ff6700;
	color:#fff;
}
/*主体设计样式*/
.seckill
{
	background-color:#f5f5f5;
}
.seckill-header
{
	background:url(../img/mm.jpg) no-repeat 50% 0;
	height:170px;
	margin-top:19px;
}
.seckill-nav
{
	margin:-68px 0 22px;
}
.seckill-navfixed
{
	position:fixed;
	top:60px;
}
.seckill-nav em
{
	display:inline-block;
	font-style:normal;
	font-size:18px;
	line-height:1;/*和字体一样大*/
	vertical-align:middle;
	margin-left:30px;
}
.seckill-nav span
{
	display:inline-block;
	margin-left:15px;
	text-align:left;
	line-height:1;
	vertical-align:middle;
	font-size:14px;
}
.seckill-nav ul
{
	height:68px;
	background:#414141;
}
.seckill-nav ul li span em
{
	display:inline-block;
	font-size:14px;
	margin-left:0;
	font-style:normal;
	text-align:left;
	line-height:20px;
}
.seckill-nav li
{
	display:block;
	color:#fff;
	width:20%;
	text-align:center;
	float:left;
	height:68px;
	line-height:68px;
	cursor:pointer;/*鼠标形状*/
	
}
.seckill-nav .active
{
	background-color:#F00;
}
.seckill-goods ul
{
	margin-right:-13px;
	display:none;/*隐藏多余商品*/
}
.seckill-goods .active
{
	display:block;
}

.seckill-goods li
{
	float:left;
	width:400px;
	height:190px;
	background-color:#fff;
	margin-right:13px;
	margin-bottom:13px;
}
.seckill-goods .bg
{
	float:left;
	width:190px;
	height:190px;

}
.seckill-goods .bg img
{
	height:190px;
}
.seckill-goods .info
{
    margin-left:210px;
	width:190px;
	height:190px;
	padding-top:30px;
	
}
.seckill-goods .info .name
{
	font-size:16px;
	color:#333;
	height:16px;
	display:block;
	white-space:nowrap;/*取消换行*/
	overflow:hidden;/*隐藏多余部分*/
	text-overflow:ellipsis;/*显示点*/
	line-height:16px;
	
}
.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;
}
.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;
	line-height:28px;
	text-align:center;
	background-color:#f1393a;
	font-size:14px;
	color:#fff;
	margin-top:19px;
	border:1px solid #f1393a;
	
}
.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;
}

3.矢量图标CSS样式（iconfont.css）
说明：这个可以自己去阿里巴巴的网页下载，网站链接，且里面有使用说明，需要将iconfont.css和iconfont.eot都放在CSS文件夹下面。
阿里巴巴网站的页面图

4.js代码如下（xm.js）

// JavaScript Document
//JS控制标签切换显示
//获取ul里的li标签
var tabs=document.getElementById("tabs").getElementsByTagName("li");
var lists=document.getElementById("lists").getElementsByTagName("ul");
//给每一个li绑定单击响应事件
for(var i=0;i=260)
  {
	  sck.className="seckill-nav seckill-fixed";
  }
  else
  {
	  sck.className="seckill-nav";
	  
  }
};

5.完整代码

小米商城|
MIUI|
IoT|
云服务|
金融|
有品|
小爱开放平台|
政企服务|
资质证照|
协议规则|
下载app|
Select Region|


购物车（0）


登录|
注册|
消息通知|









 
 全部商品分类
 
 小米手机
 
 红米
 
电视
 
 笔记本
 
 家电
 
 新品
 
 路由器
  
智能硬件
 
 服务
 
  社区














22:00抢购中
距结束 01:22:47
 
00:00 明日开始
 
10:00 明日开始
 
 12:00 明日开始
 
14:00 明日开始







60cm柔软米兔抱枕 蓝色 
大尺寸趴姿米兔
25元 129元

登录后抢购
已有1245人设置提醒





米兔遥控小飞机套装 
迷你酷玩具，溜到起飞
458.00元 488元

登录后抢购
已有12465人设置提醒





小黄鸡米兔 黄色 
Q萌造型 让心融化
9.90元 49元

登录后抢购
已有465人设置提醒







米家 LED 智能台灯 典雅白 
照明之上，光的艺术品
158.00元 169元

提醒我
已有145人设置提醒





米兔儿童手表3 4G 红色 
新增移动支付功能
539.00元 599元

登录后抢购
已有15人设置提醒







13.3"小米笔记本Air 银色  
双核i3 8G 128G 集显
25元 129元

提醒我
已有45人设置提醒





小米手环3 黑色 
全新OLED可触摸大屏
9.90元 169元

登录后抢购
已有18015人设置提醒







经典款米兔（25cm） 白色  
Q萌升级，做你的贴心玩伴
9.90元 49元

提醒我
已有245人设置提醒







小米活塞耳机 清新版 黑色  
新鲜绽放，五色可选
9.90元 29元

提醒我
已有3675人设置提醒




*小米闪购活动规则：小米闪购商品不享受该商品在小米商城的其他优惠政策（包括但不限于优惠券、赠品、满减、满赠等）

温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，请您立即联系小米客服，以便我们及时补正。

6.图片素材
m.jpg

xm1.jpg

xm2.jpg

xm3.jpg

xm4.jpg

xm5.jpg

xm6.jpg

xm7.jpg

xm8.jpg

xm9.jpg