要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片!
使用ul li实现文章排行有序排版布局。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2194.html
微信扫一扫 
支付宝扫一扫 
99%的人还看了以下文章
-
HTML5画布(Canvas)速查表
HTML5 <canvas> 标签用于绘制图像。<canvas> 元素本身仅仅是图形的容器，必须使用脚本来完成实际的绘图任务。HTML5 <canvas> 可用于在画布上绘制文本、线条、矩形、圆形等等。 HTML5画布(Canvas)元素 <canvas id=”myCanvas” width=”500″ heigh…
-
vue学习-我的第一个vue代码
创建一个 .html 文件，然后通过如下方式引入 Vue： <!– 开发环境版本，包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者： <!– 生产环境版本，优化了尺寸和速度 –>…
-
跟永哥学HTML5（6）：H5表单及表单验证
表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式，而不使用任何JavaScript。 -
跟永哥学HTML5（3）：HTML5新增语义化元素的使用
上节课我们讲了html5与html4的区别，Html5对语法进行了简化，一个htm5文档结构代码如下： <!doctype html> <html> <head> <meta charset=”utf-8″> <title>无标题文档</title> </head> <…
-
css布局基础：定位综合练习
主要知识点： 1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位） position:static/relative/absolute/fixed/sticky。 2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。 整体效果图： 效果说明： 1、随着网页向下滚动，当导航到达窗口顶端（t…
-
纯JS实现的验证码-可自定义长度和字符
纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…
