纯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%的人还看了以下文章

  • 会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦,我会移动耶! </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    2018年7月30日
    7.0K0
  • 第11课:边框(border)

    边框(border)可以有多种用途,比如作为装饰元素或者作为划分两物的分界线。在设置边框方面,CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义,其值可以是“thin”(薄)、“medium”(普通)或“thick”(厚)等…

    2020年2月25日
    5.7K0
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    4.8K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    4.8K0
  • js验证表单验证,包括用户名、密码、确认密码等,用户注册页面实例

      本文是js验证表单输入的入门级教程,要求你会基础的HTML,JS知识。 页面HTML 表单代码: <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…

    2019年9月5日
    11.0K0
  • 跟永哥学HTML5(1):认识html5

    HTML5(简称H5),是超文本标记语言(HTML)的第五次重大修改,是最新一代的超文本标记语言,它不单单是一种标记语言,更为下一代 Web 提供了全新功能 。

    2018年1月21日
    2.6K0

发表回复

登录后才能评论