团购网站建设,企业微信营销系统,一些简单的代码,做创新方法工作的网站前端list列表自定义图标并设置大小
一、前端list列表基础知识回顾
前端公有两种列表#xff0c;一种是有序列表#xff08;ol#xff09;#xff0c;一种是无序列表#xff08;ul#xff09;#xff0c;它们的子元素都是#xff08;li#xff09;。
1.1 有序列表一种是有序列表ol一种是无序列表ul它们的子元素都是li。
1.1 有序列表ol
有序列表的子元素li的样式
ol有序列表默认使用数字作为序号typeA字母排序typeI罗马排序start“3” 序列从几开始如果不写默认从1开始代码示例
!-- 默认有序形式为 阿拉伯数字 --h2有序列表ol/h2ollipython/liliJava/liliLinux/li/ol!-- 大写英文字母排序 --ol typeAlipython/liliJava/liliLinux/li/ol!-- 罗马数字排序 --ol typeIlipython/liliJava/liliLinux/li/ol1.2 无序列表ul
无序列表的子元素li的样式
ul无序列表typedisc默认实心圆typesquare方块typecircle空心圆代码示例
h2无序列表ul/h2!-- 默认形式 实心圆 --ullipython/liliJava/liliLinux/li/ul!-- 方形square --ul typesquarelipython/liliJava/liliLinux/li/ul!-- 空心圆circle --ul typecirclelipython/liliJava/liliLinux/li/ul二、前端list列表自定义图标并设置大小
2.1 第一种方式
首先CSS3 样式为我们提供了对应的属性可以直接设置自定义图标样式但是缺点在于图标大小不可以更改所以在编程之前就需要准备好合适的图标进行使用。
list-style-type使用CSS可以列出进一步的样式并可用图像作列表项标记。- none无标记。去除标记- disc默认。标记是实心圆。- circle标记是空心圆。- square标记是实心方块。- decimal标记是数字。- decimal-leading-zero0开头的数字标记。(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-imageurl(图片地址) 自己指定图标这种不能控制图标的大小如果图标过大无法控制示例代码
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
bodyul classul-listliPython/liliJava/liliLinux/li/ulol classol-listliPython/liliJava/liliLinux/li/olol classol-list-2liPython/liliJava/liliLinux/li/olul classul-list-2liPython/liliJava/liliLinux/li/ul
/body2.2 第二种方式
这种方式我们可以使用任何图片可以通过 CSS3 控制自定义图片的大小进而进行合理的展示
background-image使用背景图片作为图标
background-size进行背景图片大小控制
background-repeat背景图片只出现一次示例代码html部分
divh35.列表样式/h3divh5今天需要完成的任务/h5ol classlist1li去公司上班/lili完成工作任务/lili递呈纸质材料/li/ol/divdivh5音乐列表/h5ul classlist2lia href_blank年少的你.mp3/a/lilia href_blank世界这么大还是遇见你.mp3/a/lilia 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列表自定义图标并设置大小本篇文章的相关内容希望对大家有用谢谢大家。
