前端project之小米商城

最新推荐文章于 2024-09-05 08:55:47 发布
置顶 最新推荐文章于 2024-09-05 08:55:47 发布
阅读量472 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36294146/article/details/104787267
本文介绍了如何构建一个前端项目，以小米商城为例，详细展示了index.html和index.js的实现，同时提供完整CSS和图片素材的获取方式。

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

效果如下：

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>小米商城</title>
	<link rel="shortcun icon"  href="favicon.ico" type="image/x-icon">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" 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 Location</a>
			</div>
			<div class="topbar-cart"><a href=""><i class="iconfont">&#xe61a</i> 购物车<span>(0)</span></a></div>
			<div class="topbar-info clearfix"> 
				<a href="">登录</a><span>|</span>
				<a href="">注册</a><span>|</span>
				<a href="" class="seq">消息通知</a>
			</div>
		</div>		
	</div>
	
	<div class="header">
		<div class="container">
			<div class="header-log">
				<a href="#" class="lr">小米官网</a>
			</div>
			<div class="header-nav">
				<ul class="nav-list clearfix">
					<li class="nav-category">
						<a href="">全部商品分类</a>
					</li>
					<li class="nav-item">
						<a href="">小米手机</a>
					</li>
					<li class="nav-item">
						<a href="">Redmi 红米</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="keyword" class="search-text">
					<input type="submit" value="&#xf00d9" class="search-btn iconfont">
				</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>18:00</em><span><em>即将开始<br>距开始01:25</em></span></li>
					<li><em>20：00</em><span>即将开始</span></li>
					<li><em>22：00</em><span>即将开始</span></li>
					<li><em>00：00</em><span>明日开始</span></li>
					<li><em>08：00</em><Span>明日开始</Span></li>
				</ul>
			</div>
			<div  id="lists" class="seckill-goods">
				<ul class="clearfix active">
					<li>
						<div class="bg"><img src="img/1.png" alt=""></div>
						<div class="info">
							<a href="" class="name">小米移动电源4c 20000mah</a>
							<p class="tips">高增益天线，信号更强 </p>
							<p class="price">59元<del>99元</del></p>
							<a href="" class="btn">登录后抢购</a>
							<p>已有886977人设置提醒</p>	
						</div>
					</li>
				</ul>
				<ul class="clearfix">
					<li>
						<div class="bg"><img src="img/2.png" alt=""></div>
						<div class="info">
							<a href="" class="name">小米移动电源4c 20000mah</a>
							<p class="tips">高增益天线，信号更强 </p>
							<p class="price">59元<del>99元</del></p>
							<a href="" class="btn">登录后抢购</a>
							<p>已有886977人设置提醒</p>	
						</div>
					</li>
				</ul>
				<ul class="clearfix">
					<li>
						<div class="bg"><img src="img/3.png" alt=""></div>
						<div class="info">
							<a href="" class="name">小米移动电源4c 20000mah</a>
							<p class="tips">高增益天线，信号更强 </p>
							<p class="price">59元<del>99元</del></p>
							<a href="" class="btn">登录后抢购</a>
							<p>已有886977人设置提醒</p>	
						</div>
					</li>
				</ul>
				<ul class="clearfix">
					<li>
						<div class="bg"><img src="img/1.png" alt=""></div>
						<div class="info">
							<a href="" class="name">小米移动电源4c 20000mah</a>
							<p class="tips">高增益天线，信号更强 </p>
							<p class="price">59元<del>99元</del></p>
							<a href="" class="btn">登录后抢购</a>
							<p>已有886977人设置提醒</p>	
						</div>
					</li>
					<li>
						<div class="bg"><img src="img/2.png" alt=""></div>
						<div class="info">
							<a href="" class="name">小米移动电源4c 20000mah</a>
							<p class="tips">高增益天线，信号更强 </p>
							<p class="price">59元<del>99元</del></p>
							<a href="" class="btn">登录后抢购</a>
							<p>已有886977人设置提醒</p>	
						</div>
					</li>  
				</ul>
				<ul class="clearfix">
					<li>
						<div class="bg"><img src="img/3.png" alt=""></div>
						<div class="info">
							<a href="" class="name">小米移动电源4c 20000mah</a>
							<p class="tips">高增益天线，信号更强 </p>
							<p class="price">59元<del>99元</del></p>
							<a href="" class="btn">登录后抢购</a>
							<p>已有886977人设置提醒</p>	
						</div>
					</li>
				</ul>
			</div>
			<p class="seckill-notice">*小米商偶活动规则，小米闪购商品不享受该商品在小米商城<br>的优惠政策（包括但不限于优惠券，赠品）</p>
		</div>
	</div>

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

index.js

