纯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)
江山如画的头像江山如画管理团队
鼠标指向图片实现放大效果-CSS3特效
上一篇 2018年7月14日 上午10:01
javascript-快速掌握DOM技术
下一篇 2018年7月17日 上午9:21

99%的人还看了以下文章

  • 第5课:到目前为止学到了些什么?

    上一课我们已经学习了这些: <html> <head><title></title></head> <body> </body> </html> 网页标题(title)写在head(头部)里:<title>网页标题写在这里</title>。…

    2018年1月20日
    7.5K0
  • Less编写及使用快速入门

    前面我们学习了《4个案例入门,学会LESS使用》,今天一起来学习如何编写,编译并使用LESS LESS的编写 LESS的使用是很容易的,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。 LESS的编译 GUI编译工具 为方便起见,建议初学者使用GUI编译工具来编译.less文…

    2019年7月17日
    8.5K0
  • 5种 CSS 实现DIV中内容垂直居中的方法

    使用 CSS 实现DIV中内容垂直居中并不容易,有些方法在一些浏览器中无效。 今天中国网页设计给大家分享使DIV中对象垂直集中的5种不同方法,以及它们各自的优缺点。 CSS 实现DIV中内容垂直居中方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 <div class=…

    2018年9月23日
    13.2K0
  • css布局基础:浮动和清除浮动练习2

    主要知识点: 1、浮动:让元素脱离标准流,从而实现灵活的布局效果。 2、浮动只能左右,不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷,清除浮动的3种方法: 方法1:通过overflow属性 方法2:通过clear属性 方法3:通过伪元素选择器(推荐) 效果图: 参考: <header> <img …

    2020年4月4日
    4.3K0
  • 第1课:开始学习HTML

    建议你每天学习2到3课,然后花点时间来实验你所学到的新知识。 学习制作网站是件充满乐趣的事,而且一旦掌握它,你便会感到无比满足。好的,不多说,我们现在就开始吧! 这第一课中,我们简要介绍制作网站所需的工具。 需要哪些工具? “浏览器(browser)”你有了,它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。 也许你听说过、甚至用过一些网页制作工具…

    2018年1月20日
    11.1K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    6.3K0

发表回复

登录后才能评论