content 内容生成技术2

wow_worktile 发布于2019-08-30 15:53 / 492人阅读

摘要：计数器效果可是说是的重中之重此功能非常强大实用且不具有可替代性甚至可以实现连都不好实现的效果这个地方放慢节奏细细品味先来个例子体验一下计数器第一个第二个第三个所谓计数器效果指的是使用代码实现随着元素数目增多数值也跟着变大的效果图中红色阿

计数器效果可是说是content的重中之重, 此功能非常强大、实用, 且不具有可替代性, 甚至可以实现连js都不好实现的效果. 这个地方放慢节奏, 细细品味.
先来个例子体验一下:

.reset {
    counter-reset: w; 
}
.counter:after {
    content: counter(w);
    counter-increment: w;
    color: red;
}

content 计数器
第一个
第二个
第三个

所谓css计数器效果, 指的是使用css代码实现随着元素数目增多, 数值也跟着变大的效果. 图中红色阿拉伯数字就是css计数器生成的, 这个是一个最基本的实现了.
css计数有这么几个关键点需要注意:

命名: 要有个称呼(counter-reset)

规则: 是1、2、3、4还是1、2、1、2呢(counter-increment)

开始: 没有口令不执行(counter()/counters())

书中作者有个例子目录结构的实现:


    我是王小二
    
        我是王小二的大儿子
        我是王小二的二儿子
        
            我是王小二的二儿子的大孙子
            我是王小二的二儿子的二孙子
            我是王小二的二儿子的小孙子
        
        我是王小二的三儿子
    
    我是王小三
    我是王小四
    
        我是王小四的大儿子
    

.reset { 
  padding-left: 20px; 
  counter-reset: wangxiaoer;
}
.counter:before { 
  content: counters(wangxiaoer, "-") ". "; 
  counter-increment: wangxiaoer;
}

.reset ~ .counter { 
    color: #cd0000; 
}

这里需要注意的是: 一个容器中普照源(counter-reset)是唯一的.
正确的应该是:


    我是王小二
        
            我是王小二的大儿子
            我是王小二的二儿子
                
                    我是王小二的二儿子的大孙子
                    我是王小二的二儿子的二孙子
                    我是王小二的二儿子的小孙子
                
            
            我是王小二的三儿子
        
    
    我是王小三
    我是王小四
        
            我是王小四的大儿子

reset与counter是嵌套关系而不是同级关系

云服务器混合云 php内容生成图片 cdn内容路由技术 cdn内容分发技术 Contents

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116713.html

content 内容生成技术1

摘要：最近在看张鑫旭的世界看了这个书感觉打开了世界的大门建议前端工程师人手一本针对字符内容生成这一技术用的最多的应该就是配合实现字体图标了吧因为就运用了这一技术进入之后默认是点击红线里面就是连接了可以直接打开看到源码与上面所写无二在最近在看张鑫旭的《css世界》, 看了这个书感觉打开了css世界的大门. 建议前端工程师人手一本针对content 字符内容生成这一技术用的最多的应该就是...

fanux 2019-08-05 13:35 评论0 收藏0
content 内容生成技术1

摘要：最近在看张鑫旭的世界看了这个书感觉打开了世界的大门建议前端工程师人手一本针对字符内容生成这一技术用的最多的应该就是配合实现字体图标了吧因为就运用了这一技术进入之后默认是点击红线里面就是连接了可以直接打开看到源码与上面所写无二在最近在看张鑫旭的《css世界》, 看了这个书感觉打开了css世界的大门. 建议前端工程师人手一本针对content 字符内容生成这一技术用的最多的应该就是...

tinysun1234 2019-08-30 15:53 评论0 收藏0
手把手教你如何用Crawlab构建技术文章聚合平台(二)

摘要：上一篇文章手把手教你如何用构建技术文章聚合平台一介绍了如何使用搭建的运行环境，并且将与集成，对掘金进行技术文章的抓取，最后可以查看抓取结果。本篇文章将继续讲解如何利用编写一个精简的聚合平台，将抓取好的文章内容展示出来。上一篇文章《手把手教你如何用Crawlab构建技术文章聚合平台(一)》介绍了如何使用搭建Crawlab的运行环境，并且将Puppeteer与Crawlab集成，对掘金、...

zhunjiee 2019-07-31 10:11 评论0 收藏0
Repractise架构篇一: CMS的重构与演进

摘要：重构系统是一项非常具有挑战性的事情。架构与说起来，我一直是一个党。如下图是采用的架构这与我们在项目上的系统架构目前相似。而这是大部分所不支持的。允许内容通过内容服务更新使用于是，有了一个名为的框架用于管理内容，并存储为。重构系统是一项非常具有挑战性的事情。通常来说，在我们的系统是第二个系统的时候才需要重构，即这个系统本身已经很臃肿。我们花费了太量的时间在代码间的逻辑，开发新的功能变得...

William_Sang 2019-06-24 17:47 评论0 收藏0
SAP CRM和C4C的内容管理(Content Management)

摘要：内容管理使用这个给用户提供内容管理的功能。作为企业级管理软件的一个模块，病毒扫描的支持是必不可少的。同一样，对于上传的文件和发送的邮件均有内置的病毒扫描引擎以确保解决方案的安全性。 SAP CRM内容管理 SAP CRM使用Attachments这个UI给用户提供内容管理的功能。通过新建按钮可以上传本地文档到CRM系统： showImg(https://segmentfault.com...

aervon 2019-08-15 15:38 评论0 收藏0