学做网站培训课程介绍

当前位置:

CSS3给列表前插入项目序列编号(计数器)

在实际网站制作过程,往往需要给一个列表添加项目序列编号,使数据给用户展现更加清楚。如下图:

CSS3给列表前插入项目序列编号

给一个列表添加这样的项目序列编号,我们可以使用CSS3的before伪类来添加计数器轻松实现。代码如下:


<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>给列表添加连续的序列编号</title>
</head>
<style type="text/css">
li:before{
 content: counter(mycounter);
}
li{
 counter-increment: mycounter;
}
</style>
<body>
<ul>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
</ul>
</body>
</html>

除了使用上面的CSS3添加计数器的方法之外,我们还可以使用比较笨的方法:wordpress调用文章列表的时候递增序列号方法

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过CSS样式可以控制网页中各个元素的显示方式,通过CSS样式可以在网页中画出一个三角形,圆形等形状。(了解更多CSS知识,请学习CSS视频教程)CSS
  • 什么是自适应网页随着网站浏览设备屏幕大小不同(包括PC,IPAD,手机等浏览设备),为了适应不同的屏幕,做网站制作时可以自动根据浏览网站的屏幕尺
  • 这里的站点统计列表,并不是之前讲的如何给网站添加统计代码,而今天讲的统计列表是指统计网站文章数目、评论数目、友链数等11个统计数据。下
  • 在之前的网站制作文章中讲到了wordpress如何调用当前分类下面的子分类的方法,但这种方法只能调用出子分类的名称,无法去调用出子分类下面的文章列表
  • 我们在浏览网站时,会发现有些网站的顶部会有天气预报功能,并且可以根据用户所在的城市自动变换成当地的天气预报信息。那么我们在自己建网站时,怎么
  • DW网页中如何插入图片 视频教程 (1184549 次浏览)
    DW给网页插入图片一般有二种方法:一种是插入拥有ALT属性的图片,这在我们的企业网站制作教程中经常用到。另一种是插入背景图片,实现在图片
  • 在实际网站制作过程,往往需要给一个列表添加项目序列编号,使数据给用户展现更加清楚。如下图:给一个列表添加这样的项目序列编号,我们可以
  • 很多时候我们在做文章列表前面的序号时都直接采用的是背景图片来实现的,但是这样我们在实际写页面过程中需要手动调整每个序号间的间距,对于排版来说
  • 使用wordpress程序做网站时,我们通常通过动态代码去调用某个版块的文章列表。这种文章列表一般是使用无序列表标签<ul>标签来排列的。但为了一
  • 很多朋友在使用织梦程序做网站的过程中,或者在DEDECMS织梦搬家中,难免需要添加一些测试文章用于测试网站功能模板等,还有些人朋友网站改版需要变更
  • 现在很多的网站上会有数字展示,为了让效果看起来更加高大上,会让这些数字变化展示,数字翻滚计数到指定数字。效果如下图:下面介绍一下这种