小米商城项目实战（二）

最新推荐文章于 2026-06-20 23:35:20 发布
原创 最新推荐文章于 2026-06-20 23:35:20 发布 · 825 阅读 · 4
标签
#html5 #css
本文详细介绍了在小米商城项目中使用iconfont图标的三种方法：本地图片使用、font-class引用和字体文件本地化。通过具体步骤指导如何在HTML和CSS中实现图标展示，并展示了导航栏的HTML结构和CSS样式。

补充上篇关于如何使用 iconfont 图标

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  1. 方式一：下载图片到本地直接使用
    此种方式适合用在图标引用特别少，以后也不需要特别维护的场景
    在这里插入图片描述

  2. 方式二：font-class 引用
    相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    第一步：复制项目下面生成的fontclass代码，引入头部：
    在这里插入图片描述

    第二步：挑选相应图标并获取类名：
    在这里插入图片描述

  3. 方式三：将字体文件下载到本地添加到项目中
    第一步：打包好的字体文件下载到本地：
    在这里插入图片描述

    第二步：解压的文件都放在一个文件夹内，然后放在项目目录中,再在项目中引入iconfont.css文件：
    在这里插入图片描述

其他更多方式详见官网

一、效果

在这里插入图片描述

二、导航栏HTML

<!--导航S-->
		<div class="page-nav">
			<div class="container">
				<img src="img/images/mi-logo.png" alt="" class="logo">
					<ul class="nav">
						<li class="nav-item" id="page-all-nav">
							<a href="" id="all-nav" style="font-size: 16px;">全部商品分类</a>
							<!--全部分类下拉菜单-->
							<div class="slider-nav">
								<ul class="slider-ul">
									<li class="slider-li">
										<a href="" class="name">
											<span>手机</span>
											<i class="iconfont icon-xiangyou"></i>
										</a>
										<div class="slider-pop">
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
	
										</div>
									</li>
									<li class="slider-li">
										<a href="" class="name">
											<span>电视</span>
											<i class="iconfont icon-xiangyou"></i>
										</a>
										<div class="slider-pop">
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
										</div>
									</li>
									<li class="slider-li">
										<a href="" class="name">
											<span>笔记本</span>
											<span>平板</span>
											<i class="iconfont icon-xiangyou"></i>
										</a>
										<div class="slider-pop">
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											
										</div
