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

前端list列表自定义图标并设置大小

news 2025/12/15 14:11:34

前端list列表自定义图标并设置大小

一、前端list列表基础知识回顾

前端公有两种列表，一种是有序列表（ol），一种是无序列表（ul），它们的子元素都是（li）。

1.1 有序列表（ol）

有序列表的子元素（li）的样式：

ol：有序列表（默认使用数字作为序号）type='A'：字母排序type='I'：罗马排序start=“3” 序列从几开始（如果不写默认从1开始）

代码示例：

<!-- 默认有序形式为 阿拉伯数字 --><h2>有序列表ol</h2><ol><li>python</li><li>Java</li><li>Linux</li></ol><!-- 大写英文字母排序 --><ol type="A"><li>python</li><li>Java</li><li>Linux</li></ol><!-- 罗马数字排序 --><ol type="I"><li>python</li><li>Java</li><li>Linux</li></ol>

在这里插入图片描述

1.2 无序列表（ul）

无序列表的子元素（li）的样式：

ul：无序列表type="disc"：默认，实心圆type="square"：方块type="circle"：空心圆

代码示例：

<h2>无序列表ul</h2><!-- 默认形式 实心圆 --><ul><li>python</li><li>Java</li><li>Linux</li></ul><!-- 方形square --><ul type="square"><li>python</li><li>Java</li><li>Linux</li></ul><!-- 空心圆circle --><ul type="circle"><li>python</li><li>Java</li><li>Linux</li></ul>

在这里插入图片描述

二、前端list列表自定义图标并设置大小

2.1 第一种方式

首先，CSS3 样式为我们提供了对应的属性，可以直接设置自定义图标样式，但是缺点在于图标大小不可以更改，所以在编程之前就需要准备好合适的图标，进行使用。

list-style-type：使用CSS，可以列出进一步的样式，并可用图像作列表项标记。- none：无标记。（去除标记）- disc：默认。标记是实心圆。- circle：标记是空心圆。- square：标记是实心方块。- decimal：标记是数字。- decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)- lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)- upper-roman：大写罗马数字(I, II, III, IV, V, 等。)- lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)- upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)list-style-image：url(图片地址) 自己指定图标，这种不能控制图标的大小，如果图标过大，无法控制

示例代码

<style>.ul-list{list-style-type: disc;}.ol-list{list-style-type: decimal;}.ol-list-2{list-style-image: url(../img/list-img-1.gif);}.ul-list-2{list-style-image: url(../img/list-img-2.gif);}
</style>
<body><ul class="ul-list"><li>Python</li><li>Java</li><li>Linux</li></ul><ol class="ol-list"><li>Python</li><li>Java</li><li>Linux</li></ol><ol class="ol-list-2"><li>Python</li><li>Java</li><li>Linux</li></ol><ul class="ul-list-2"><li>Python</li><li>Java</li><li>Linux</li></ul>
</body>

在这里插入图片描述

2.2 第二种方式

这种方式，我们可以使用任何图片，可以通过 CSS3 控制自定义图片的大小，进而进行合理的展示

background-image：使用背景图片作为图标
background-size：进行背景图片大小控制
background-repeat：背景图片只出现一次

示例代码：html部分

<div><h3>5.列表样式</h3><div><h5>今天需要完成的任务</h5><ol class="list1"><li>去公司上班</li><li>完成工作任务</li><li>递呈纸质材料</li></ol></div><div><h5>音乐列表</h5><ul class="list2"><li><a href="_blank">年少的你.mp3</a></li><li><a href="_blank">世界这么大还是遇见你.mp3</a></li><li><a href="_blank">我的梦.mp3</a></li></ul></div>
</div>

示例代码：CSS部分

/*** 列表样式*/
.list1{list-style: none;
}
.list1 li::before{background-image: url(../icon/Spell.ico);background-size: 100% 100%;background-repeat: no-repeat;display: inline-block;content: '';width: 15px;height: 15px;margin: 5px;vertical-align: middle;
}
.list2{list-style: none;
}
.list2 li::before{background-image: url(../icon/ForwardNext.ico);background-size: 100% 100%;background-repeat: no-repeat;display: inline-block;content: '';width: 15px;height: 15px;margin: 5px;vertical-align: middle;
}

