要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片!
使用ul li实现文章排行有序排版布局。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2194.html
微信扫一扫 
支付宝扫一扫
鼠标指向图片实现放大效果-CSS3特效
上一篇
2018年7月14日 上午10:01
javascript-快速掌握DOM技术
下一篇
2018年7月17日 上午9:21
99%的人还看了以下文章
-
3种纯CSS/jquery实现的表格隔行变色，鼠标悬停：hover变色效果
表格隔行显示不同背景颜色，表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…
-
CSS制作简洁的栏目/标题样式
CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…
-
会移动的文字 marquee标签(入门到高级)
会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦，我会移动耶！ </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…
-
解决网页中img图片出现多余空白的方案
网页制作中，不管是table还是DIV+CSS排版时，会遇到浏览器中的图片元素img下出现多余空白的问题，非常常见，如何解决？ <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…
-
css布局基础：定位练习1
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 效果图： 效果说明：故宫文字段落设置背景色黑色透明，覆盖在图片底部。 …
