成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

content 內(nèi)容生成技術(shù)2

wow_worktile / 661人閱讀

摘要：計(jì)數(shù)器效果可是說是的重中之重此功能非常強(qiáng)大實(shí)用且不具有可替代性甚至可以實(shí)現(xiàn)連都不好實(shí)現(xiàn)的效果這個(gè)地方放慢節(jié)奏細(xì)細(xì)品味先來個(gè)例子體驗(yàn)一下計(jì)數(shù)器第一個(gè)第二個(gè)第三個(gè)所謂計(jì)數(shù)器效果指的是使用代碼實(shí)現(xiàn)隨著元素?cái)?shù)目增多數(shù)值也跟著變大的效果圖中紅色阿

計(jì)數(shù)器效果可是說是content的重中之重, 此功能非常強(qiáng)大、實(shí)用, 且不具有可替代性, 甚至可以實(shí)現(xiàn)連js都不好實(shí)現(xiàn)的效果. 這個(gè)地方放慢節(jié)奏, 細(xì)細(xì)品味.
先來個(gè)例子體驗(yàn)一下:
.reset {
    counter-reset: w; 
}
.counter:after {
    content: counter(w);
    counter-increment: w;
    color: red;
}


content 計(jì)數(shù)器


第一個(gè)


第二個(gè)


第三個(gè)

所謂css計(jì)數(shù)器效果, 指的是使用css代碼實(shí)現(xiàn)隨著元素?cái)?shù)目增多, 數(shù)值也跟著變大的效果. 圖中紅色阿拉伯?dāng)?shù)字就是css計(jì)數(shù)器生成的, 這個(gè)是一個(gè)最基本的實(shí)現(xiàn)了.
css計(jì)數(shù)有這么幾個(gè)關(guān)鍵點(diǎn)需要注意:

命名: 要有個(gè)稱呼(counter-reset)

規(guī)則: 是1、2、3、4還是1、2、1、2呢(counter-increment)

開始: 沒有口令不執(zhí)行(counter()/counters())

書中作者有個(gè)例子 目錄結(jié)構(gòu)的實(shí)現(xiàn):


    
我是王小二

    

        
我是王小二的大兒子

        
我是王小二的二兒子

        

            
我是王小二的二兒子的大孫子

            
我是王小二的二兒子的二孫子

            
我是王小二的二兒子的小孫子

        

        
我是王小二的三兒子

    

    
我是王小三

    
我是王小四

    

        
我是王小四的大兒子

    



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

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

這里需要注意的是: 一個(gè)容器中普照源(counter-reset)是唯一的.
正確的應(yīng)該是:


    
我是王小二
        

            
我是王小二的大兒子

            
我是王小二的二兒子
                

                    
我是王小二的二兒子的大孫子

                    
我是王小二的二兒子的二孫子

                    
我是王小二的二兒子的小孫子

                

            

            
我是王小二的三兒子

        

    

    
我是王小三

    
我是王小四
        

            
我是王小四的大兒子

reset與counter是嵌套關(guān)系 而不是同級(jí)關(guān)系

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116713.html

相關(guān)文章

  • content 內(nèi)容生成技術(shù)1

    摘要：最近在看張鑫旭的世界看了這個(gè)書感覺打開了世界的大門建議前端工程師人手一本針對字符內(nèi)容生成這一技術(shù)用的最多的應(yīng)該就是配合實(shí)現(xiàn)字體圖標(biāo)了吧因?yàn)榫瓦\(yùn)用了這一技術(shù)進(jìn)入之后默認(rèn)是點(diǎn)擊紅線里面就是連接了可以直接打開看到源碼與上面所寫無二在 最近在看張鑫旭的《css世界》, 看了這個(gè)書感覺打開了css世界的大門. 建議前端工程師人手一本 針對content 字符內(nèi)容生成 這一技術(shù)用的最多的應(yīng)該就是...

    tinysun1234 評(píng)論0 收藏0

  • 手把手教你如何用Crawlab構(gòu)建技術(shù)文章聚合平臺(tái)(二)

    摘要：上一篇文章手把手教你如何用構(gòu)建技術(shù)文章聚合平臺(tái)一介紹了如何使用搭建的運(yùn)行環(huán)境，并且將與集成，對掘金進(jìn)行技術(shù)文章的抓取，最后可以查看抓取結(jié)果。本篇文章將繼續(xù)講解如何利用編寫一個(gè)精簡的聚合平臺(tái)，將抓取好的文章內(nèi)容展示出來。 上一篇文章《手把手教你如何用Crawlab構(gòu)建技術(shù)文章聚合平臺(tái)(一)》介紹了如何使用搭建Crawlab的運(yùn)行環(huán)境，并且將Puppeteer與Crawlab集成，對掘金、...

    zhunjiee 評(píng)論0 收藏0

  • Repractise架構(gòu)篇一: CMS的重構(gòu)與演進(jìn)

    摘要：重構(gòu)系統(tǒng)是一項(xiàng)非常具有挑戰(zhàn)性的事情。架構(gòu)與說起來，我一直是一個(gè)黨。如下圖是采用的架構(gòu)這與我們在項(xiàng)目上的系統(tǒng)架構(gòu)目前相似。而這是大部分所不支持的。允許內(nèi)容通過內(nèi)容服務(wù)更新使用于是，有了一個(gè)名為的框架用于管理內(nèi)容，并存儲(chǔ)為。 重構(gòu)系統(tǒng)是一項(xiàng)非常具有挑戰(zhàn)性的事情。通常來說，在我們的系統(tǒng)是第二個(gè)系統(tǒng)的時(shí)候才需要重構(gòu)，即這個(gè)系統(tǒng)本身已經(jīng)很臃腫。我們花費(fèi)了太量的時(shí)間在代碼間的邏輯，開發(fā)新的功能變得...

    William_Sang 評(píng)論0 收藏0

  • SAP CRM和C4C的內(nèi)容管理(Content Management)

    摘要：內(nèi)容管理使用這個(gè)給用戶提供內(nèi)容管理的功能。作為企業(yè)級(jí)管理軟件的一個(gè)模塊，病毒掃描的支持是必不可少的。同一樣，對于上傳的文件和發(fā)送的郵件均有內(nèi)置的病毒掃描引擎以確保解決方案的安全性。 SAP CRM內(nèi)容管理 SAP CRM使用Attachments這個(gè)UI給用戶提供內(nèi)容管理的功能。通過新建按鈕可以上傳本地文檔到CRM系統(tǒng)： showImg(https://segmentfault.com...

    aervon 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<