zoukankan      html  css  js  c++  java
  • CSS中的计数器

    CSS的规范中,有一个很奇特的特性,支持计数器的功能。

     
    先来看下如何使用:

    <section>

         <p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
         <p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
         <p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
         <p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
         <p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
    </section>
     
    这段代码表示了做一件事情的顺序,现在我们可以使用CSS的计数器来给这些步骤标注顺序。
     
    下面的代码:

         body {

              counter-reset: steps;
         }
     
         p{
              color: #242424;
              font-size: 16px;
              line-height: 20px;
         }
         p:before {
              counter-increment: steps;
              content: "Step " counter(steps) ": ";
              font-weight: bold;
              font-size: 18px;
         }
    在浏览一下看看效果如何?每行之前都有了一个步骤的数字标注,很神奇吧。
     
    这个属性自CSS2.1起开始写入规范,目前大多数主流的浏览器都可以支持,唯一不支持的就是IE7了。
     
    这个特性看起来简单,但是如果我们能够合理的使用,效果还是非常好的。
     
    参考资料:
  • 相关阅读:
    WPF之感触
    C# WinForm 给DataTable中指定位置添加列
    MyEclipse 8.6 download 官方下载地址
    将博客搬至CSDN
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
    Building Microservices with Spring Cloud
  • 原文地址:https://www.cnblogs.com/cocowool/p/3084739.html
Copyright © 2011-2022 走看看