content 內容生成技術2

wow_worktile 發布于2019-08-30 15:53 / 634人閱讀

摘要：計數器效果可是說是的重中之重此功能非常強大實用且不具有可替代性甚至可以實現連都不好實現的效果這個地方放慢節奏細細品味先來個例子體驗一下計數器第一個第二個第三個所謂計數器效果指的是使用代碼實現隨著元素數目增多數值也跟著變大的效果圖中紅色阿

計數器效果可是說是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是嵌套關系而不是同級關系

GPU云服務器云服務器 php內容生成圖片 cdn內容路由技術 cdn內容分發技術 Contents

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116713.html

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