最低0.47元/天 解锁文章
简洁大气uniapp商城项目模板完整（可发布各类APP、小程序）
10-28
一套完整的uniapp商城项目模板，可发布各家小程序APP（ios、安卓），本模板不含后端API接口程序，下载本模板者，推荐使用过 uniapp 的程序员或相关前端工程师下载使用。 项目代码经过实际应用测试完全可用。 注：项目中涉及的图片人物仅供参考请勿直接使用。
前后端全部开源微信小程序商城（Java + uniapp）
04-04
减少重复造轮子，开源微信小程序商城（前后端开源：uniapp+Java）。快速搭建一个属于自己的微信小程序商城
前端小白入门必修-小米商城开发实战（下）
06-18
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
手把手教你做小米商城-商品展示页面
weixin_42839094的博客
04-01 7844
手把手教你做小米商城商品展示页面 思路说明 1 先确定清除基本的默认样式跟基本的css 样式 /* 清除默认样式 */ * { margin: 0; padding: 0; } input { outline: none; border: 0; } a { text-decoration...
【两天搞定小米商城】【第一步】小米商城之初始准备
zhouzhou20002000的博客
08-03 1278
我们写的小米商城 https://www.mi.com/shop，图标文件自行去该网站下载，如搜索图标，购物车图标，箭头图标等， https://www.iconfont.cn/，首先我们开始写小米商城之前，要先引入文件，依次是图标文件、全局样式文件、样式文件 ...
html如何引入iconfont官网图标
qq_61768843的博客
11-06 3265
html如何引入iconfont官网图标
8.8 Web前端-小米商城项目实战
执笔绘江山的博客
08-08 3370
hello大家好，人总是会在写项目的时候发现自己的许多不足之处，然后加以改进，并且记住这些东西，所以今天我给大家带来的是我的第二个项目，小米商城首页的书写。但是还有下拉框，在中盒子中每个小方块下面再定位一个横向盒子，里面填充内容，分隔线用伪类去做，具体做法可以参考我之前的文章，如何用伪类书写分隔线，然后给每一个小方块下方都加上这个，然后给一个移入hover效果，当鼠标移入时，给下面的盒子一个高度就可以了。那么我们先从头部开始，慢慢向下书写整个页面。...
小米商城项目实战(二) 分类导航与字体图标
gf_lvah的博客
06-17 2970
分类导航需求 小米商城官方网站: https://www.mi.com/index.html 阿里巴巴矢量字体图标库: https://www.iconfont.cn/
小米商城项目实战（一）
qq_44512567的博客
08-21 3392
仿小米商城（HTML+CSS+JS） 推荐一个字体图标库，种类丰富，可直接下载保存到本地进行使用，就是这个 iconfont 一、准备工作 1.分析整个设计图 版心宽度 设计图大小 2.公共部分 头部、底部、导航 3.页面中相同的布局 二、顶部HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>小米商城</title> <meta
Html——小米商城网页实战（二）
weixin_42511413的博客
10-22 3675
接上篇博文内容，完成小米商城首页的简单h5实战。 首先总结一下整个首页中htm+css可能涉及的知识点：首先使用最多的就是定位（position），我们要懂得相对定位和绝对定位的区别（近期会针对该元素总结一篇博文），其次另一个需要注意的就是元素的隐藏与悬停显示，需要通过visibility来设置。除此之外，可能还会涉及元素的选择器:nth-child()属性。做出的效果图如下（可能宽高上与原网页有细微差别）： 本文先展示相关的css设置，最后展示html代码。 一、导航栏（nav-bar） nav-bar.
小米商城（Servlet+JSP）
奈何的人生
07-04 9510
文章目录小米商城项目一、Get小米商城项目二、小米商城项目流程展示三、数据库四、项目需求分析 小米商城项目 项目已托管到GitHub，大家可以去GitHub查看下载！并搜索关注微信公众号 码出Offer 领取各种学习资料！ 基于Servlet+JSP开发的小米商城项目，因为项目体量特别小，仅供小伙伴们参考与练习！ 一、Get小米商城项目 项目声明： 该项目为小米商城项目，是一个基于Servlet+JSP开发项目，在此托管到GitHub以作记录，并提供给正在学习的小伙伴练习。此项目不是特别高级严谨
项目实战：小米商城官网及秒杀高仿（html+css+js）
孙叫兽的博客
12-28 1万+
导读：秒杀的检索结果,小米官方网站包含秒杀价格及秒杀适配机型,官方推荐秒杀产品,帮助米粉挑选合适自己的秒杀商品。 效果图： 项目结构： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米官网</title> <link rel="icon" href="img/fav.
CSS 之 iconfont 字体图标的使用
qq_69240236的博客
03-11 1976
学到了吧。
xx闪购—搜索框和iconfont
iheyu(一个新手小白女PHP初学者)
01-09 430
1.做搜索框： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
网页（小米商城）头部编写
qq_63997101的博客
07-15 364
4、总体采用两个，一个是1中提到的带有.header样式的，第二个是包括所有文本的.wrap的准备提前下载好iconfont图标(f放在css中)，建立好css、images、js、index.html。具体操作流程为先在阿里巴巴iconfont中下载图标然后解压文件全部引入到创建的css文件夹中，用浏览器打开下载的demo_index.html，复制粘贴自己需要的图标代码。3、用ul>li*n>a[herf="#"]快捷方式创建两个无序列表。1、引入reset.css。...
【Vue】仿小米商城系统（一）
前端学习博客
05-10 9570
【Vue】仿小米商城系统（一） 文章目录【Vue】仿小米商城系统（一）前言一、项目概述项目介绍商城页面与组件技术栈商城各页面展示商品首页产品站商品详情登录页面：账号 jack 密码 jack订单确认购物车页面订单支付页面支付宝支付微信支付订单列表项目源码：二、项目开发前准备跨域解决jsonpnginx项目目录结构Storage封装接口错误拦截Mock设置集成Mock API（本地集成Mock.js） 前言 本项目是基于Vue全家桶的仿小米商城系统，系列笔记(已完结)如下👇🏻 【Vue】仿小米商城系统（一）
小米商城项目实战(一)顶部导航栏
gf_lvah的博客
06-16 4792
顶部导航栏需求 项目结构 HTML代码 # 编辑文件index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米闪购-小米商城</title> <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> &
仿小米商城html网页源码
热门推荐
IT学长
12-25 2万+
今天跟大家分享下仿小米商城html网页源码，正在学习前端的伙伴可以参考下，html+CSS+JS都是全的。 下载方式：微信公众号【IT学长】回复“小米商城源码”免费下载。 下载后如下图： 首页（index.html） 登录页（login.html） 注册页（register.html） 详情页（plus5.html） 订单页（order.html） 购物车页 ...
从 Canvas 到 Vibe Coding：HTML5 游戏开发入门与 AI 飞机大战实战
meilindehuzi_a的博客
06-16 1820
本文围绕 HTML5 中的 Canvas 技术展开，从网页游戏的发展背景出发，系统介绍了 Canvas 画布的基本概念、绘图上下文获取方式以及常用绘图 API 的使用方法。通过矩形绘制、边框绘制和画布清除等案例，帮助读者理解 Canvas 的坐标体系与绘图原理。随后结合动画示例，深入讲解了浏览器动画实现机制、游戏循环思想以及 `requestAnimationFrame` 的工作原理，并分析其相较于 `setInterval` 的性能优势。
HTML5 Canvas 从入门到动画：把浏览器的画布玩明白
最新发布
2501_93610289的博客
06-20 540
HTML5 带来的新特性里，Canvas 可能是最「不像 Web」的那一个。我们习惯了用 div、span、section 拼页面，习惯了 DOM 树、CSS 盒模型、BFC 这些概念。但 Canvas 完全不按这套逻辑出牌——它只有一个标签<canvas>，剩下的全靠 JS 一笔一笔画出来。没有 DOM 节点，没有样式表，你拿到的是一块像素级的画布，想画什么，代码说了算。这听起来很原始，但恰恰是这种「原始」给了它极大的发挥空间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值