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

最新推荐文章于 2024-06-24 20:51:47 发布

dweblover

最新推荐文章于 2024-06-24 20:51:47 发布

阅读量7k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： h5 JavaScript CSS 文章标签：小米官网网页实战源代码+图片素材

本文链接：https://blog.youkuaiyun.com/dweblover/article/details/87298890

本文介绍了如何构建小米闪购首页，包括HTML、CSS和JS的实战应用。提供了CSS样式表(style.css)、矢量图标样式(iconfont.css)以及JavaScript代码(xm.js)，并附带了完整的代码和一系列图片素材。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}
.s