57.网页设计图标实战

news/2024/11/26 7:30:37/

首先我们需要找一个图标库,本次演示采用的是heroicon
在这里插入图片描述

● 之后我们根据需求搜索与之想匹配的图标并复制svg代码
在这里插入图片描述

● 之后将我们的代码复制到我们想要放置图标的地方
在这里插入图片描述
在这里插入图片描述

● 当然我们需要使用CSS来修饰一下

.features-icon {stroke: #087f5b;width: 32px;height: 32px;margin-bottom: 16px;
}

在这里插入图片描述

其他的同理即可
在这里插入图片描述

接着我们为我们的产品地方添加图标
在这里插入图片描述

和上面一样,这里我们只展示我们的CSS写法

.chair-icon {stroke: #087f5b;width: 24px;height: 24px;
}

最后的效果是这样的
在这里插入图片描述

其他的复制粘贴上一个就行了
这里教大家一个简单的复制粘贴多个内容的方式

按住ALT键盘可以多选,然后复制
在这里插入图片描述

同样按住ALT,可以多选一些光标,然后进行复制
在这里插入图片描述

点击复制之后就是这样的效果,就全部复制过来了,比较方便
在这里插入图片描述

最终的页面如下图,是不是比不加图标好看了很多,也是的用户阅读体验提高了很多?

在这里插入图片描述


http://www.ppmy.cn/news/55874.html

相关文章

什么是阻抗?影响阻抗的因素有哪些?

问 什么是阻抗? 答 在具有电阻、电感和电容的电路里,对电路中的电流所起的阻碍作用叫做阻抗。 问 什么是阻抗匹配? 答 阻抗匹配是指信号源或者传输线跟负载之间达到一种适合的搭配。阻抗匹配主要有两点作用,调整负载功率和…

使用vue+element-ui实现年月日周时分秒cron表达式

1.首先需要npm下载 npm install cron-parser 和npm install debounce 和npm install iview 2.在main.js中引入 import iView from iview import iview/dist/styles/iview.css Vue.use(iView) 3.新建一个components文件夹,里面放年月日时分秒周的数据 3-1.新建一个co…

linux0.12-8

[288页] 第8章 内核代码 288–8-1-总体功能 288–8-1-1-中断处理程序 289–8-1-2-系统调用处理相关程序 290–8-1-3-其他通用类程序 290–8-2-asm.s程序 290–8-2-1-功能描述 292–8-2-2-代码注释 296–8-2-3-Intel保留中断向量的定义 296–8-3-traps.c程序 296–8-3-1-功能…

【sunny land】利用Animation编辑器实现近战敌人判定

昨晚研究了一晚Boss近战判定,也找了一些方法,但始终找不到合适的 今天终于让我找到了[泪目] 让我们先看演示 这个效果是我们的Boss挥刀时不造成伤害,当火焰冒出来时再对主角造成伤害。 这个我讲详细点吧 步骤: 首先&#xff…

GPT3.5 API使用之配置env环境

文章目录 前言一、注册GPT API二、把openai.api_key导入系统环境变量1.安装库2.api key 导入环境变量3.查看是否导入key成功 前言 提示:这里可以添加本文要记录的大概内容: 为了更好的在python使用gpt3.5,以下快速介绍一下如何使用gpt3.5AP…

Flannel下对容器端口访问的结果

环境如下 rootubuntu:/home/test/Downloads# kubectl get pod -o wide NAME READY STATUS RESTARTS AGE IP NODE NOMINATED NODE READINESS GATES nginx11-86697f68dd-sdj6h 2/2 Running 0 …

计算机网络面试八股文攻略(三)—— HTTP协议

一、基础信息 1.1 基本概念 Http 是一种基于明文的超文本传输协议。 而HTTPS协议是在HTTP协议上传输数据时加入了加密机制。 下面,将根据 HTTP 协议的联通到结束的流程进行讲解。 二、 用户身份的识别 通过 Cookie ,Session 或 Token 实现。 2.1 C…

如何在比特币系统内创造人工生命

信息来源:coingeek.com 自2015年以来,关于比特币能否进行复杂计算以及比特币是否“图灵完备”的争论一直在持续。不幸的是,现在存在着一种流传甚广的谬论,有人说比特币并非图灵完备的,它不能像以太坊区块链那样进行复杂…