一、今日完成的情况

1、上午重写了任务七的首页页面，写了三分之一去听了沁修长老的直播课。

2、中午又多熟悉了两遍小课堂的内容，3点半开始讲小课堂，还是紧张了，没讲好，拓展思考本来准备了一个稍微复杂点的例子，一紧张又忘了怎么写了，只好即时写了一个简单的讲了讲，希望下次小课堂情况会好点。

3、晚上继续上午的任务，把任务七的首页页面重写完，上传小课堂文本到CSDN，上传视频。

二、明天的计划

1、继续任务十三。

2、把小课堂需要上传的内容补完。

三、遇到的问题

1、讲课之前测试了麦的声音和录屏软件的录像功能，均没问题，结果录完了才发现声音没录下来，录屏软件录得是电脑的声音，没录到麦的声音，在办公室录音频貌似也不大礼貌，今晚早点回宿舍重新录一遍。

2、小课堂的PPT怎么上传到公共的账号还不会，明天问问

四、收获

       通过这次小课堂，发现自己的问题还很多，脑子里的想法，不能顺利的表述出来，容易短线，原本会的内容，突然一下冒出来，一时间也想不起来怎么解决，基础还不扎实。发现了自己的不足，就要继续努力改正。

五、小课堂

今天分享一下，修真院官网 CSS-08任务中的知识点小课堂：

1.背景介绍

如何使用css中的计数器？

       简而言之，计数器就是采用css给html元素自动生成编号。我们在进行编码时，有时我们会有编号的需求，但使用ol和ul列表又无法达到我们需要的效果。这时就会想，有没有什么办法，能像word的排序功能一样，可以对页面的元素进行自动编号。这种时候就轮到CSS计数器Counter出场了。

2.知识剖析

    （1）计数器的基本概念

       早期在CSS中除了列表ol、ul，没有其他标签允许元素自动进行排序。而在CSS2.1的规范中介绍了一种新属性：Counter，这种属性允许开发人员使用伪元素::after、::before给任何元素创建自动递增计数器。

    （2）计数器的构成

       使用CSS Counter给元素创建自动递增计数器不仅仅是依赖于某一个CSS属性来完成，他需要几个属性一起使用才会有效果。使用的到属性包括: counter-reset：顾名思意，就是“计数器-重置”的意思，主要用来重置起始数字，其值可以自定义，即从哪个数字开始计数，默认值为0。
      counter-increment：顾名思意，就是“计数器-递增”的意思。用来标识计数器与实际相关联的范围。后面可以跟随数字，表示每次计数的变化值。
       content：用来生成内容,主要配合counter()一起使用。counter()：该函数用来设置插入计数器的值。
       使用Counter来创建计数器，还需要对其属性的使用规则有一定的了解。接下来就先简单的了解一下这些属性。

   1>.COUNTER-RESET

        语法规则： 
        counter-reset:[ <**identifier**> <**integer**> ] 
        取值说明:
        counter-reset的默认值为none，其主要取值包括两个部分：
        **identifier**：是计数器标识符,用来定义计数器的名称，这个名称可以自定义。后面可以紧跟一个整数值，中间用空格分隔开来，如name 0；

        **integer**：即重置的数字，此值用来设置调用计算数器时起始值，默认值为0。     

   2>.COUNTER-INCREMENT
        语法规则： 

        counter-increment:[ <**identifier**> <**integer**> ]

        取值说明:

        counter-increment的默认值为none。其值也包括两个部分：
        **identifier**：是计数器标识符,用来定义计数器的名称，这个名称可以自定义。后面可以紧跟一个整数值，中间用空格分隔开来，如name 0；
        **integer**：即递增（递减）的数字，其值允许是0或者负整数值，如果未指定任何值，则该值为1（前提是counter-reset未显式设置计数的起始值）。 其值递增（递减）是按倍数值递增（递减），如果设置了值为2,后面元素递增值为4、6、8，依此类推。
    3>.创建计数器的步骤
第一步：声明计数器:要使用CSS Counters生成自动计数器，首先就是通过counter-reset属性先声明一个计数器名称。
第二步：设置计数器：counter-reset只是定义了一个计数器标识符，在实际使用中，需要通过counter-increment属性来控制计数器的增减。

第三步：显示计数器：最后一步，就是如何显示计数器了。显示计数器需要通过:before、content和counter()：来进行设置。

3.常见问题

（1）怎么让计数器倒序计数?
         只要把增量counter-increment为负数即可。
（2）怎么改变计数器的计数符号?
        counter（）的默认样式为decimal，即数字。

        我们可以根据需要修改成其他样式，例如：upper-roman（罗马数字）

4.解决方案

   
5.代码实战

6.拓展思考

   counter计数器能和ol、ul同时使用吗？

    counter计数器可以和ol、ul同时使用，符合起来还能达成复合序号的效果，详细使用情况参考视频。

7.参考文献

参考一: CSS计数器(counter)入门：http://www.css88.com/archives/6394；

参考二:  CSS的计数器：counter-increment与counter-reset：http://www.wozhuye.com/compatible/297.html；

参考二:  CSS counter计数器(content目录序号自动递增)详解：http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/；

参考三:  深入理解CSS计数器：https://www.cnblogs.com/xiaohuochai/p/5018519.html

参考四：CSS Counters：http://www.w3cplus.com/css3/css-counters.html。

8.更多讨论

问题一：计数器浏览器兼容情况怎么样？

1、目前主流浏览器基本都支持counter-reset属性。
注意： 因为在IE6 和IE7 以及IE8的IE7兼容模式中，:before 和:after 都不被支持，所以可以认为它们都不支持content 属性，测试也就毫无意义，所以这个列表将IE6、IE7和IE8的IE7兼容模式忽略。IE8只有指定!DOCTYPE才支持counter-reset属性。。

问题二：CSS计数器除了用来计数还有什么其他的作用？

        除了生成篇数、章节和段落以外，CSS计数器还被应用于计算数据类型的小游戏当中。

问题三：CSS计数器与display:none的使用会造成什么影响？

        一个元素，如果设置了counter-increment, 但是其display的属性值是none或者含有hidden属性（针对支持浏览器），则此计数值是不会增加的。而visibility:hidden以及其他声明不会有此现象。

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

任务进度：

任务十三

任务开始时间：

2018.05.26

任务完成时间：

2018.05.28

禅道：http://task.ptteng.com/zentao/project-task-710-unclosed.html