要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片!
使用ul li实现文章排行有序排版布局。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2194.html
微信扫一扫 
支付宝扫一扫 
99%的人还看了以下文章
-
中国省、市区二级联动下拉选择框-JS源码
中国省、市区二级联动下拉选择框，包含所有省份及市县信息。 当选择省份下拉选择框时，市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”，市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里（js/common.js），中国网页设计在js文件里定义了两个数组，分别存放省份和对应的市区。 //省份 var pr…
-
跟永哥学HTML5（2）：html5与html4的区别
我们现在web前端开发的网页，一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑，html 4.0和HTML5有什么区别? hmtl5与html4的区别？ 先来看看HTML5推出的理由： 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript，在另一个浏览器中不能运行。原因：各浏览器规范不统…
-
第7课：元素的分类与标识（class和id）
有时，你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色？如何实现把网站上的链接分为不同的类，并对各类链接分别应用不同的样式？这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说，我们有两个由链接组成的列表。…
-
菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)
网页开发时，导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同，如导航的最后一个菜单不再需要分隔符或右边的空白间距，新闻或文章列表的最后一项不需要底边距，列表一般都会有分割线，但是最后一个列表没有分割线等。 如文章列表如下： <ul class=’posts’> <li class=’post’> <h3>中国…
-
3个超酷的CSS3图片动画特效：图片变圆角，放大，旋转
本实例制作需要学习《CSS3 transition transform属性及实例详解》，学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.
