要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片!
使用ul li实现文章排行有序排版布局。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2194.html
微信扫一扫 
支付宝扫一扫 
99%的人还看了以下文章
-
Flex布局“弹性盒子”
一．概念 flex布局： Flex Box 的缩写，意味“灵活的盒子”或“弹性盒子”，所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素，成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员，称为flex项目。 <div style=“ display:flex;”> &l…
-
第12课：高度和宽度
到目前为止，我们还没有在元素尺寸方面给予关注。在这一课，我们将看到为元素定义高度和宽度是十分简单的。 设定宽度[width] 设定高度[height] 设定宽度[width] 你可以通过width属性来设定一个元素的宽度，即在水平方向上的尺寸。 下面是一个简单的例子，它为我们提供了一个可以容纳文本的盒子： div.box {width: 200px;bord…
-
第8课：组织元素（span和div）
pan和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。 在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本…
-
6个实例教你学会JavaScript的箭头函数
在看别人JS代码时，经常会看到一些类似下面代码的箭头函数，如果你没有接触过箭头函数，估计要看晕了，这些都是什么东西？今天中国网页设计通过6个实例，教给大家掌握箭头函数的语法及使用。
-
跟永哥学HTML5（5）：正确使用HTML5的nav和figure
这节课就给大家讲解常见的HTML5标签错误使用写法，帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素，我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说，我们不应该滥用超语义化的元素。不幸的是，nav就是这样一个被滥用的例子。 nav元素的规范描述如下： n…
