文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML中如何给li标签添加图标

2024-04-02 19:55

关注

这篇文章主要为大家展示了“HTML中如何给li标签添加图标”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“HTML中如何给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-repeat0px0px;….}

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

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

    3.使用background实现排名列表

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

    ul{….;background:url(路径)no-repeat1px2px;….}

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

以上是“HTML中如何给li标签添加图标”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