专栏首页前端资源分享一个纯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

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.w3h5.com复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • [数据可视化]绘制持仓榜单的“棒棒糖图”

    图中线的两端是圆点或者菱形,旁边都有标注持仓证券商和相对应的持多仓数或持空仓数,且左右线颜色不同。画图思路大体就是:先画水平线图,再用 scatter 散点图画...

    Crossin先生
  • 我的Web开发实战总结(一)写在前面截图快速查询与快递单号我的待办事物办理与信息查询公告通知销售业绩与新客户业绩工作看板排行榜写在最后

    最近一直在做项目,感觉没什么分享的所以一直没写。 今天不上班,就把最近做的一个demo做个简单的总结。

    wblearn
  • 101种让你的网站更棒的方法

    上周我和一个老客户聊天,她和我说,“Nick,我觉得我的网站需要改进,但是我却不确定到底需要做什么”。

    疯狂的技术宅
  • 从零开始学 Web 之 CSS(一)选择器

    CSS 全称为 Cascading Style Sheets,中文翻译为“层叠样式表”,简称 CSS 样式表,所以称之为层叠样式表(Cascading Styl...

    Daotin
  • Excel动画图表示例:Excel也可以创建可视化的随时间而变化的排名

    本文列出的创建动画图表的步骤并不是孤立地考虑的,必须考虑整个过程。需要什么原始数据?如何将其聚合以显示想要什么?在绘制图表之前,是否需要对聚合数据进行进一步处理...

    fanjy
  • HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

    1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接...

    别先生
  • HTML+CSS基础到精通系统学习

    1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使...

    奶糖味的代言
  • 1.5 万字 CSS 基础拾遗(核心知识、常见需求)

    本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长,但偏基础,适合初级中级前端阅读,阅读的时候请适当跳过已经掌握的部分。

    用户4456933
  • 1.5 万字 CSS 基础拾遗(核心知识、常见需求)

    本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长,但偏基础,适合初级中级前端阅读,阅读的时候请适当跳过已经掌握的部分。

    coder_koala
  • 非样式布局

    lesM10
  • 关于短视频平台开发框架结构以及界面设计分析

    首页:短视频平台把视频放在了首页,界面则相对简洁,顶部导航栏只有菜单,关注,发现,同城录像等按钮。短视频是随机呈现的,用户只能够刷新页面更换想看的视频。但好在用...

    布谷安妮
  • 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode

    Sb_Coco
  • CSS中基本元件的属性设置

    版权声明:本文为博主原创文章,转载请注明出处。 ...

    魏晓蕾
  • 【CSS进阶】CSS 颜色体系详解

    Sb_Coco
  • 03.HTML头部/CSS/图像/表格/列表

    03.HTML头部/CSS/图像/表格/列表 HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义...

    Java帮帮
  • CSS基础

    CSS基础 CSS基础知识 选择器(重要!!!) 继承、特殊性、层叠、重要性 CSS格式化排版 单位和值 盒模型 浮动 相对定位与绝对定位 布局初探 CSS基础...

    用户1667431
  • Power BI业绩和排名组合显示

    对比是常见的一种发现业务异常的方式,比如同期对比,目标对比,排名对比。最普通的排名对比如下表所示:

    wujunmin
  • 2022 年的 CSS 全览

    2022年将成为 CSS 最伟大的一年。无论是在功能还是合作浏览器的功能发布方面,合作目标是实现 14 个功能。

    ConardLi
  • 娱乐圈排行榜动态条形图绘制

    图1是用第500期(截止2019年7月6日)到538期(截止2020年3月28日)的数据绘制的动态条形图。我是爬虫爬下来的数据,如果不想爬虫可直接到公众号中回复...

    阿黎逸阳

扫码关注云+社区

领取腾讯云代金券