要制作文章排行前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%的人还看了以下文章
-
跟永哥学HTML5（3）：HTML5新增语义化元素的使用
上节课我们讲了html5与html4的区别，Html5对语法进行了简化，一个htm5文档结构代码如下： <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…
-
css布局基础：定位练习1
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 效果图： 效果说明：故宫文字段落设置背景色黑色透明，覆盖在图片底部。 …
-
第8课：如何做各种超链接？
在这一课，你将学习如何在网页之间做超链接。 如何做超链接？ 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子，它是一个指向www.125jz.com的链接： 例1： <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下： 指向…
-
响应式布局和自适应的区别
客户端，PC、平板、手机，各种尺寸，要给电脑PC和手机分别设计不同的网页吗？要给每一个手机分别设计一个网页吗？ 不需要，因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别： 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小，宽度通常在600像素以下，pc…
-
导航特效：jquery实现当前（活动）菜单样式变化
用户点击导航或菜单上不同的栏目，被选中的导航栏目会变换样式，出现图片或背景颜色的变化，用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前（活动）菜单样式变化，导航菜单模式用的是背景颜色，你可以换成背景图片以符合建站需要。 当前（活动）菜单样式变化实现原理 在html代码中给首页（默认选中）加上class名cur <a href=…
