zoukankan      html  css  js  c++  java
  • CSS计数器与动态计数呈现

    代码:
    
    CSS代码:
    
    body {
      counter-reset: icecream;
    }
    input:checked {
      counter-increment: icecream;
    }
    .total::after {
      content: counter(icecream);
    }
    HTML代码:
    
    <strong>下面中国十大冰淇淋你吃过几个?</strong>
    <ol>
        <li><input type="checkbox" id="icecream1"><label for="icecream1">哈根达斯</label></li>
        <li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>
        <li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>
        <li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>
        <li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>
        <li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>
        <li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>    
        <li><input type="checkbox" id="icecream8"><label for="icecream8">乐可可冰淇淋</label></li>
        <li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>
        <li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>
    </ol>
    你总共选择了 <strong class="total"></strong> 款冰淇淋! 

    详细讲解地址:http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/

  • 相关阅读:
    作为技术管理者,我如何保持技术判断力
    管理沟通
    管理规划
    nginx 在浏览器端保持cookie 一致
    openssl 升级操作 -2
    iptables 实际操作 之 规则查询 2
    iptables 概念 1
    openssl 升级 操作 -1
    使用秘钥对登录服务器
    SSH配置免秘钥登录
  • 原文地址:https://www.cnblogs.com/MrZouJian/p/5736917.html
Copyright © 2011-2022 走看看