列表前显示的小图标

列表信息展示有时候会在每行前使用小图标来美化,布局通常也会用到ul li;

1、如果是1张小图标

一般会用background属性来显示图标,background-image:url(); background-repeat: no-repeat; background-position:left center;

另外还可以使用list-style,该属性按顺序有3个值:list-style-type, list-style-position, list-style-image

  list-style-type: 属性设置列表项标记的类型,值比较多。disc默认的实心圆。

  list-style-position: 属性设置在何处放置列表项标记, inside(列表项目标记放置在文本以内,且环绕文本根据标记对齐。); outside(默认值,保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。)

  list-style-image: 属性使用图像来替换列表项的标记。

2、如果是用icons sprite

需要新建标签单独定义图标样式,background属性设置图标。

时间: 2024-12-26 06:24:46

列表前显示的小图标的相关文章

【网站图标的设置】适用于开发的网站打开时显示的小图标(多图)

<link rel="icon" href="" sizes="32x32" />

phpcms如何在前台文章列表前显示所属类别名称

最近做单位网站模版遇到的问题,欲实现的效果: 截图好麻烦,一时还找不到合适的,晚上下班再写.

title中添加小图标

<title>标签中不能添加图片,但是可以添加小图标. 步骤: 1.做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透明背景的16 X 16像素PNG格式的小图标,再在AWiconsPro软件中导入这个PNG图标,再另存为ICO格式.注意:文件名一定要保存为favicon.ico. 2.把favicon.ico图标文件上传到你的网站根目录即可.下次浏览这个网站时网页的标题栏就会显示这个小图标.注意:如果没有显示,可能是浏览器缓存问题,此时按Ctrl+F

无序列表前小黑点图片替换方法

无须列表前小黑点图片替换方法: 直接上代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>无序列表小黑点图片替换</title> &l

微信小程序之多列表的显示和隐藏功能(附源码)

今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?如果还用wx:if实现的话会出现点击一个列表项,多个列表同时显示和隐藏,明显不适合功能需求,然后简单地查了资料也没发现有类似的功能,最后思考一番后,慢慢地理清了思路... 效果图: 实现思路: 实现单个列表的显示和隐藏应该使用唯一元素让程序知道你应该显示和隐藏哪个列表项,可以用数据的id: css中定义一个hidden{display:none}控制显示和

CSS控制&quot;标题前增加小图标或编号&quot;

---题目前加图片--- p:before { content:url(xxx/xx.png); }//所有p的最前都有一个图标 p.a:after { content:url(xxx/xx.png); }//而含有类a的p最前和最后都有一个图标 <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p class='a'>5</p> ---题目前加标号--- p:b

请用fontAwesome代替网页icon小图标

1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到.因为它们也可以变为彩色的. 黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧.一般的程序猿,包括前端程序猿,估计只能去搜索了,不会自己拿ps画.例如,我之前经常去一个叫做“懒人图库”的网站去找资源,现在那个网站还存在. 但是问

ClistCtrl用法及总结(由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识)

1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可. 一下是用法总结: 本文根据本人在项目中的应用,来谈谈CListCtrl的部分用法及技巧.当初学习时,查了很多资料,零零碎碎的作了些记录,现在主要是来做个总结,方便以后查阅.主要包括以下十三点内容:基本操作.获取选中行的行号.复选框操作.动态设置选中行的字体颜色.设置选中行的背景颜色.禁止拖动表头.让第一列居中显示.设置行高与字体.虚拟列表技术.点击表头时进行归类.向上与向下移动.动态调

用fontAwesome代替网页icon小图标

1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲到.因为它们也可以变为彩色的. 黑白的也好,彩色的也罢,如果用传统的“css + 图片”的方式来制作这些icon,我估计你至少得雇佣一个专业的设计师吧.一般的程序猿,包括前端程序猿,估计只能去搜索了,不会自己拿ps画.例如,我 之前经常去一个叫做“懒人图库”的网站去找资源,现在那个网站还存在. 但是