在这里插入图片描述

三、总结

以上就是前端list列表自定义图标并设置大小本篇文章的相关内容，希望对大家有用，谢谢大家。

相关文章：

前端list列表自定义图标并设置大小

前端list列表自定义图标并设置大小 一、前端list列表基础知识回顾 前端公有两种列表&#xff0c;一种是有序列表&#xff08;ol&#xff09;&#xff0c;一种是无序列表&#xff08;ul&#xff09;&#xff0c;它们的子元素都是&#xff08;li&#xff09;。 1.1 有序列表&a…...

编程日记 2023/9/3 18:11:22

Multisim14.0仿真（五）三角波发生器

一、仿真原理图&#xff1a; 二、仿真效果&#xff1a;...

编程日记 2023/9/3 18:10:22

使用安全复制命令scp在Windows系统和Linux系统之间相互传输文件

现在已经有很多远程控制服务器的第三方软件平台&#xff0c;比如FinalShell&#xff0c;MobaXterm等&#xff0c;半可视化界面&#xff0c;使用起来非常方便和友好&#xff0c;两个系统之间传输文件直接拖就行&#xff0c;当然也可以使用命令方式在两个系统之间相互传递。 目录…...

编程日记 2023/9/3 18:09:20

SOC总线学习记录之ICB（Internal Chip Bus）

蜂鸟E203总线&#xff1a; 采用自定义总线协议 ICB&#xff08;Internal Chip Bus&#xff09;&#xff0c;该总线用于蜂鸟 E203 内核内部使用&#xff0c;同时也可作为 SoC 中的总线使用。 ICB 总线的初衷是为了能够尽可能地结合 AXI 总线和 AHB 总线的优点&#xff0c;兼具高…...

编程日记 2023/9/3 18:08:19

rabbitMQ手动应答与自动应答

手动应答模式(manual) 解释: 手动应答:既是当消费者消费了队列中消息时需要给队列一个应答,告诉队列这条消息我已经消费了,可以删除了; 若是不应答,即使消费了 队列没收到消费成功的提示 所有消息会一直在队列中; 注意 注意 注意:重要的事情说三遍,下面说的…...

编程日记 2023/9/3 18:07:18

java对象创建的过程

1、检查指令的参数是否能在常量池中定位到一个类的符号引用 2、检查此符号引用代表的类是否已被加载、解析和初始化过。如果没有&#xff0c;就先执行相应的类加载过程 3、类加载检查通过后&#xff0c;接下来虚拟机将为新生对象分配内存。 4、内存分配完成之后&#xff0c;…...

编程日记 2023/9/3 18:06:16

WireShark流量抓包详解

目录 Wireshark软件安装Wireshark 开始抓包示例Wireshakr抓包界面介绍WireShark 主要界面 wireshark过滤器表达式的规则 Wireshark软件安装 软件下载路径&#xff1a;wireshark官网。按照系统版本选择下载&#xff0c;下载完成后&#xff0c;按照软件提示一路Next安装。 Wire…...

编程日记 2023/9/3 18:05:12

【密码学代码分享】突破ECDSA算法封装--JS无三方包纯手写ECDSA

ECDSA&#xff08;Elliptic Curve Digital Signature Algorithm&#xff09;是一种基于椭圆曲线密码学的数字签名算法。它用于确保数字数据的完整性和身份验证&#xff0c;通常在信息安全和加密通信中使用。在日常使用中&#xff0c;通常会使用一些函数库来实现完成这个算法的功…...

编程日记 2023/9/3 18:04:10

stable diffusion实践操作-文生图

本文专门开一节写文生图相关的内容&#xff0c;在看之前&#xff0c;可以同步关注&#xff1a; stable diffusion实践操作 正文 1 liblib SD1.5底模 lora(baihuaniang_1.0) 详细信息&#xff1a; 底模&#xff1a;SD 1.5 Lora:baihuaniang_1.0 正向提示词&#xff1a; Best …...

编程日记 2023/9/3 18:03:09

Spring容器及实例化

一、前言 Spring 容器是 Spring 框架的核心部分&#xff0c;它负责管理和组织应用程序中的对象&#xff08;Bean&#xff09;。Spring 容器负责创建、配置和组装这些对象&#xff0c;并且可以在需要时将它们提供给应用程序的其他部分。 Spring 容器提供了两种主要类型的容器&…...

