欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用css3实现文章新闻列表排行榜(数字)

程序员文章站 2022-04-30 21:46:01
...
列举几个简单的文章排行榜数字效果

使用css3实现文章新闻列表排行榜(数字)

一:使用list-style来显示数字、圆点、字母或者图片

  • 文章1
  • 文章2

二:使用伪元素:before

使用这种方法,需要在父级标签设置counter-reset:section;

  • 文章1
  • 文章2
  • 文章3
  • 文章4

三:使用js实现,先引入jquery

  • 文章1
  • 文章2
  • 文章3
  • 文章4

比较三种方法,无论是从代码量、还是特效,推荐第二种方法,而且便以维护

地址:http://cssteach.com/html/show-12-88.html