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

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

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

1.1 有序列表（ol）

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

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

代码示例：


    <h2>有序列表olh2>
    <ol>
        <li>pythonli>
        <li>Javali>
        <li>Linuxli>
    ol>
    
    <ol type="A">
        <li>pythonli>
        <li>Javali>
        <li>Linuxli>
    ol>
    
    <ol type="I">
        <li>pythonli>
        <li>Javali>
        <li>Linuxli>
    ol>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

1.2 无序列表（ul）

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

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

代码示例：

<h2>无序列表ulh2>
    
    <ul>
        <li>pythonli>
        <li>Javali>
        <li>Linuxli>
    ul>
    
    <ul type="square">
        <li>pythonli>
        <li>Javali>
        <li>Linuxli>
    ul>
    
    <ul type="circle">
        <li>pythonli>
        <li>Javali>
        <li>Linuxli>
    ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

二、前端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(图片地址) 自己指定图标，这种不能控制图标的大小，如果图标过大，无法控制
1
2
3
4
5
6
7
8
9
10
11
12
13

示例代码

<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>Pythonli>
        <li>Javali>
        <li>Linuxli>
    ul>
    <ol class="ol-list">
        <li>Pythonli>
        <li>Javali>
        <li>Linuxli>
    ol>
    <ol class="ol-list-2">
        <li>Pythonli>
        <li>Javali>
        <li>Linuxli>
    ol>
    <ul class="ul-list-2">
        <li>Pythonli>
        <li>Javali>
        <li>Linuxli>
    ul>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

在这里插入图片描述

2.2 第二种方式

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

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

示例代码：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">年少的你.mp3a>li>
			<li><a href="_blank">世界这么大还是遇见你.mp3a>li>
			<li><a href="_blank">我的梦.mp3a>li>
		ul>
	div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

示例代码：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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

三、总结

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

相关阅读:
【Ubuntu/Debian】Linux发行版之Ubuntu/Debian关于开机自启和关机自执行的实现
 通过 JDK 源码学习灵活应用设计模式（下）
vscode右键打开文件夹、文件等
 八股文-Vue篇（持续更新）
虹科分享 | 选择SAS还是NVMe？虹科网络基础带您一探究竟！
＜linux/power_supply_old.h＞
【JavaWeb】JavaWeb与JavaWeb技术栈
 干货：医疗企业渠道管理实战手册：策略、平台建设、CRM解决方案
 01-redis篇两种数据储存持久化方式
 谁能拒绝摸鱼的时候来点代码图呢
原文地址：https://blog.csdn.net/qq_45834685/article/details/132578926