57.网页设计图标实战

news2024/9/20 12:15:22

首先我们需要找一个图标库,本次演示采用的是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.coloradmin.cn/o/480853.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python——Pyqt5的数据可视化小工具(完整代码)

前言 作业要求:【都已经打包放网上了,有缘人需要就自取】 一份报告书(在全球变暖背景下碳中和对各国的二氧化碳排放量的影响项目报告书) 一份代码 作业包:python数据可视化小工具.zip - 蓝奏云 大一的时候,…

Java 整合常用docker Api

整合环境: 与docker 版本差异不大,基本都可以 API version: 1.26开放docker api ,两种方式 /etc/sysconfig/docker ,最后一行添加;开放端口:2375 -H tcp://0.0.0.0:2375systemctl status docker 查询 d…

vsftpd.conf参数配置

文章目录 初始vsftdp.conf翻译后需修改参数write_enableYES(启用任何形式的FTP写入命令)userlist_file/etc/vsftpd.user_list、userlist_enableYES、userlist_denyNOlocal_umask022(放开权限)chroot_local_userYES(限定…

每日学术速递4.29

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.LG 1.A Cookbook of Self-Supervised Learning 标题:自监督学习食谱 作者:Randall Balestriero, Mark Ibrahim, Vlad Sobal, Ari Morcos, Shashank Shekhar, Tom…

学知识变现,看完这些就够了

点击查看【18本知识变现电子书】 100个实用知识点 60万字知识变现精华 资深知识变现教练海哥扛鼎之作 2000多位学员实战经验干货总结 从理论到实践,从思维到实操 教你彻底学透如何知识变财富 .......... 全网最全知识变现知识付费电子教程 资深知识变现教练海…

Linux线程相关函数:线程的创建、属性、回收、退出、取消

1. 线程号 进程号在系统中唯一&#xff0c;但线程号只在其所属进程环境中有效。 &#xff08;1&#xff09;pthread_self函数 #include<pthread.h>pthread_t pthread_self(void); /* 功能&#xff1a;获取线程号 返回值&#xff1a;调用此函数线程的ID */ pthread_se…

【Unity-UGUI控件全面解析】| Panel 容器组件详解

🎬【Unity-UGUI控件全面解析】| Panel 容器组件详解一、组件介绍二、组件属性面板三、代码操作组件💯总结🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:游…

2007-2020年上市公司数字经济化指标含原始数据和计算代码(do文档)

2007-2020年上市公司数字经济化指标含原始数据和计算代码&#xff08;do文档&#xff09; 1、时间&#xff1a;2007-2020 2、范围&#xff1a;A股上市公司剔除jin rong行业 3、数据说明&#xff1a;包含计算过程和原始数据 4、参考文献&#xff1a;祁怀锦,数字经济对公司治…

利用C#实现动态替换桌面快捷方式对应的应用程序

公司有一个特殊的业务可能会用到这个&#xff0c;至于什么业务就不展开了。本文的内容作为备用方案。 实现思路&#xff1a; 1 获取当前exe程序运行的全路径 2 获取桌面的所有快捷方式 3 遍历快捷方式&#xff0c;获取快捷键方式对应程序的运行路径&#xff0c;并与当前…

【开发工具】 今天我要教会你安装Office 2021 RTM 专业增强零售版 你开不开心

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&#x1…

统一请求封装和pytest入门使用

统一请求封装解决的问题 解决多个py文件共享session的问题 统计请求的数据 统一异常处理 统一日志监控 封装 在项目文件中创建一个common文件夹&#xff0c; 用来进行统一接口封装 import requestsclass RequestUtil:# 调用底层的requests.session()方法进行封装sess r…

超详细的R语言svykm函数绘制复杂抽样设计数据cox回归生存曲线(Kaplan-Meier)

我们在既往的文章《R语言绘制复杂抽样设计数据cox回归生存曲线(Kaplan-Meier)》中介绍了怎么使用jskm包的svykm函数绘制复杂抽样设计数据cox回归生存曲线(Kaplan-Meier)&#xff0c;但是有粉丝觉得讲得不够详细&#xff0c;希望讲得详细一点&#xff0c;今天我们继续来介绍一下…

flinkCDC在Delta.io中是什么 是CDF

类似flink CDC databricks 官方文档: How to Simplify CDC With Delta Lakes Change Data Feed - The Databricks Blog delta.io 官方文档: Change data feed — Delta Lake Documentation 概述 更改数据馈送 (CDF) 功能允许 Delta 表跟踪 Delta 表版本之间的行级更改 在…

vue+element-plus角色权限管理分配

这里的图片是截图这个老师的项目 在src/uitls/permission.js加入以下内容 本段代码讲解: 参数一:后台传来的路由 参数二:前端所有的路由 先遍历前端所有路由,在里面继续遍历后台路由,通过二者某一个关键字的是否相同判断用户是否有权限(这里老师使用的是title关键字),关键字相…

21安徽练习

题目分为4部分 APK 集群 流量 exe 我尽量都做一下&#xff0c;逆向不是很会&#xff0c;就当提升自己。 [填空题]请获取app安装包的SHA256校验值&#xff08;格式&#xff1a;不区分大小写&#xff09;&#xff08;10分&#xff09; e15095d49efdccb0ca9b2ee125e4d8136cac5…

树莓派Pico W无线开发板MQTT协议通信MicroPython编程实践

本博文介绍采用ThonnyMicroPython和umqtt.simple库MQTTClient类的对象方法编制树莓派Pico W无线开发板MQTT协议通信程序&#xff0c;将Pico W无线开发板、电脑或Android手机无线连接到远程MQTT服务器&#xff0c;给出采用电脑MQTTX应用程序及手机Android MQTT客户端App远程控制…

用python的QT做界面

文章目录 入口文件界面参数调整数据从dat解析出来的文件从界面点击打开文件夹的功能实现主要功能代码网络参数存图替换功能&#xff0c;比如把倒频谱替换成倒频谱2 入口文件 入口文件&#xff0c;主要用来实例化窗口&#xff08;不重要&#xff09;&#xff0c;只要知道从这里…

每日学术速递4.30

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Masked Frequency Modeling for Self-Supervised Visual Pre-Training(ICLR 2023) 标题&#xff1a;用于自监督视觉预训练的掩蔽频率建模 作者&#xff1a;Jiahao Xie, Wei Li, Xi…

SwiftUI 设计和调试复杂界面的基本技巧示例

功能需求 对于比较复杂的 SwiftUI 界面,我们需要在充分了解 SwiftUI 各个视图基本特性的同时,合理利用 Xcode 强大的预览(Preview)机制,实时且全面的测试所有场景下的显示情况。 如上图所示:我们在 App 支持的每种语言环境中都对界面进行了全面的测试,并解决了 Cell 里…

使用Lambda表达式mutable有感

使用Lambda表达式mutable有感 在学Qt的时候&#xff0c;我看着mutable陷入了沉思&#xff0c;总觉得它和C中的某个特性很像&#xff1f;没错&#xff0c;就是 深拷贝 如果你忘记了深拷贝和浅拷贝是什么&#xff0c;那跟着我来一起回忆一下吧。首先来看深拷贝与浅拷贝的概念 浅…