CSS如何写排行榜
工具/原料记事本或是编辑器案例一1
本安全将使用三种方式来实现以下图片中的排行榜格式

第一种方式:可以用list-style来显示代表排行的图片或者数字等等,实现代码如下图所示

第二种方式:使用伪元素before,先在父级标签里设置counter-reset:section再使用counter-increment 计数器属性设置来实现
实现代码如下图所示

counter-reset与counter-increment的基本用法如下图所示

第三种方式:先在父级标签里设置counter-reset:section,再引入jquery,然后使用js
实现代码如下图所示

本案例要实现以下图片中的排行榜样式

先设置边框等基本样式,如颜色,字体,宽度等等,实现代码如下图所示

再设置排行的样式,如边框,高度,行高,背景,位置等等,实现代码如下图所示

完成样式设置之后,最后设置每一个排行的内容,如果是可链接的,还要放入链接网址等等,实现代码如下图所示









