[ css 计数器 counter ] css中counter计数器实例演示一

<!DOCTYPE html>
<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type=‘text/css‘>
    html{font:400 13px/1.2em Courier New;}
    .list-item{padding-left:15px;}
    p{text-indent:25px;}
    .list-item{counter-reset:reset 0;}
    #main{counter-reset:counter 0;}
    .list-item:before{
        content:counter(counter)‘.‘;
        counter-increment:counter 1;
    }
    p:before{
        content:counter(counter)‘-‘counter(reset)‘.‘;
        counter-increment:reset 1;
    }
</style>
</head>
<body>
    <div id=‘main‘>
        <div class=‘list‘>
            <div class=‘list-item‘>list-item_01
                <p>this is a test</p>
                <p>this is a test</p>
            </div>
            <div class=‘list-item‘>list-item_02
                <p>this is a test</p>
                <p>this is a test</p>
                <p>this is a test</p>
            </div>
            <div class=‘list‘></div>
        </div>
        <div class=‘list‘>
            <div class=‘list-item‘>list-item_03
                <p>this is a test</p>
                <p>this is a test</p>
                <p>this is a test</p>
            </div>
            <div class=‘list-item‘>list-item_04
                <p>this is a test</p>
                <p>this is a test</p>
            </div>
            <div class=‘list‘></div>
        </div>
    </div>
</body>
</html>
时间: 2024-08-01 19:38:03

[ css 计数器 counter ] css中counter计数器实例演示一的相关文章

[ css 计数器 counter ] css中counter计数器(序列数字字符自动递增)应用问题讲解及实例演示

一.挖坟不可耻 CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到(见下图),不过当时是作为其中一员介绍.就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员.很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象. 然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相.就像我,说不定某年某月,当年像驴子一样被溜的

初识 css3中counter属性

最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器兼容性可以看[这里] 2.counter的作用 实际上是代替了javascript作为一种计数器工具,在css中使用.元素出现了几次就默认增加多少对应值.增加值大小还可以由自己设置. 可以想象当我们设置好一次规矩之后,以后无论添加多少标签,计数工具自动帮我们算计数,不必手动输入那些值.而且这些不必借

css如何设置字符串中第一个字符的样式

css如何设置字符串中第一个字符的样式:本章节介绍一下如何使用css设置字符串中第一个字符的样式.以前我们实现此效果的方式,可能会在第一个字符上嵌套上一个span标签.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

Atitit.css 规范 bem &#160;项目中 CSS 的组织和管理

Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 1.4. 修饰符(modifier)的3 2. 块的独立性4 3. 独立的CSS4 3.1. 为独立的CSS类命名5 4. BEM争议最大的就是它的命名风格 6 5. OOCSS6 6. ACSS6 7. CSS 组织和管理 结论attilax总结7 8. Atibem7 8.1. Modifier

css清除浮动代码实例演示

css清除浮动代码实例演示:在页面中如果采用了浮动,那么清除浮动则是必须要进行的操作,否则可能引起一些意想不到的后果.本章节不会对浮动或者清除浮动的原理做介绍,只是分享一下清除浮动的几段代码,因为有些朋友可能需要的就是一个代码实例,关于浮动或者清除清除浮动的相关内容可以参阅相关阅读.一.使用overflow清除浮动: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <met

CSS如何设置对象中第一行文本的样式

CSS如何设置对象中第一行文本的样式:建议:尽可能的手写代码,可以有效的提高学习效率和深度.可能有时候需要特别设置对象中第一行文本的样式,下面简单介绍一下.代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &

CSS实现的多行文本垂直居中实例代码

CSS实现的多行文本垂直居中实例代码: 将一行文本在容器中垂直居中是非常简单的,只需要两句代码就好了,例如: div { width:100px; height:100px; line-height:100px; } 以上代码可以实现单行文本在div中垂直居中效果,只要将div的height属性值和line-height设置为相同就可以了. 但是以上代码并不能实现多行文本垂直居中下过,下面再看一段代码实例: <!DOCTYPE html> <html> <head> &

jQuery CSS()方法改变CSS样式实例解析

转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接.//.css(‘

[ css 权重 !important ] 使用CSS的!important讲解及实例演示

/** 楔子: !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权(参见:W3.org的解释). 语法格式{ sRule!important },直接写在定义的最后面,如: p{color:green !important;} 注意:IE一直都不支持这个语法,而其他的浏览器都支持.因此我们就可以利用这一点来分别给FF和IE浏览器样式定义. <html> <head> <style type="text/css"> #box