Use css3 to display the topic News list (numbers) and css3 News list

Use css3 to display the topic News list (numbers) and css3 News list

List several simple rankings of articles.

1. Use list-style to display numbers, dots, letters, or images

<Style> li {width: 300px; border-bottom: 1px dotted # ccc; line-height: 30px; height: 30px; overflow: hidden} li {list-style: decimal inside ;}</style> <ul> <li> Article 1 </li> <li> Article 2 </li> </ul>

2. Use the pseudo element before.

To use this method, you need to set counter-reset: section in the parent label;

<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: # mongodb4} li: nth-child (3): before {background: #56ae11} </style> <ul> <li> Article 1 </li> <li> Article 2 </li> <li> Article 3 </li> <li> article 4 </li> </ul>

Iii. Implement with js. Introduce jquery first.

<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: # mongodb4 }. red3 {background: #56ae11} </style> <ul> <li> Article 1 </li> <li> Article 2 </li> <li> Article 3 </li> <li> article 4 </li> </ul> <script> listsort () // display the ranking 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>

Compare the three methods, whether from the amount of code, or special effects, the second method is recommended, and maintenance

Address: http://cssteach.com/html/show-12-88.html