小米商城项目实战（二）

最新推荐文章于 2023-11-15 21:27:59 发布
最新推荐文章于 2023-11-15 21:27:59 发布
阅读量640 收藏 4
点赞数 3
分类专栏： 前端 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44512567/article/details/119860130
版权
本文详细介绍了在小米商城项目中使用iconfont图标的三种方法：本地图片使用、font-class引用和字体文件本地化。通过具体步骤指导如何在HTML和CSS中实现图标展示，并展示了导航栏的HTML结构和CSS样式。
摘要由CSDN通过智能技术生成

补充上篇关于如何使用 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=""/>
												&
最低0.47元/天 解锁文章
是L .啊
关注
专栏目录
2023年最新Flutter+Getx仿小米商城项目实战视频教程-V3版
luckysuny的博客
11-24 1987
透明导航 、浮动导航、导航动画、六格验证码、Photo-view类似朋友圈图片预览、3、 Flutter Android中使用生物识别认证的一些配置。2、 Flutter中使用socket.io和服务器实现通讯。3、 Flutter中使用socket.io和服务器实现通讯。直播流程（推流、拉流）、借助腾讯云直播、自己搭建直播服务器、4、 Flutter Ios中使用生物识别认证的一些配置。二、 AP模式下Flutter和Wifi模块的数据穿透演示。、Flutter 事件驱动、Flutter本地存储。
web前端基础实战项目-小米商城
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
小米商城html项目实战，js+css+html
12-12
小米商城html项目实战，js+css+html
8.11 Web前端-小米商城项目实战
执笔绘江山的博客
08-11 1468
可以看到主要分为上下两个盒子，其中下半部分很好写，四个小盒子用a链接书写内容即可，上班部分是一个难点，首先是占满了整个盒子的轮播图，在这里我用到的是名为swiper的插件，他可以帮我们很方便的解决轮播图的问题，但是另一个问题接踵而至，那就是轮播图占满了整个界面盒子，左侧的商品栏如何显示？除了上面的内容，侧边栏的书写就更容易了，就是一个ul列表下去把每个元素书写在内部，然后就是用position:fixed来定位，这个是可以相对于浏览器窗口定位的方法，调整top值和left值就可以让其固定在想要的位置。...
8.8 Web前端-小米商城项目实战
执笔绘江山的博客
08-08 3168
hello大家好，人总是会在写项目的时候发现自己的许多不足之处，然后加以改进，并且记住这些东西，所以今天我给大家带来的是我的第二个项目，小米商城首页的书写。但是还有下拉框，在中盒子中每个小方块下面再定位一个横向盒子，里面填充内容，分隔线用伪类去做，具体做法可以参考我之前的文章，如何用伪类书写分隔线，然后给每一个小方块下方都加上这个，然后给一个移入hover效果，当鼠标移入时，给下面的盒子一个高度就可以了。那么我们先从头部开始，慢慢向下书写整个页面。...
小米商城项目
12-26
Java开发项目，web用用程序设计开发，有mvc框架，myeclipse运行。
8.12 Web前端-小米商城项目实战
执笔绘江山的博客
08-12 1532
底部上方再次用到了矢量图，来保证移入的效果显示，然后中间是用ul列表制作的文字，每个用a标签包裹起来实现链接功能，最后底部就是图片和文字的结合，使用p标签来包裹不同的文字格式来实现各种效果，整体难度不大，就是内容比较繁琐。hello，各位朋友们大家好，今天我来继续把小米商城的部分说完，最后剩余的部分就是主体和尾部了，这两部分内容相对于前面来说难度较小，只有几个点需要注意一下即可。主体部分内容相对简单，只需注意格式排列以及浮动效果的显示即可。...
个人实战项目仿小米商城
07-04
【个人实战项目仿小米商城】是一个使用Vue.js技术栈实现的电商购物平台的实战项目，旨在帮助开发者提升前端开发技能并熟悉实际项目开发流程。在这个项目中，你将学习到如何构建一个类似小米商城的在线购物网站，涵盖...
小米商城实战vue项目 11 完善router/index.js
maggie
04-09 326
路由配置 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const routes = [ { path: '/', name: 'Home', component: () => import('../views/Home.vue') }, { ...
小米商城个人项目
wwz914的博客
07-24 575
小米商城是本人第一次做的比较完善的小项目，正好做一做来巩固这段时间学的东西，涉及到了接口对接，页面跳转，页面交互等等的一些技术，第一次用接口实现数据传输，构成一个相对完整的项目，对本人来说是个很大的进步，继续努力。需求分析利用三件套，jQuery，Ajax实现项目页面图片信息的传输(利用现有接口)和加载，主要页面为首页和详情页面。
完整小米商城项目.rar
12-16
最最最完整的小米商城项目资源，内含数据库生成代码，使用指导说明 实现功能：后台管理系统的商品管理，订单管理，用户管理 前台页面实现功能： 商品的浏览，详情页，购物车，商品支付
计算机毕业设计 基于Vue的米家商城系统的设计与实现 Java实战项目 附源码+文档+视频讲解
最新发布
m0_74181697的博客
11-15 796
随着互联网技术的不断发展，电子商务已经成为了人们生活中不可或缺的一部分。而商城系统作为电子商务的重要组成部分，其功能和性能直接影响到用户的购物体验和企业的经营效益。因此，开发一款高效、稳定、易用的商城系统具有重要的现实意义。Vue是一种轻量级的前端框架，具有简单易学、高效灵活等特点。基于Vue的米家商城系统可以充分利用Vue的优势，实现快速开发和迭代更新。同时，Vue还具有良好的兼容性和可扩展性，可以适应不同设备和浏览器的需求。
小米商城项目总结
ATT
05-15 7327
脚本中判断是否相等不能用equals，没有这个方法，只能用== 数据库工具类，只需要加载一次就够了，所以我们采用静态代码块来初始化该方法，作为工具类使用 public static QueryRunner qr = null;//因为是在不同包下的，所以要用public才可以调用 Ajax往Servlet发送数据的时候Servlet必须response一个数据，不然会报parsee...
手把手教你做小米商城-商品展示页面
weixin_42839094的博客
04-01 7602
手把手教你做小米商城商品展示页面 思路说明 1 先确定清除基本的默认样式跟基本的css 样式 /* 清除默认样式 */ * { margin: 0; padding: 0; } input { outline: none; border: 0; } a { text-decoration...
基于Vuex实现小米商城购物车
web前端开发
03-10 2789
作者 | hai_27链接 | https://juejin.im/post/5e660ef9518825490276748a前言上学期利用课余时间学习了Vue.js，Node.js，一...
这个高仿小米商城项目，拿来学习再好不过了！
WantFlyDaCheng的博客
03-03 1306
作者 |小海同学啊整理|我是程序汪今天推荐一个高仿电商项目小米商城，vue-store 作者还是学生，利用寒假做的，学生就这么牛逼哄哄，佩服佩服。项目简介本项目前后端分离，前端基于V...
vue集成iconfont、fontawesome和图标选择器（含fontawesome、el-icon和加入的iconfont）
GeniusXYT的博客
06-23 2845
一、将图标加入购物车 阿里巴巴矢量图标库： 二、新建（添加至）项目 右上角的购物车 → 添加至项目 → 进入到项目页面 三、下载后项目中引入 点击下载至本地，解压缩包，只需要这四个文件 此时.ttf和.woff文件已经保存了前面步骤的图标，将其复制于 src/assets/iconfont （看个人爱好） 然后main.js全局引入这个css就行 // 引入自定义iconfont import "@/assets/iconfont/iconfont.css"; 在iconfont.css文件中
【html+css】小米商城学习笔记（22/10/3-22/10/4）
weixin_56105633的博客
10-04 700
小米商城学习笔记（22/10/3-22/10/4） 1.学习网页 2.css基础知识 3.代码相关 1.画三角形 2.鼠标悬停有二维码 3.图标微移 4.去input的样式 5.鼠标悬停hover和鼠标点击focus 6.悬停显示下拉窗口 7.写竖线(分割线) 8.图片保持大小 9.实现图片的切换（类似轮播图，但是效果不是很好)p=7&spm_id_from=pageDriver&vd_source=e3117f7b1f427d925021788f8bf0b81b
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值