给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…..的图片，或者其他你想要的效果，要注意的是每行的高度和图片严密对应。

给li 标签平添图标的三种方法相关推荐

手机计算机桌面图标恢复,三种方法快速找回桌面图标（附电脑文件恢复教程）...
三种方法快速找回桌面图标!大家应该都喜欢把自己经常用到的图标放到桌面上吧.当我们需要进行一些操作的时候,直接点击桌面上的图标就能进入相应的界面.大大节省了我们的时间,让我们的办公更加便捷.如果我们的桌 ...
MFC程序隐藏任务栏图标的三种方法
在VC编程中,有时候我们需要将我们的程序在任务栏上的显示隐藏起来,我试过几种方法,下面我介绍一下我知道的三种方法. 第一种方法是设置窗口WS_EX_TOOLWINDOW扩展样式,通过在OnInitDi ...
使用阿里矢量图标的三种方法
将你要使用的icon图标下载到本地 fontclass方式引用: 引入下载文件中的css文件与js文件第二张方式symbol方式引用: 引用第一步引用完成第三张方法三.unicode引用第一 ...
css里面li标签怎么加图片_分享三种给li标签添加图标的方法
我们在页面布局时,经常会用到li标签,单独使用li标签比较单调,有时候为了页面效果,需要加入图片,那怎么在li标签中添加图片呢?这篇文章就和大家分享三种给li标签添加图标的方法,希望对你有用. 1.使 ...
如何去掉友情链接的li标签的三种方法
{dede:flink row="24" type="textall"}解析出来的是带LI ,那如何去掉LI了,有两种方法 1.{dede:flink lin ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
引入字体图标的三种方式
@引入字体图标的三种方式TOC Unicode引用 fontclass引用 symbol引用--此种引用方式支持多色图标字体包: 1.icomoon字库https://icomoon.io/ 2.阿 ...
svg标签和svg文件区别_SVGO减少SVG文件大小的三种方法
svg标签和svg文件区别 This article is part of a series created in partnership with SiteGround. Thank you for ...
html清除图片上下间距,css - 三种方法解决LI和内部Img的上下间距问题
在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...

给li 标签平添图标的三种方法

给li 标签平添图标的三种方法相关推荐

最新文章

热门文章