当前位置: 首页 > news >正文

57.网页设计图标实战

首先我们需要找一个图标库,本次演示采用的是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,可以多选一些光标,然后进行复制
在这里插入图片描述

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

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

在这里插入图片描述

相关文章:

57.网页设计图标实战

首先我们需要找一个图标库,本次演示采用的是heroicon ● 之后我们根据需求搜索与之想匹配的图标并复制svg代码 ● 之后将我们的代码复制到我们想要放置图标的地方 ● 当然我们需要使用CSS来修饰一下 .features-icon {stroke: #087f5b;width: 32px;height: 3…...

浅析AI视频智能检测技术在城市管理中的场景应用

随着中国的城市建设和发展日益加快,城镇化过程中重建设、轻管理模式带来不少管理难点,传统城管模式存在违法问题多样、缺乏源头治理、业务协同难、取证手段单一等,人员不足问题进一步加剧管理难度。随着移动互联网、物联网、云计算、大数据、…...

unity中的Line Renderer

介绍 unity中的Line Renderer 方法 首先,Line Renderer 是 Unity 引擎中的一个组件,它可以生成直线、曲线等形状,并且在场景中呈现。通常情况下,Line Renderer 被用来实现轨迹、路径、线框渲染以及射线可视化等功能。 在使用 …...

【数据架构系列-06】一文搞懂数据模型的3中类型——概念模型、逻辑模型、物理模型

数据模型就是模拟现实世界的方法论,是通向智慧世界的基石! 从现实世界发展到智慧世界,要数经历现实世界、信息世界、计算机世界、数据世界、智慧世界五个不同的世界,我们天生具有从混沌的世界抽象信息变为信息世界的能力&#xff…...

Java——Java面向对象

该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架。 概述: Java是面向对象的程序…...

MyBatis:生命周期、作用域、结果集映射 ResultMap、日志、分页、使用注解开发、Lombok

文章目录 MyBatis:Day 02一、生命周期和作用域二、结果集映射:ResultMap三、日志工厂1. 标准日志:STDOUT_LOGGING2. LOG4J 四、分页五、使用注解开发六、Lombok注意: MyBatis:Day 02 一、生命周期和作用域 理解不同作…...

PostgreSQL安装和开启SSL加密连接【配置双向认证】

SSL单向认证和双向认证: SSL单向认证:只有一端校验对端的证书合法性,通常都是客户端来校验服务器的合法性。即在一般的单向认证中,只要求服务器端部署了ssl证书就行,客户端可以无证书,任何用户都可以去访问…...

【ShenYu系列】ShenYu Dubbo插件全流程源码解析

网关启动 在ShenyuConfiguration注入ShenyuWebHandler。 Bean("webHandler")public ShenyuWebHandler shenyuWebHandler(final ObjectProvider<List<ShenyuPlugin>> plugins, final ShenyuConfig config, Lazy final ShenyuLoaderService shenyuLoaderS…...

spring解决循环依赖的三级缓存

一、Spring在创建Bean的过程中分三步 实例化&#xff0c;对应方法&#xff1a;AbstractAutowireCapableBeanFactory中的createBeanInstance方法&#xff0c;简单理解就是new了一个对象。属性注入&#xff0c;对应方法&#xff1a;AbstractAutowireCapableBeanFactory的populat…...

C++ - 标准库(STL)

目录 一、简介 二、什么时候使用STL 2.1、 vector 和 deque 的使用场景 2.2、 vector 和 deque 的比较 2.3、 list的使用场景 一、简介 C标准库是C编程语言的标准程式库&#xff0c;它提供了一个通用的容器类、算法和函数模板库。 其中包括了多种容器类型&#xff0c;例…...

Java使用 Scanner连续输入int, String 异常错误输出原因分析

目录 一、Scanner常用语法 1、sc.nextInt()介绍 2、sc.next()介绍 3、sc.nextLine()介绍 4、sc.hasNext()介绍 二、报错案例 1、使用next()来接收带有空格的字符串会输出异常 2、先输入数字再输入字符串的输出异常 一、Scanner常用语法 Scanner sc new Scanner(System.…...

pt13网络编程

网络编程 OSI 7层模型 建立了统一的通信标准 降低开发难度&#xff0c;每层功能明确&#xff0c;各司其职 七层模型实际规定了每一层的任务&#xff0c;该完成什么事情 TCP/IP模型 七层模型过于理想&#xff0c;结构细节太复杂在工程中应用实践难度大实际工作中以TCP/IP模型…...

华为云 绑定/更换证书

操作场景 为了支持HTTPS数据传输加密认证&#xff0c;在创建HTTPS协议监听的时候需绑定证书&#xff0c;您可以参考本章节绑定证书。如果弹性负载均衡实例使用的证书过期或者其它原因需要更换&#xff0c;您可以参考本章节更换证书。如果还有其他的服务也使用了待更换的证书&a…...

重大问题,Windows11出现重大BUG

重大问题&#xff0c;Windows11出现重大BUG 这种Windows11操作系统出现BUG已经可以说是非常常见的&#xff0c;但是&#xff0c;今天我将代表所有微软用户&#xff0c;解决一个关于UI设计非常不舒服的功能 关闭多平面覆盖 事情叙述问题 微软社区解决方案自己发现的解决方案解决…...

傅里叶变换解析

p.s.本文无论是cos还是sin&#xff0c;都统一用“正弦波”(Sine Wave)一词来代表简谐波。 一、什么是频域 从我们出生&#xff0c;我们看到的世界都以时间贯穿&#xff0c;股票的走势、人的身高、汽车的轨迹都会随着时间发生改变。这种以时间作为参照来观察动态世界的方法我们称…...

你的登录接口真的安全吗?

1.前言 大家学写程序时&#xff0c;第一行代码都是hello world。但是当你开始学习WEB后台技术时&#xff0c;很多人的第一个功能就是写的登录 &#xff08;小声&#xff1a;别人我不知道&#xff0c;反正我是&#xff09;。但是我在和很多工作经验较短的同学面试或沟通的时候&…...

ChatGPT情商很高,但并不适合当搜索引擎

微软和谷歌正急于使用大型语言模型技术来强化搜索引擎。但有充分的理由认为&#xff0c;相比于提供事实性信息&#xff0c;这项技术更适合作为人们情感上的伴侣。 美媒评论称&#xff0c;目前基于大型语言模型的人工智能工具&#xff0c;例如ChatGPT&#xff0c;更擅长共情而不…...

Mac 地址与 IP 地址有什么区别?

Mac 地址和 IP 地址是两个不同的概念&#xff0c;它们分别代表了计算机网络中的不同层次和地址。Mac 地址是物理地址&#xff0c;是在计算机硬件中存储的地址&#xff0c;通常是以特定的六进制格式表示。每个设备都有一个唯一的 MAC 地址&#xff0c;它可以用来在计算机之间进行…...

bootloaders

什么是BootLoader? 一般来说&#xff0c;bootloader是一种软件/固件&#xff0c;它在SoC上电后立即运行。bootloader的主要职责是启动软件的后续部分&#xff0c;例如操作系统、baremetal应用程序或在某些情况下另一个bootloader。当涉及到嵌入式时&#xff0c;bootloader通常…...

PC或服务器装双系统

1. 准备工作 1.1U盘启动盘的制作 ①准备一个 4G 以上的 U 盘&#xff0c;备份好U盘资料&#xff0c;后面会对 U 盘进行格式化。 ②去CentOS官网下载你想要安装的 ISO 格式镜像文件&#xff0c;现在通常是CentOS6、7或者8。如果你英文不太好&#xff0c;可以选择使用edge浏览…...

smart-mqtt v1.5.4发布,认证能力大升级

smart-mqtt v1.5.4正式发布&#xff0c;此次版本聚焦企业级连接认证能力升级&#xff0c;推出全新高级认证插件&#xff0c;在高性能底座上补齐企业级接入能力&#xff0c;还公布了获取方式与未来规划。版本核心亮点v1.5.4重点通过advanced-auth-plugin让连接认证更适配企业真实…...

GLM-4v-9b效果展示:学术海报截图→研究方法/结果/结论三段式结构化提取

GLM-4v-9b效果展示&#xff1a;学术海报截图→研究方法/结果/结论三段式结构化提取 1. 模型能力概览 GLM-4v-9b是智谱AI在2024年推出的开源多模态模型&#xff0c;拥有90亿参数&#xff0c;专门处理文本和图像的联合理解任务。这个模型最大的特点是能够同时看懂图片和文字&am…...

新手入门:基于快马平台复现pencil设计工具基础功能学前端

最近在学前端开发&#xff0c;想找个能动手实践的项目练练手。朋友推荐了pencil官网的设计工具&#xff0c;但直接看源码有点复杂。后来发现用InsCode(快马)平台可以快速复现基础功能&#xff0c;特别适合新手理解画布操作和事件处理。下面分享我的学习过程&#xff1a; 画布搭…...

Segment-and-Track-Anything实战案例:从街景到细胞的全场景应用

Segment-and-Track-Anything实战案例&#xff1a;从街景到细胞的全场景应用 【免费下载链接】Segment-and-Track-Anything An open-source project dedicated to tracking and segmenting any objects in videos, either automatically or interactively. The primary algorith…...

TheAmazingAudioEngine实战案例:构建完整的音乐制作应用

TheAmazingAudioEngine实战案例&#xff1a;构建完整的音乐制作应用 【免费下载链接】TheAmazingAudioEngine 项目地址: https://gitcode.com/gh_mirrors/th/TheAmazingAudioEngine TheAmazingAudioEngine是一款功能强大的音频处理框架&#xff0c;专为移动应用开发打造…...

揭秘C++多态:动态行为的核心奥秘

C 多态&#xff1a;面向对象的动态行为核心机制多态性是面向对象编程&#xff08;OOP&#xff09;的核心概念之一&#xff0c;它允许对象在运行时根据其实际类型表现出不同的行为。在C中&#xff0c;多态性主要通过虚函数&#xff08;virtual functions&#xff09;和继承机制实…...

Aurix TC397内存不够用?三种方法教你手动指定变量到LMU或DSRR地址空间

Aurix TC397内存优化实战&#xff1a;精准分配变量到LMU与DSRR的三大策略 当你在Aurix TC397项目开发中遇到"PSPR空间不足"的报错时&#xff0c;那种突如其来的编译中断感就像赛车手在弯道突然失去动力。这款强大的多核微控制器虽然配备了PSRR、DSRR、DLMU、LMU等多…...

新手零基础入门CAN总线:借助快马AI生成可运行代码理解通信机制

作为一个刚接触嵌入式开发的菜鸟&#xff0c;最近被导师要求学习CAN总线协议。面对手册里密密麻麻的寄存器配置和报文格式说明&#xff0c;我一度怀疑自己是不是选错了专业方向。直到发现了InsCode(快马)平台&#xff0c;用它的AI生成功能快速搭建了一个可运行的CAN通信demo&am…...

阿里开源Z-Image镜像体验:ComfyUI可视化生成汉服美女实战

阿里开源Z-Image镜像体验&#xff1a;ComfyUI可视化生成汉服美女实战 1. 开篇&#xff1a;当汉服遇见AI绘画 想象一下&#xff0c;你只需要输入"一位穿着汉服的中国女性站在樱花树下"&#xff0c;AI就能在几秒钟内生成一张细节精致的写实风格图像。这不再是科幻场景…...

3步掌握AI模型训练:让新手也能玩转个性化Stable Diffusion模型

3步掌握AI模型训练&#xff1a;让新手也能玩转个性化Stable Diffusion模型 【免费下载链接】sd-trainer 项目地址: https://gitcode.com/gh_mirrors/sd/sd-trainer 在数字创意领域&#xff0c;AI绘画模型训练曾是一道高不可攀的技术门槛。设计师面对复杂的代码配置望而…...