CSS3美化有序列表

標籤：src   ges   images   splay   border   text   font   add   rem   

效果：

<ol class="rightList">                        <li>                            <span>周波</span>                            <span>19</span>                            <span><i class="iconfont icon-arrow-up-solid"></i></span>                        </li>                        <li>                            <span>王一山</span>                            <span>16</span>                            <span><i class="iconfont icon-arrow-down-solid"></i></span>                        </li>                        <li>                            <span>周波</span>                            <span>19</span>                            <span><i class="iconfont icon-minus"></i></span>                        </li>                        <li>                            <span>周波</span>                            <span>19</span>                            <span><i class="iconfont icon-arrow-up-solid"></i></span>                        </li>                        <li>                            <span>周波</span>                            <span>19</span>                            <span><i class="iconfont icon-minus"></i></span>                        </li>                                            </ol>

 

 

.rightList{                    margin-left: 180px;                    // border:2px solid red;                    // background-color: #eee;                    counter-reset: num; /* 建立一個計數器 */                                        >li{                        height:28px;                        line-height: 28px;                        padding-left:45px;                        background-color: #eee;                        margin-bottom: 4px;                        border-radius: 6px;                        position: relative;                        >span{                            display: inline-block;                            width:31%;                            // background: #fff;                            text-align: center;                        }                        >span:first-child{                            text-align: left;                        }                        .icon-arrow-up-solid{                            color:red;                            font-size: 14px;                        }                        .icon-arrow-down-solid{                            color:#78c06e;                            font-size: 14px;                        }                    }                    >li:nth-child(1){                        color:red;                    }                    >li:nth-child(1)::before{                        background-color: red;                        color:#fff;                    }                    >li:nth-child(2){                        color:#f60;                    }                    >li:nth-child(2)::before{                        background-color: #f60;                        color:#fff;                    }                    >li:nth-child(3){                        color:#5c6bc0;                    }                    >li:nth-child(3)::before{                        background-color: #5c6bc0;                        color:#fff;                    }                    >li::before{                        content: counter(num);              counter-increment: num;                         height: 28px;                         width: 28px;                         line-height: 28px;                         position: absolute;                         left: -10px;                         top: 50%;                         margin-top: -17px;                         background: #87ceeb;                         font-weight: bold;                        font-size: 13px;                                                border: 3px solid #fff;                         text-align: center;                         border-radius: 50%;                     }                    >li,                    >li::before{                        -webkit-transition: all 0.3s ease-out;                         -moz-transition: all 0.3s ease-out;                         -ms-transition: all 0.3s ease-out;                         -o-transition: all 0.3s ease-out;                         transition: all 0.3s ease-out;                    }                    >li:hover{                        background-color:#ddd;                    }                    >li:hover::before{                        left:-20px;                        // -moz-transform: rotate(360deg);                         // -webkit-transform: rotate(360deg);                         // -o-transform: rotate(360deg);                         // -ms-transform: rotate(360deg);                         // transform: rotate(360deg);                    }                }

 

CSS3美化有序列表