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

这篇具有很好参考价值的文章主要介绍了前端list列表自定义图标并设置大小。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端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>

前端list列表自定义图标并设置大小,Vue,css3,html,list,图标,自定义

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列表自定义图标并设置大小,Vue,css3,html,list,图标,自定义

二、前端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>

前端list列表自定义图标并设置大小,Vue,css3,html,list,图标,自定义

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列表自定义图标并设置大小,Vue,css3,html,list,图标,自定义

三、总结

以上就是前端list列表自定义图标并设置大小本篇文章的相关内容,希望对大家有用,谢谢大家。文章来源地址https://www.toymoban.com/news/detail-686047.html

到了这里,关于前端list列表自定义图标并设置大小的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+elementPlus:前端自定义el-tree图标icon

    重点:template蒙版下svg和use,然后前端遍历添加key和value,取判断放图标 HTML结构:el-tree里面包裹template(关键点) 方法一:使用for循环 for循环数据,前端自定义tree图标第一种方法,后端key没有icon字段,自己添加 方法二: 使用map遍历 直接map遍历前端自定义tree图标 作者上一

    2024年02月15日
    浏览(45)
  • HTML5+CSS3+JS小实例:快捷菜单图标按钮交互特效

    实例:快捷菜单图标按钮交互特效 技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: 【html】

    2024年02月17日
    浏览(46)
  • 前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件

    前端Vue自定义简单好用商品分类列表组件 侧边栏商品分类组件 , 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13148 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(46)
  • 前端css + js +vue +element-ui 实现响应式布局,根据浏览器窗体大小自动响应

    我的环境是element-ui vue版的,其他的也可以,主要是css和js的内容 首先在data中定义一个对象 其实就是css的样式,不过放在了js 里面而已 这里css设置了两个属性 一个是transform 这个属性对div标签的缩放作用,当浏览器窗口或者屏幕大小改变时,就调整这个属性的值,来等比缩放

    2024年02月13日
    浏览(58)
  • QT-QTableWidget设置单元项图标和图标大小

    要设置 QIcon 的大小,你可以使用 QPixmap 来加载原始图像,并调用 QPixmap 的 scaled() 函数来缩放图像的尺寸。然后,将缩放后的 QPixmap 设置给 QIcon,最后将 QIcon 设置给 QTableWidgetItem 的图标。 下面是一个示例代码,演示了如何设置 QIcon 的大小: 在示例代码中,我们加载原始图像

    2024年02月14日
    浏览(39)
  • 【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )

    在本博客中引入 3D 效果 透视视图 Perspective 概念 ; 3D 视图中 产生 3D 效果 , 最终要的是有透视效果 , 通俗的讲 \\\" 透视 \\\" 就是实现 \\\" 近大远小 \\\" 的效果 ; 透视 就是 将 3D 空间中的物体 投影显示到 2D 平面中 ; 透视视图 ( Perspective View ) : 近大远小 , 符合正常人眼观察 3D 世界的规律

    2024年02月13日
    浏览(41)
  • 前端之css3

            1 新增实用的选择器,例如动态伪类,目标伪类,伪元素         2 新增更好的视觉效果         3 新增丰富的背景效果         4 新增全新的布局方案         5 新增web字体         6 新增颜色,hsl,hsla,rgba         7 新增2D和3D变换         8 新增动画和过渡效

    2024年02月13日
    浏览(64)
  • 前端学习——CSS3

    box-sizing resize box-shadow opacity background-origin background-clip background-size background复合属性 多背景图 边框圆角 边框外轮廓 文本阴影 文本换行 文本溢出 文本修饰 文本描边 线性渐变

    2024年02月12日
    浏览(49)
  • css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流

    前提是每张图片宽度要设置成一样,准备15张图测试 1.屏幕大小列可变column实现,设置默认每列的图片宽度 2.屏幕大小列可变2 @media来控制 3.不可变-屏幕大小列不可变 4.不可变-屏幕大小列不可变 5.可变-可变js来实现-屏幕大小列可变

    2024年02月08日
    浏览(39)
  • 【前端】CSS3新特性

      css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。   写这篇文章主

    2024年02月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包