css里面li标签怎么加图片_分享三种给li标签添加图标的方法

我们在页面布局时，经常会用到li标签，单独使用li标签比较单调，有时候为了页面效果，需要加入图片，那怎么在li标签中添加图片呢？这篇文章就和大家分享三种给li标签添加图标的方法，希望对你有用。

1.使用CSS的特殊属性

ul{list-style-type:disc;} //disc的作用是在每个li前加一个黑点，其他常用的有square:黑色方块;none:无列表样式;decimal:数字；

你还可以控制图标在li标签的外面还是里面，如

ul{list-style-position:inside;}或者outside

如果你想加入自己定义的图案，可用

ul{list-style-image:url(图片地址);}

当然这还可以配合position使用。

但是我从来不适用以上属性，我也不建议大家使用，为什么呢？

首先，ul的list-style-type在不同浏览器下显示的点或者方块的大小不一样，这点很不美观。

再者，positon属性并不好用，我曾今尝试过使用该属性，结果是IE6和以上版本及火狐里显示的方位很难统一。

2.我建议使用background

ul{….;list-style-type:none;….}

li{….;background:url(背景图标) no-repeat 0px 0px;….}

这里no-repeat的作用是使图像不产生平铺效果，0px,0px则是定位图片显示的坐标。

这里再申明一点，给li加背景图片，还需要加上padding-left:任意数字px，否者文字会挡住背景图标，但是同时不得再给li加width,否则会下不同浏览器下兼容出现问题，详见CSS里定位慎用padding属性

3.使用background实现排名列表

其实这很简单，大家只需要变通一下就可以了

ul{….;background:url(路径) no-repeat 1px 2px;….}

应该知道了吧，就是把图片加在ul里而非li里，但不同的是图片是按列顺序整齐排列的1,2,3…..的图片，或者其他你想要的效果，要注意的是每行的高度和图片严密对应。

css里面li标签怎么加图片_分享三种给li标签添加图标的方法相关推荐

如何给html文件夹密码,怎样给文件夹加上密码_分享两种给文件夹设密码的方法...
现在大家习惯把重要的文件或比较隐私的文件存放在电脑上,出于安全考虑,大家会选择给文件夹设密码.但是问题来了,怎样给文件夹加密码呢?估计大多数的人都还不太清楚该怎么设置吧,别着急,这里小编分享两种给文件 ...
pdf怎么转换成图片？分享三种途径
办公时为了分享质量更高的文件,我们有时会选择将PDF文件转换成图片形式,这样无论是清晰度还是别人接收起来效果都会更好一点.那有哪些比较好用的转换方式呢?别着急,我来分享几个途径,可以帮助有同样问题的友 ...
异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
实现精灵图片绝对定位的三种方式（伪）
精灵图片绝对定位的三种方式(伪) 有强迫症的我为此困扰了一上午,说白了还是自己实力不够,想法总被局限. 实现结果如上图中间的为最终满意样品整体用列表写的` 左1: 把整体看成一个背景图加上面文字: ...
c# pictureBox1.Image的获得图片路径的三种方法 winform
代码如下:c# pictureBox1.Image的获得图片路径的三种方法 winform 1.绝对路径: this.pictureBox2.Image=Image.FromFile("D: ...
相似图片搜索的三种算法
相似图片搜索的三种算法想必大家都用google或baidu的识图功能,上面就是我搜索冠希哥一幅图片的结果,这种搜索的核心算法有三种,都是利用信息指纹比较,这些算法都很易懂,下面分别介绍一下: 一.平 ...
ASCII码表，运算符，自加，加号的三种用法
ASCII码表,运算符,自加,加号的三种用法 ASCII码表运算符自加与自减方法入门 ASCII码表定义:使用七个0和1,表示英语字母和转移字符等几个特殊值:0-48,A-65,a-97 运 ...
如何提高图片清晰度？三种方法来帮你！
如何提高图片清晰度?图片在上传到网络后会被压缩,导致图片变得模糊.今天,我将分享三种方法,帮助您提高图片的清晰度. 方法一:使用记灵在线工具工具地址:记灵在线工具 - 更专注于发现工具的实用性该工 ...
(一)JQuery动态加载js的三种方法
Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

css里面li标签怎么加图片_分享三种给li标签添加图标的方法

css里面li标签怎么加图片_分享三种给li标签添加图标的方法相关推荐

最新文章

热门文章