分享一个纯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";}
"收藏是宝,翻阅是金"
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!本文地址:https://2jc.cn/article/course/451.html
人阅读
发表评论

小秋同学
不予博名 做好自己
网站简介
热门文章
修改eyoucms后台登录的样式方法
1930 阅读
简介从eyoucms这个产品的发布到今天的正式版已经更新到版本1.4.0,不过后台页面只能自己看到,...
百度分享官网挂了,献出自用的百度分享代码
1726 阅读
不知道什么时候开始,百度分享官网挂了,导致后来使用主题的客户无法使用百度分享,今天把自用的代码分享出...
JS禁止查看网页源代码的简单实现方法
1661 阅读
JS禁止查看网页源代码的简单实现方法在项目开发中有时会遇到不想让别人轻易查看到网站的源代码信息,我们...
自适应网站布局为什么我要抛弃rem,改用vw?
1646 阅读
你还在用rem弹性布局吗?在html文件头部放入一大段压缩过的js代码,是不是让你很难受?来了解下v...
如何在易优文章编辑器里面加入新的字体
1606 阅读
以增加仿宋,仿宋_GB2312两种字体为例,打publicpluginsUeditorlangzh-...
有时候 分段做个小化线点缀下 也是挺好看的 CSS 字段属性说明:border-top: 1px ...
SEO优化
网站做好SEO优化务必改正的几个大问题
1517人阅读
2019年百度SEO优化发展的七大趋势
1377人阅读
单页SEO技术,用了不同的网站做出的效果技术分享
1331人阅读
网站关键词布局优化教程_SEO入门教程分享,网站优化教程
1309人阅读
新建网站搜索引擎不收录怎么办,新站上线一个月不收录,该怎么解决
1294人阅读
如何优化网站来增加网站关键词库数量
1278人阅读