CSS3计数器的使用-遁地龙卷风
结合::before实现自定义列表
body
{
counter-reset:dnf;
}
div::before
{
content:counter(dnf) ".";
counter-increment:dnf;
}
<body>
<div>dnf</div>
<div>dnf</div>
<div>dnf</div>
<div>dnf</div>
</body>
（1）
counter-reset:dnf会在解析到相应元素执行，body只有一个，所以只执行一次
重置、定义dnf计数器，默认0，可以指定默认值
counter-reset:dnf 10;
可以定义多个计数器
counter-reset:dnf 10 lol;
(2)
content:counter(dnf) ".";//1
counter-increment:dnf; //2
无论2语句在1前面还是在1后面都会优先执行，默认每次增长1，可自己指定
counter-increment:dnf 2;
1语句默认显示数字，还可以是其他list-style-type属性支持的任意值
content:counter(dnf,lower-alpha) ".";
小写英文字母a,b,c,d
CSS3计数器的使用-遁地龙卷风的更多相关文章
- CSS3过渡详解-遁地龙卷风
第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...
- jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...
- 逻辑思维面试题-java后端面试-遁地龙卷风
(-1)写在前面 最近参加了一次面试,对笔试题很感兴趣,就回来百度一下.通过对这些题目的思考让我想起了建模中的关联,感觉这些题如果没接触就是从0到1,考验逻辑思维的话从1到100会更好,并且编程简易模 ...
- JQuery data方法的使用-遁地龙卷风
(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...
- JQuery simpleModal插件的使用-遁地龙卷风
(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...
- css3径向渐变详解-遁地龙卷风
(-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...
- CSS3圆角边框的使用-遁地龙卷风
0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50 ...
- 不用媒体查询做web响应式设计-遁地龙卷风
(0)写在前面 讲述知乎上看到的一篇文章中的一个案例,让我脑洞大开,佩服至极,特意第二天找到原文赞赏了 5元,原文地址https://zhuanlan.zhihu.com/p/27258076,案例用 ...
- HTML中的标记-遁地龙卷风
第三版 上一版本在未经验证的情况下,盲目的认为很多东西是那样,造成错误,非常抱歉. 0.什么是标记 <input type="checkbox" checked />& ...
随机推荐
- ArcGIS Server 10.1 for Linux典型问题总结
关闭开启server服务: [gis@localhost ArcGISServer]$ cd /home/gis/arcgis/server [gis@localhost server]$ ./sto ...
- rem是如何实现自适应布局的？
http://caibaojian.com/web-app-rem.html 使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应适配也是同个道理,不过是js更精确一点.使用媒体查询: html ...
- Mac技巧
////////////////////////////////////////////////////////////////////////////////PC键盘在Mac上的映射Ctrl = C ...
- sufeinet
http://www.sufeinet.com http://tool.sufeinet.com/
- java.lang.ClassNotFoundException与java.lang.NoClassDefFoundError的区别
java.lang.ClassNotFoundException与java.lang.NoClassDefFoundError的区别 以前一直没有注意过这个问题,前两天机缘巧合上网查了一下,然后自 ...
- Effective Objective-C 2.0 — 第10条：在既有类中使用关联对象存放自定义数据
可以通过“关联对象”机制来把两个对象连起来 定义关联对象时可指定内存管理语义,用以模仿定义属性时所采用的“拥有关系”与“非拥有关系” 只有在其他做法不可行时才应选用关联对象,因为这种做法通常会引入难于 ...
- Python开发【第十九篇】：Python操作MySQL
本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...
- visio2007使用记录
安装时, 需要有选择性的安装, 不是所有的组件 都需要安装, 如office工具, office共享功能, visio中的.net可编程支持就用不着安装.... visio中的cad(加载项), 可以 ...
- 如何在html结构标签中使用js 变量 生成可变化的 title标题?
如果form的action不写, 或 action="", 那么就表示 将数据发送到 本文件 当前文件自身... 1. 在jquery的选择器中, $()括号中的内容是一个 exp ...
- CF451C Predict Outcome of the Game 水题
Codeforces Round #258 (Div. 2) Predict Outcome of the Game C. Predict Outcome of the Game time limit ...