当前位置：
  1. 首页
  2. html
  3. 正文
本文介绍: 小米商城首页仿写

前言

  1. 本demo会在文章结尾附上所有素材和源码
  2. 笔者是跟随B站视频上教程编写该demo，当然有自己的东西在里面和他有些不一样，比如侧边栏模块。但是大体都差不多，附上视频地址链接: 前端Web小米商城项目
  3. 虽然只是一个不起眼的小首页仿写，但是是笔者从0到1自己手撸的，所以还是请遵循转载协议（虽然也没人会看哈哈）
  4. 本demo运用到了较多的文字图标icon，全部来源于阿里图标矢量库 iconfont
  5. 其余所有图片素材，均为小米官网自行下载，如有侵权，联系删除

界面展示

顶部导航栏

轮播图

网站主体内容

网站底部

在这里插入图片描述

侧边导航栏

源码及素材

  • 部分代码截图
    在这里插入图片描述
  • html部分 
    <!-- 黑色导航栏 -->
	<div class="black-nav">
		<!-- 导航栏版心 -->
		<div class="wrap"&gt;
			<ul class="left-nav"&gt;
				<li&gt;<a href="#"&gt;小米官网</a&gt;<span&gt;|</span&gt;</li>
				<li><a href="#">小米商城</a><span>|</span></li>
				<li><a href="#">MIUI</a><span>|</span></li>
				<li><a href="#">loT</a><span>|</span></li>
				<li><a href="#">云服务</a><span>|</span></li>
				<li><a href="#">天星数科</a><span>|</span></li>
				<li><a href="#">有品</a><span>|</span></li>
				<li><a href="#">小爱开放平台</a><span>|</span></li>
				<li><a href="#">企业团购</a><span>|</span></li>
				<li><a href="#">资质证照</a><span>|</span></li>
				<li><a href="#">协议规则</a><span>|</span></li>
				<li>
					<a href="#">下载app</a>
					<!-- 小三角 -->
					<div class="triangle"></div>
					<!-- 二维码 -->
					<div class="download">
						<img src="./images/download.png" alt="">
						<p>小米商城APP</p>
					</div>
					<span>|</span>
				</li>
				<li><a href="#"> Select Location</a></li>
			</ul>
			<ul class="right-nav">
				<li><a href="#">登录</a><span>|</span></li>
				<li><a href="#">注册</a><span>|</span></li>
				<li><a href="#">消息通知</a></li>
				<li class="cart">
					<a href="#"><i class="iconfont">&#xe62c;</i>购物车(0)</a>
					<!-- 购物车的悬停显示 -->
					<div class="cart-list">
						购物车中还没有商品，赶紧选购吧！
					</div>
				</li>
			</ul>
		</div>
	</div>

	<!-- 白色导航栏 -->
	<div class="white-header">
		<div class="wrap">
			<!-- 小米logo -->
			<div class="mi-logo">
				<div class="logo">
					<a href="#">
						<img src="./images/logo-mi2.png" alt="">
					</a>
				</div>
			</div>
			<!-- 导航栏 -->
			<div class="middle-nav">
				<ul class="nav">
					<li>
						<a href="#">Xiaomi手机</a>
						<div class="nav-list">
							<div class="wrap">
								<ul>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi 13 Pro</p>
											<p class="nav-price">4999元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi 13 Pro</p>
											<p class="nav-price">4999元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi 13 Pro</p>
											<p class="nav-price">4999元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi 13 Pro</p>
											<p class="nav-price">4999元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi 13 Pro</p>
											<p class="nav-price">4999元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/11e28a0a7c6a2ca07f0dc2044d3858c2.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi 13 Pro</p>
											<p class="nav-price">4999元起</p>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">Redmi手机</a>
						<div class="nav-list">
							<div class="wrap">
								<ul>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt="">
											</div>
											<p class="nav-name">Redmi 12C</p>
											<p class="nav-price">699元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt="">
											</div>
											<p class="nav-name">Redmi 12C</p>
											<p class="nav-price">699元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt="">
											</div>
											<p class="nav-name">Redmi 12C</p>
											<p class="nav-price">699元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt="">
											</div>
											<p class="nav-name">Redmi 12C</p>
											<p class="nav-price">699元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt="">
											</div>
											<p class="nav-name">Redmi 12C</p>
											<p class="nav-price">699元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8d5c2622cf50cf3d1a00c3753a2bf070.webp" alt="">
											</div>
											<p class="nav-name">Redmi 12C</p>
											<p class="nav-price">699元起</p>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">电视</a>
						<div class="nav-list">
							<div class="wrap">
								<ul>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8871821795310769c1d3896c99b12381.webp" alt="">
											</div>
											<p class="nav-name">Redmi智能电视X55 2022</p>
											<p class="nav-price">2199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8871821795310769c1d3896c99b12381.webp" alt="">
											</div>
											<p class="nav-name">Redmi智能电视X55 2022</p>
											<p class="nav-price">2199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8871821795310769c1d3896c99b12381.webp" alt="">
											</div>
											<p class="nav-name">Redmi智能电视X55 2022</p>
											<p class="nav-price">2199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8871821795310769c1d3896c99b12381.webp" alt="">
											</div>
											<p class="nav-name">Redmi智能电视X55 2022</p>
											<p class="nav-price">2199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8871821795310769c1d3896c99b12381.webp" alt="">
											</div>
											<p class="nav-name">Redmi智能电视X55 2022</p>
											<p class="nav-price">2199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/8871821795310769c1d3896c99b12381.webp" alt="">
											</div>
											<p class="nav-name">Redmi智能电视X55 2022</p>
											<p class="nav-price">2199元起</p>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">笔记本</a>
						<div class="nav-list">
							<div class="wrap">
								<ul>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi Book Air 13</p>
											<p class="nav-price">5399元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi Book Air 13</p>
											<p class="nav-price">5399元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi Book Air 13</p>
											<p class="nav-price">5399元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi Book Air 13</p>
											<p class="nav-price">5399元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi Book Air 13</p>
											<p class="nav-price">5399元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/55c17a67fff345d161ae55b9fb0d6f6a.webp" alt="">
											</div>
											<p class="nav-name">Xiaomi Book Air 13</p>
											<p class="nav-price">5399元起</p>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">平板</a>
						<div class="nav-list">
							<div class="wrap">
								<ul>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt="">
											</div>
											<p class="nav-name">Redmi Pad</p>
											<p class="nav-price">1199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt="">
											</div>
											<p class="nav-name">Redmi Pad</p>
											<p class="nav-price">1199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt="">
											</div>
											<p class="nav-name">Redmi Pad</p>
											<p class="nav-price">1199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt="">
											</div>
											<p class="nav-name">Redmi Pad</p>
											<p class="nav-price">1199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt="">
											</div>
											<p class="nav-name">Redmi Pad</p>
											<p class="nav-price">1199元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/a887139f3995c4cac2a167e014ffd91e.webp" alt="">
											</div>
											<p class="nav-name">Redmi Pad</p>
											<p class="nav-price">1199元起</p>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">家电</a>
						<div class="nav-list">
							<div class="wrap">
								<ul>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt="">
											</div>
											<p class="nav-name">米家冰箱对开门610L墨羽岩</p>
											<p class="nav-price">2499元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt="">
											</div>
											<p class="nav-name">米家冰箱对开门610L墨羽岩</p>
											<p class="nav-price">2499元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt="">
											</div>
											<p class="nav-name">米家冰箱对开门610L墨羽岩</p>
											<p class="nav-price">2499元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt="">
											</div>
											<p class="nav-name">米家冰箱对开门610L墨羽岩</p>
											<p class="nav-price">2499元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt="">
											</div>
											<p class="nav-name">米家冰箱对开门610L墨羽岩</p>
											<p class="nav-price">2499元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/531efbd4fd88b64a94079436851f56f1.webp" alt="">
											</div>
											<p class="nav-name">米家冰箱对开门610L墨羽岩</p>
											<p class="nav-price">2499元起</p>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li>
						<a href="#">路由器</a>
						<div class="nav-list">
							<div class="wrap">
								<ul>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt="">
											</div>
											<p class="nav-name">Redmi路由器AX3000</p>
											<p class="nav-price">219元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt="">
											</div>
											<p class="nav-name">Redmi路由器AX3000</p>
											<p class="nav-price">219元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt="">
											</div>
											<p class="nav-name">Redmi路由器AX3000</p>
											<p class="nav-price">219元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt="">
											</div>
											<p class="nav-name">Redmi路由器AX3000</p>
											<p class="nav-price">219元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt="">
											</div>
											<p class="nav-name">Redmi路由器AX3000</p>
											<p class="nav-price">219元起</p>
										</a>
									</li>
									<li>
										<a href="#">
											<div class="img-box">
												<img src="./images/04ff53409d1bf0f3471c133c8c70102f.webp" alt="">
											</div>
											<p class="nav-name">Redmi路由器AX3000</p>
											<p class="nav-price">219元起</p>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li><a href="#">服务中心</a></li>
					<li><a href="#">社区</a></li>
				</ul>
			</div>
			<!-- 搜索框 -->
			<div class="search">
				<form action="">
					<input type="text" placeholder="耳机">
					<button class="iconfont"></button>
				</form>
			</div>
		</div>
	</div>

源码获取

原文地址:https://blog.csdn.net/wjw89/article/details/129874926

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_6145.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 [HTML]Web前端开发技术5.1（HTML5、CSS3、JavaScript ）CSS基础，selector，properties，font，Cascading，@import——喵喵画网页
下一篇 HTML5中一些酷炫又有趣的新特性代码整理汇总

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。