資訊專欄INFORMATION COLUMN
摘要：計數(shù)器效果可是說是的重中之重此功能非常強大實用且不具有可替代性甚至可以實現(xiàn)連都不好實現(xiàn)的效果這個地方放慢節(jié)奏細細品味先來個例子體驗一下計數(shù)器第一個第二個第三個所謂計數(shù)器效果指的是使用代碼實現(xiàn)隨著元素數(shù)目增多數(shù)值也跟著變大的效果圖中紅色阿
計數(shù)器效果可是說是content的重中之重, 此功能非常強大、實用, 且不具有可替代性, 甚至可以實現(xiàn)連js都不好實現(xiàn)的效果. 這個地方放慢節(jié)奏, 細細品味.
先來個例子體驗一下:
.reset {
counter-reset: w;
}
.counter:after {
content: counter(w);
counter-increment: w;
color: red;
}
content 計數(shù)器
第一個
第二個
第三個
所謂css計數(shù)器效果, 指的是使用css代碼實現(xiàn)隨著元素數(shù)目增多, 數(shù)值也跟著變大的效果. 圖中紅色阿拉伯數(shù)字就是css計數(shù)器生成的, 這個是一個最基本的實現(xiàn)了.
css計數(shù)有這么幾個關鍵點需要注意:
命名: 要有個稱呼(counter-reset)
規(guī)則: 是1、2、3、4還是1、2、1、2呢(counter-increment)
開始: 沒有口令不執(zhí)行(counter()/counters())
書中作者有個例子 目錄結(jié)構(gòu)的實現(xiàn):
.reset { padding-left: 20px; counter-reset: wangxiaoer; } .counter:before { content: counters(wangxiaoer, "-") ". "; counter-increment: wangxiaoer; } .reset ~ .counter { color: #cd0000; }我是王小二我是王小二的大兒子我是王小二的二兒子我是王小二的二兒子的大孫子我是王小二的二兒子的二孫子我是王小二的二兒子的小孫子我是王小二的三兒子我是王小三我是王小四我是王小四的大兒子
這里需要注意的是: 一個容器中普照源(counter-reset)是唯一的.
正確的應該是:
我是王小二我是王小二的大兒子我是王小二的二兒子我是王小二的二兒子的大孫子我是王小二的二兒子的二孫子我是王小二的二兒子的小孫子我是王小二的三兒子我是王小三我是王小四我是王小四的大兒子
reset與counter是嵌套關系 而不是同級關系
文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116713.html
摘要：最近在看張鑫旭的世界看了這個書感覺打開了世界的大門建議前端工程師人手一本針對字符內(nèi)容生成這一技術用的最多的應該就是配合實現(xiàn)字體圖標了吧因為就運用了這一技術進入之后默認是點擊紅線里面就是連接了可以直接打開看到源碼與上面所寫無二在 最近在看張鑫旭的《css世界》, 看了這個書感覺打開了css世界的大門. 建議前端工程師人手一本 針對content 字符內(nèi)容生成 這一技術用的最多的應該就是...
摘要：上一篇文章手把手教你如何用構(gòu)建技術文章聚合平臺一介紹了如何使用搭建的運行環(huán)境，并且將與集成，對掘金進行技術文章的抓取，最后可以查看抓取結(jié)果。本篇文章將繼續(xù)講解如何利用編寫一個精簡的聚合平臺，將抓取好的文章內(nèi)容展示出來。 上一篇文章《手把手教你如何用Crawlab構(gòu)建技術文章聚合平臺(一)》介紹了如何使用搭建Crawlab的運行環(huán)境，并且將Puppeteer與Crawlab集成，對掘金、...
摘要：重構(gòu)系統(tǒng)是一項非常具有挑戰(zhàn)性的事情。架構(gòu)與說起來，我一直是一個黨。如下圖是采用的架構(gòu)這與我們在項目上的系統(tǒng)架構(gòu)目前相似。而這是大部分所不支持的。允許內(nèi)容通過內(nèi)容服務更新使用于是，有了一個名為的框架用于管理內(nèi)容，并存儲為。 重構(gòu)系統(tǒng)是一項非常具有挑戰(zhàn)性的事情。通常來說，在我們的系統(tǒng)是第二個系統(tǒng)的時候才需要重構(gòu)，即這個系統(tǒng)本身已經(jīng)很臃腫。我們花費了太量的時間在代碼間的邏輯，開發(fā)新的功能變得...
摘要：內(nèi)容管理使用這個給用戶提供內(nèi)容管理的功能。作為企業(yè)級管理軟件的一個模塊，病毒掃描的支持是必不可少的。同一樣，對于上傳的文件和發(fā)送的郵件均有內(nèi)置的病毒掃描引擎以確保解決方案的安全性。 SAP CRM內(nèi)容管理 SAP CRM使用Attachments這個UI給用戶提供內(nèi)容管理的功能。通過新建按鈕可以上傳本地文檔到CRM系統(tǒng)： showImg(https://segmentfault.com...
閱讀 2103·2023-04-25 15:11
閱讀 3724·2021-09-23 11:57
閱讀 1441·2021-07-26 23:38
閱讀 1385·2019-08-30 15:54
閱讀 684·2019-08-30 15:53
閱讀 3300·2019-08-26 13:36
閱讀 1045·2019-08-26 12:01
閱讀 2924·2019-08-23 16:21
