<ol> <li>列表內(nèi)容列表內(nèi)容列表內(nèi)容列表</li> <li>列表內(nèi)容列表內(nèi)容列表內(nèi)容列表</li> <li>列表內(nèi)容列表</li> <li>列表內(nèi)容列表內(nèi)容4</li> <li>列表內(nèi)容列表內(nèi)容5</li> </ol>
一。示例
1.自定義序號,
一般的列表順序都是以1.2.3.為序號,但需要“、”代替“.” ,這時我們就要自己定義,主要使用了CSS的counter-increment對部分和子部分進(jìn)行編號,但問題是折行的部分不能自動縮進(jìn)
ol{list-style-type:none;counter-reset:sectioncounter;width:200px;} ol li:before { content:counter(sectioncounter) "、"; counter-increment:sectioncounter; }
2. 標(biāo)準(zhǔn)格式
ol{list-style-type:demical;width:200px;} ol li{ list-style-position:outside;}
二、css的UL、ol、li樣式
1.list-style-type 屬性設(shè)置列表項(xiàng)標(biāo)記的類型。
取值:disc 點(diǎn)| circle圓圈 | square正方形 | decimal數(shù)字 | decimal-leading-zero 十進(jìn)制數(shù)| lower-roman 小寫羅馬文字| upper-roman 大寫羅馬文字| lower-greek小寫希臘字母 | lower-latin小寫拉丁文 | upper-latin 大寫拉丁文| armenian亞美尼亞數(shù)字 | georgian喬治亞數(shù)字 | lower-alpha小寫拉丁文 | upper-alpha大寫拉丁文 | none無 | inherit繼承
初始值: disc
2.list-style-image 屬性使用圖像來替換列表項(xiàng)的標(biāo)記
取值: list-style-image:none/url
3.list-style-position 屬性設(shè)置在何處放置列表項(xiàng)標(biāo)記。
該屬性用于聲明列表標(biāo)志相對于列表項(xiàng)內(nèi)容的位置。外部 (outside) 標(biāo)志會放在離列表項(xiàng)邊框邊界一定距離處,不過這距離在 CSS 中未定義。內(nèi)部 (inside) 標(biāo)志處理為好像它們是插入在列表項(xiàng)內(nèi)容最前面的行內(nèi)元素一樣。
取值: list-style-position:inside/outside
注:有的時候outside不起作用,原因是加了浮動,
4.list-style屬性
list-style 簡寫屬性在一個聲明中設(shè)置所有的列表屬性。
取值:li-style:list-style-type/list-style-image/list-style-position
注:有的時候列序號不起作用,原因是加了浮動,
解決辦法是 list-style-position:outside;改成list-style-position: inside;或去掉浮動設(shè)置