雷速体育在线直播足球:

您的位置:雷速体育答题测试答案 > div+css > css3列表實現數字排行

css3列表實現數字排行

時間:2018-10-25 11:12:51  來源:免費模板網 作者:風雪 閱讀次數 tagscss3

今天介紹一下不用圖片用css實現文章排行榜的效果

css3列表實現數字排行

網頁上經常見到這種效果,實現方式很多,比如制作一個圖片

css3列表實現數字排行

然后定義 ul屬性

css3列表實現數字排行

從后期維護方面這個不太好維護,下面介紹一種純css實現這一的效果

列舉幾個簡單的文章排行榜數字效果

一:使用list-style來顯示數字、圓點、字母或者圖片

<style>
    li{width:300px; border-bottom: 1px dotted #ccc; line-height: 30px; height: 30px; overflow:hidden }
    li{list-style: decimal inside; }
</style>
<ul>
    <li>文章1</li>
    <li>文章2</li>
<li>文章3</li>
    <li>文章4</li>
<li>文章5</li>
    <li>文章6</li>
</ul>

 

二:使用偽元素:before

使用這種方法,需要在父級標簽設置counter-reset:section;

<style>
    ul{counter-reset:section;}
    li{width:300px; border-bottom: 1px dotted #ccc; line-height: 30px; height: 30px; overflow:hidden }
    li:before{counter-increment:section;content:counter(section);display:inline-block;padding:0 6px;margin-right:10px;height:18px;line-height:18px;background:#717070;color:#fff;border-radius:3px;font-size:9px}
    li:nth-child(1):before{background:#ff6a00}
    li:nth-child(2):before{background:#107db4}
    li:nth-child(3):before{background:#56ae11}
</style>
<ul>
     <li>文章1</li>
    <li>文章2</li>
<li>文章3</li>
    <li>文章4</li>
<li>文章5</li>
    <li>文章6</li>
</ul>

三:使用js實現,先引入jquery

<style>
    ul{counter-reset:section;}
    li{width:300px; border-bottom: 1px dotted #ccc; line-height: 30px; height: 30px; overflow:hidden }
    li i{display:inline-block;font-style:initial;padding:0 6px;margin-right:10px;height:18px;line-height:18px;background:#717070;color:#fff;border-radius:3px;font-size:9px}
    .red1{background:#ff6a00}
    .red2{background:#107db4}
    .red3{background:#56ae11}
</style>
<ul>
    <li>文章1</li>
    <li>文章2</li>
    <li>文章3</li>
    <li>文章4</li>
</ul>
 <script type="text/javascript" src="//libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
    listsort()
    //顯示排行
    function listsort() {
        var index = 0;
        $("li").each(function () {
            index++;
            var num = $("<i>" + index + "</i>");
            if (index <= 3)
                num.addClass("red" +index);
            $(this).prepend(num);
        });
    }
</script>

我們可以從以上3種實現方式看出 第2種最簡單和便于維護

本文地址://www.384142.live/bjrm/2018/1025/3062.html

猜你喜歡
欄目推薦
模板推薦

Copyright:雷速体育答题测试答案 www.384142.live 免費模板網 All Rights Reserved 雷速体育答题测试答案   遼公網安備 21010602000376號  遼公網安備:42900402000182號

免責聲明:本站部分資源來自互聯網收集,版權歸原創者所有,如果侵犯了你的權益,我們會及時刪除侵權內容,聯系QQ:1615187561 謝謝合作!

{ganrao} 姚记捕鱼官网版本下载 新能源股票龙头 内蒙11选5前三走势 单机麻将免费下载 河南快3历史开奖结果 长春麻将单机版 3d试机号查询 至尊棋牌公司联系方 河北十一选五走势图2号 三码中特期期提前开 二分时时彩预测 老费博客 网赚如何赚钱 贵阳捉鸡麻将技巧秘 广西快乐双彩今晚开 熊猫四川麻将官方版