编程日记 2023/9/3 18:02:08

# Go学习-Day9

文章目录 Channel声明存入取出一个简单的死锁分析 个人博客&#xff1a;CSDN博客 Channel Channel本质是一个队列多goroutine访问时不需要加锁&#xff0c;Channel天然线程安全channel有类型&#xff0c;只能写入相同类型channel是引用类型channel必须初始化才能写入数据&…...

编程日记 2023/9/3 18:01:06

chatGPT如何在Java中使用

ChatGPT是一个基于GPT模型的聊天机器人平台&#xff0c;它提供了API接口&#xff0c;可以通过HTTP请求与之交互。您可以使用Java编写程序&#xff0c;通过HTTP请求与ChatGPT进行交互&#xff0c;实现聊天机器人的功能。 具体步骤如下&#xff1a; 1、注册ChatGPT账号并创建应…...

编程日记 2023/9/3 18:00:05

vue+axios——创建多个实例共用请求拦截器和响应拦截器（403错误信息不提示bug解决）——基础积累

创建多个实例共用请求拦截器和响应拦截器&#xff1a;使用的是函数的继承&#xff0c;也就是call()方法&#xff0c;这个方法第一个参数就是this,后面的参数可以是一个也可以是多个。最后一定要记得要return出去&#xff0c;否则接口是拿不到数据的。 import axios from axios…...

编程日记 2023/9/3 17:59:04

全球免费编程教育网站：Code.org

全球免费编程教育网站&#xff1a;Code.org 官网地址注册使用 你还在为小朋友的编程教育而发愁吗&#xff1f; 你还在为小朋友放假无聊而头疼吗&#xff1f; 他来了他来了&#xff0c;全球免费编程教育网站来了。 2013年成立的Code.org是一个非营利组织。 它致力于为年轻女子、…...

编程日记 2023/9/3 17:58:03

构造函数与成员变量初始化

C自学精简教程 目录(必读) 1 为什么需要定义构造函数&#xff1f; 构造函数主要用来给成员变量初始化。 让类对象有一个良好的开始状态。 2 构造函数初始化成员变量 下面我们来完善上一篇文章中的几个构造函数。 让这些构造函数完成给成员变量初始化的职责。 为此&#…...

编程日记 2023/9/3 17:57:02

使用Go env命令设置Go的环境

文章目录 前言Linux的设置Windlows设置Go version > 1.13 当你的GO的版本大于1.13的时候 Set environment variable allow bypassing the proxy for selected modules 前言 在进行Go开发的时候&#xff0c;设置Go的环境变量信息是必须的。下面介绍windows和Linux&#xff0…...

编程日记 2023/9/3 17:56:01

目标检测YOLO实战应用案例100讲-道路场景下目标检测与分割模型的压缩研究与实现（续）

目录 道路场景下目标检测与语义分割模型的改进研究 3.1 道路场景数据集分析 3.1.1 Cityscapes数据集...

编程日记 2023/9/3 17:55:00

b站手机缓存文件转MP4

b站缓存的文件 音频、视频、弹幕是分开的 这里我只用到了音频和视频所以只介绍这一部分 b站的缓存视频文件和路径结构如下 默认缓存路径 内部存储\Android\data\tv.danmaku.bilil\download\89720189 文件夹结构 文件夹 c_738583 这是单个视频的缓存文件夹 进入c_738583文件夹…...

编程日记 2023/9/3 17:53:59

一个集成的BurpSuite漏洞探测插件1.2

4、DNSLog查询漏报 注&#xff1a;扫描结束后才会在BurpSuite的Target、Dashboard模块显示高危漏洞&#xff0c;进程扫描中无法进行同步&#xff0c;但可以在插件中查看&#xff08;涉及到DoPassive方法问题&#xff09;。...

编程日记 2023/9/3 17:52:58

[FMMPEG] parse与 demuxer

FFmpeg源码分析&#xff1a;av_parser_parse2()解析数据包 ffmpeg 4.3添加自定义demuxer ffmpeg API基础...

编程日记 2023/9/3 17:51:58

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2025/12/14 9:58:03

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/12/9 1:32:01

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/12/9 16:40:19

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35