免費模板網標簽tags 更多...
整站模板下載

加入代代SEO你會得到什么?

1、

代代論壇,實戰原創教程/附軟件+課件 (終身)!

2、

代代SEO會員群,提供售后問答 永久加群。

3、

主流空間商服務器核心永久代理,官方5-7折。

4、

輔助排名系統/整站排名系統 永久核心代理。

5、

千套源碼/官網單獨售價幾百R的源碼 永久VIP!

6、

站群/泛解析類程序“精品論壇”永久VIP。

7、

親測各類插件/工具/源碼等收費資源 永久下載。

8、

終身會員價格298,加入聯系QQ:1615187561

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

雷速体育比分官网:css3列表實現數字排行

時間:2018-10-25 來源:網上收集 作者:Tony 閱讀次數 tagscss3

雷速体育答题测试答案 www.384142.live 今天介紹一下不用圖片用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號

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

{ganrao}