首页 > Web开发 > 详细

CSS3的counter()用法详解

时间:2015-11-05 06:32:36      阅读:196      评论:0      收藏:0      [点我收藏+]

counter()的定义和用法:
是一个函数,其主要配合content一起使用。
使用counter()来调用定义好的计数器标识符。
语法结构:

counter(<identifier>,list-style-type)

参数解析:
(1).<identifier>:counter-increment定义的属性值<identifier>,用来告诉该文档插入的计数器标识符名称是什么。
(2).list-style-type:设置计数器的风格,有点类似于list-style-type。默认情况之下取值为十制,但你也可以重置这个样式风格,比如upper-roman或者upper-alpha等。
此参数值列表如下:

disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
inherit

浏览器支持:
(1).IE浏览器支持此属性。
(2).谷歌浏览器支持此属性。
(3).火狐浏览器支持此属性。
(4).opera浏览器支持此属性。
(5).safria浏览器支持此属性。
特别说明:只有IE7或者IE7以下的浏览器不支持。
继承性:
无继承性。
实例实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
ul li{list-style-type:none;}
ul li{counter-increment:antzone;}
ul li:before{content:counter(antzone)".";color:red;}
</style>
</head>
<body>
<ul>
  <li>蚂蚁部落欢迎您</li>
  <li>蚂蚁部落欢迎您</li>
  <li>蚂蚁部落欢迎您</li>
  <li>蚂蚁部落欢迎您</li>
</ul>
</body>
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=1154

更多css3知识可以参阅:http://www.softwhy.com/css3/

CSS3的counter()用法详解

原文:http://my.oschina.net/u/1468670/blog/526070

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!