纯CSS制作热门文章排行,且前3名背景不同

纯CSS制作热门文章排行,且前3名背景不同

要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片!

纯CSS制作热门文章排行,且前3名背景不同

使用ul li实现文章排行有序排版布局。

 

 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2194.html

(0)
江山如画的头像江山如画管理团队
上一篇 2018年7月14日 上午10:01
下一篇 2018年7月17日 上午9:21

99%的人还看了以下文章

  • jquery动态新增元素节点.click点击事件失效的2个解决方法

    问题: ajax读取留言列表,每条留言后面有个回复按钮,class为“reply”,用$(“.reply”).click(function(){ //do something… }),后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。 解决方法: 最简单的方法就是直接在标签中写onclick=”&#8…

    2019年2月16日
    15.3K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    7.1K0
  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    9.9K0
  • 第15课:最后提示

    祝贺!你已经进入最后一课了! 我已经学到全部知识了? 如果你已经学完以上教程,恭喜你,你已经学到了很多关于HTML的知识,并且完全有能力创建自己的网站!不过,你所学到的只是基础知识,还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。 在最后这一课中,我们将给予一些最后提示: 首先,在HTML文档中,应保持正确的顺序与结构。令你的HTML文档具有良…

    2018年1月18日
    7.2K0
  • 响应式布局和自适应的区别

    客户端,PC、平板、手机,各种尺寸,要给电脑PC和手机分别设计不同的网页吗?要给每一个手机分别设计一个网页吗? 不需要,因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别: 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小,宽度通常在600像素以下,pc…

    2019年10月15日
    5.2K0
  • H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

    frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

    2020年1月1日
    13.0K0

发表回复

登录后才能评论