css教程 内容:10

css列表自动添加序号+背景美化方法

  • 查看作者
  • 很多网站侧边栏都会搞热门文章,热门评论...按序号罗列排名,一般都是用PHP实现,但对新手不太友好。其实我们也可以用CSS来实现列表自动添加序号。

    html代码

    <ul>
     <li>标题</li>
     <li>标题</li>
     <li>标题</li>
     <li>标题</li>
     <li>标题</li>
    </ul>

    css样式

    ul {
        margin: 0;
        padding: 0;
        counter-reset: li;
    }
    ul > li:before {
        content: counter(li);
        counter-increment: li;
    }

    PS:通过伪元素counter-increment属性,可以实现自动添加序号

    css背景

    ul > li:nth-child(1):before,ul > li:nth-child(2):before,ul > li:nth-child(3):before{color: #fff;}
    ul > li:nth-child(1):before {
        background: #FF6B57;
    }
    ul > li:nth-child(2):before {
        background: #2ea7e0;
    }
    ul > li:nth-child(3):before {
        background: #6bc30d;
    }

    PS:排行前三显示不同的背景颜色,通过nth-child选择器来实现。

    请登录之后再进行评论

    登录
    最新评论
    0U币
    已有1679人浏览, 浏览收益0, 礼物收益0, 打赏收益0, 点赞收益0, 广告收益0, 获得总收益0U币
    也可开通会员全场文章免费看
    免费教程