要制作文章排行前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+CSS3制作网页实例：HTML5入门
文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面，然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…
-
CSS实现段落首字下沉效果的2种方法
CSS实现段落首字下沉效果方法一 在CSS布局中，通过设置首字的大小并向左浮动，从而使得首字与其他字符区别；通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…
-
鼠标放上去，图片上方动态显示半透明说明文字（源码）
<style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…
-
Marquee标签实现跑马灯、滚动公告、通知效果
1.Marquee基本语法 <marquee> … </marquee> 实例演示：会移动的文字(Marquee) <marquee>啦啦啦，我会移动耶！</marquee> 2.文字移动属性 （1）方向 ：direction=# #=left, right,up,down 例： <marqu…
-
第2课：HTML是什么？
HTML是什么？ HTML是一门语言，它令我们可以在因特网上展示信息。你所看到的网页，是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码，只需在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。 对于生手来说，HTML代码看似很复杂，不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么？ 如果你要制作网站的话，学习HTML是不可避免的。即…