CSS計數器（自定義列表）Demo

2021-09-12 09:54:58 字數 1873 閱讀 8094

html

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


/>


<


title


>


title


>


<


link 


rel="stylesheet"


type


="text/css"


href


="css/begin.css"


/>


head


>


<


body


>


<


section


>


<


h2>登記個人資訊


h2>


<


ol>


<


li>課程進度推進通知


li>


<


li>


即時溝通


<


ol>


<


li>qq


li>


<


lili


>


ol>


li>


<


li>快遞收件位址


li>


ol>


section


>


<


section


>


<


h2>熟悉課程出品流程


h2>


<


figure


>


課程出品流程


figure


>


section


>


<


section


>


<


h2h2


>


<


figure


>


dart語言開發


figure


>


<


figure


>


docker知識體系


figure


>


section


>


body


>


html


>
css

body section section p figure::before,li::before,section:beforesection:before @-moz-document url-prefix() }


section h2 ol li::before figure figure::before
注意：要將計數器應用在哪個元素上，就在其父元素定義計數器，如果並列有多個元素，那麼在這幾個元素共同的父元素定義計數器，如本例中有多個section，如果需要每個section都使用計數器，那麼就需要將計數器定義在body上；再舉個例，本例中給figure標籤使用計數器，將計數器定義在了section標籤中，離開了section標籤後，figure標籤計數器便會重新從1開始，如果要使其連貫，則將計數器定義在body中即可在section中定義計數器

在body中定義計數器

小白知淺 閱讀(

...)

編輯收藏

CSS計數器（自定義列表）Demo

html doctype html html head meta charset utf 8 title title link rel stylesheet type text css href css begin.css head body section h2 登記個人資訊 h2 ol li 課...

CSS計數器（自定義列表）

css3計數器 css counters 可以允許我們使用css對頁面中的任意元素進行計數，實現類似於有序列表的功能 自定義有序列表 與有序列表相比，它的突出特性在於可以對任意元素計數，同時實現個性化計數 定義計數器 設定計數器的增數規則 自定義列表樣式 呼叫計數器 counter reset no...

Hadoop 自定義計數器

private counter c override protected void setup context context throws ioexception,interruptedexception override protected void map text key,byteswrit...