专栏首页前端资源分享一个纯CSS样式,显示不同颜色数字的排行榜列表

分享一个纯CSS样式,显示不同颜色数字的排行榜列表

利用纯 CSS 设置 列表的 伪类 :after 实现不同颜色数字的排行榜效果。

代码如下:

HTML:

<ul>
    <li>html中引入调用另一个公用html模板文件的方法19040 ℃</li>
    <li>input[type=file]去掉“未选择任何文件”及样式改进10786 ℃</li>
    <li>Jetbrains系列激活补丁JetbrainsCrack-2.8更新6161 ℃</li>
    <li>js获取input上传文件的文件名和扩展名的方法5683 ℃</li>
    <li>HTML img src图片路径不存在,则显示一张默认图片的方法5324 ℃</li>
    <li>HTML引入文件的绝对路径、相对路径、根目录5284 ℃</li>
    <li>HTML img src图片路径不存在,则显示一张默认图片的方法5324 ℃</li>
    <li>HTML引入文件的绝对路径、相对路径、根目录5284 ℃</li>
</ul>

CSS:

需要给添加伪类的元素设置 position: relative;

ul{
    list-style: none;
}
li{
    position: relative;
    padding-left: 30px;
    height: 36px;
    line-height: 36px;
}
li:after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    background: #999999;
    text-align: center;
    position: absolute;
    left: 0;
    top: 8px;
}
li:first-child:after {content: "1";background: #FD8C84;}
li:nth-child(2):after {content: "2";background: #FFCC99;}
li:nth-child(3):after {content: "3";background: #7FD75A;}
li:nth-child(4):after {content: "4";background: #CCCCFF;}
li:nth-child(5):after {content: "5";background: #60C4FD;}
li:nth-child(6):after {content: "6";}
li:nth-child(7):after {content: "7";}
li:nth-child(8):after {content: "8";}

声明:本文由w3h5原创,转载请注明出处:《分享一个纯CSS样式,显示不同颜色数字的排行榜列表》 https://www.w3h5.com/post/241.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • li、img等元素设置inline-block后的空白间距问题

    关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

    德顺
  • 一个tab切换的方法 siblings()

    项目中经常会用到 tab 切换功能,有的还会有一个 更多 按钮,我们可以用下面这个方法实现一个多功能的 tab 切换。

    德顺
  • 点击a页面链接跳转b页面某个tab切换的实现

    解释一下,首先有一行 .tab 是 tab按钮, .inner 是对应的三个 li 默认隐藏,第几个 tab 选中就对应的显示第几个 li 。 

    德顺
  • jquery 事件委托 - delegate()

    事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也...

    Devops海洋的渔夫
  • 如何将文章列表用<li>分两列显示

      我们平时用ul或ol标签来罗列文章列表时默认是一列,为了美观起见,想把它们两列显示要如何操作呢?怎么用css定义它们?   其实相对比较简单,用几行css样...

    ytkah
  • JavaScript-事件委托(事件代理)

    今天给自己的知识结构填个坑,再复习下JS的事件代理。 事件代理可以给JS批量生成的DOM元素添加事件,并且还可以提高效率,因为你确实不用给每个DOM节点添加事件...

    web前端教室
  • pyhon 列表的增删改查

    py3study
  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study
  • js 为 li 循环添加 class

    前段时间有个小伙伴想在新闻列表页面的 ul 里面为每个 class 循环添加带 1  2  3  4的 class,正巧昨天做一个站也用到了类似 for 循环,...

    Savalone
  • li、img等元素设置inline-block后的空白间距问题

    关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

    德顺

扫码关注云+社区

领取腾讯云代金券