你的位置:首页 > 网页设计

[网页设计]使用css3实现文章新闻列表排行榜(数字)


列举几个简单的文章排行榜数字效果

一:使用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></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></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>  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>

比较三种方法,无论是从代码量、还是特效,推荐第二种方法,而且便以维护

地址:http://cssteach.com/html/show-12-88.html