var tabs = document.getElementById("tabs").getElementsByTagName("li");
var lists = document.getElementById("lists").getElementsByTagName("ul");
console.log(lists);
for( var i=0;i<tabs.length;i++){
    tabs[i].onclick = onshows;
}

function onshows(){
    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 seckillNav = document.getElementById(seckillNav);

window.onscoll = function() {
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0;/*解决不同浏览器兼容问题*/
    console.log(scrollTop);
    if(scrollTop >=260)
        seckillNav.className = "seckill-nav seckill-navfixed";
    else {
        seckillNav.className = "seckill-nav";
    }
}

想要完整的css和图片素材的可以留言。

小米商城html
01-03
利用css和html布局网页
小米商城html项目实战，js+css+html
12-12
小米商城html项目实战，js+css+html
【Web前端】小米商城项目实战HTML+CSS+JavaScript
不会敲代码的程序员
09-15 9075
1、小米商城源码html 2、小米商城源码 github 3、小米商城源码项目h5 4、仿小米商城html网页源码 3.1、首页（index.html） 3.2、登录（login.html） 3.3、注册（register.html） 3.4、详情（plus5.html） 3.5、订单（order.html） 3.6、购物车（trolley.html）
微信小程序小米商城，前端代码无后台
07-20
小米商城微信小程序，前端代码无后台，所有数据都是直接调用小米商城的url，因此没法自己更新，可以用来来学习使用。
前端web小米商城实现
何金银的博客
01-04 464
红色部分，鼠标悬停出现内容。
JavaWeb仿小米在线商城ShoppingMall
06-30
JavaWeb在线商城开发知识总结(java+jsp+servlet+MySQL+jdbc+css+js+jQuery) 可以实现浏览商品，查看商品详情，添加购物车，计算价格等功能 项目文章：...
模仿小米商城前端页面开发
08-08
在本项目中，“模仿小米商城前端页面开发”是一项旨在学习和实践前端开发技术的任务，主要涉及HTML、CSS和JavaScript这三种核心技术。这三个标签分别代表了网页的结构、样式和交互功能，是现代网页开发的基础。 ...
基于Vue+Nodejs+Bootstrap实现的仿小米商城购物商城源码(前端+后端)+运行教程+数据库.zip
01-11
基于Vue+Nodejs+Bootstrap实现的仿小米商城购物商城源码(前端+后端)+运行教程+数据库.zip 这是我使用Vue和NodeJs进行实战的一个项目，我选择了小米商城进行仿制，我从2023年8月份开始制作，断断续续做了很久现在做的...
project1-xiaomi:项目一：仿小米有品电脑端商城
05-25
该项目名为"project1-xiaomi"，是一个旨在仿照小米有品电脑端商城的个人开发项目。作为开发者初次尝试独立完成的作品，它展示了基础的网页设计和前端开发技能，包括HTML、CSS、JavaScript以及jQuery的运用。这个项目...
Mi_Project:用HTML+CSS实现小米商城主页面的搭建
05-10
在本项目“Mi_Project:用HTML+CSS实现小米商城主页面的搭建”中，我们将深入探讨如何使用HTML和CSS这两种基础的网页制作语言来构建一个类似小米商城的网站主页。这个项目是学习前端开发和实践网页布局技巧的一个理想...
小米商城前端页面显示html设计
06-11
小米商城页面设计，对小白友好的设计示例，有需要的可以看看
小米官网前端页面代码
01-10
小米官网前端页面代码
js小米商城商品加入购物车代码.zip
07-04
js小米商城商品加入购物车代码是一款鼠标点击商品上的加入购物车按钮，商品自动加入购物车特效。
小米官网前端代码.rar
03-05
本资源完整还原小米官网静态页面，包含html，css以及页面包含的所有图片及字体，字体符号使用方法，请参考阿里巴巴矢量图库官网：https://www.iconfont.cn/。效果预览链接：https://blog.csdn.net/Y_qilin_/article/details/109556701?spm=1001.2014.3001.5501
小米商城前端静态网页
06-18
静态小米商城首页。 下半部分由于全是图片的填充，不想做重复工作，所以只是划分了块，有需要的自己填充图片即可。
HTML静态网页成品作业(HTML+CSS)—— 小米商城首页网页(1个页面)
weixin_42283461的博客
06-11 907
HTML静态网页成品作业(HTML+CSS)—— 小米商城首页网页(1个页面)
小米商城界面项目HTML+CSS代码
Johana_C的博客
07-14 2316
小米商城界面项目HTML+CSS代码以及相应的图片资源。
小米商城[毕业设计，期末考试，前端开发]——完整源码、图片
最新发布
qq_68182211的博客
09-05 1658
小米商城电脑端，用于毕设，前端
小米商城（HTML、CSS）
Wykkee557的博客
11-30 1267
【代码】小米商城（HTML、CSS）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值