ul ol li的序號編號樣式


序號樣式例子,下面是html代碼(做參考)

<ol>
<li>列表內容列表內容列表內容列表</li>
<li>列表內容列表內容列表內容列表</li>
<li>列表內容列表</li>
<li>列表內容列表內容4</li>
<li>列表內容列表內容5</li>
</ol>


一。示例
1.自定義序號,
一般的列表順序都是以1.2.3.為序號,但需要“、”代替“.”  ,這時我們就要自己定義,主要使用了CSS的counter-increment對部分和子部分進行編號,但問題是折行的部分不能自動縮進

ol{list-style-type:none;counter-reset:sectioncounter;width:200px;}
ol li:before {
content:counter(sectioncounter) "、"; 
counter-increment:sectioncounter;
}

 

執行后為:

 


2. 標准格式

ol{list-style-type:demical;width:200px;}
ol li{ list-style-position:outside;}


執行后為:

 

 

二、css的UL、ol、li樣式
1.list-style-type 屬性設置列表項標記的類型。
取值:disc 點| circle圓圈 | square正方形 | decimal數字 | decimal-leading-zero 十進制數| lower-roman 小寫羅馬文字| upper-roman 大寫羅馬文字| lower-greek小寫希臘字母 | lower-latin小寫拉丁文 | upper-latin 大寫拉丁文| armenian亞美尼亞數字 | georgian喬治亞數字 | lower-alpha小寫拉丁文 | upper-alpha大寫拉丁文 | none無 | inherit繼承
初始值: disc

2.list-style-image 屬性使用圖像來替換列表項的標記
取值:  list-style-image:none/url

3.list-style-position 屬性設置在何處放置列表項標記。
該屬性用於聲明列表標志相對於列表項內容的位置。外部 (outside) 標志會放在離列表項邊框邊界一定距離處,不過這距離在 CSS 中未定義。內部 (inside) 標志處理為好像它們是插入在列表項內容最前面的行內元素一樣。

取值: list-style-position:inside/outside

 

注:有的時候outside不起作用,原因是加了浮動,

 

4.list-style屬性
list-style 簡寫屬性在一個聲明中設置所有的列表屬性。

取值:li-style:list-style-type/list-style-image/list-style-position

 


注:有的時候列序號不起作用,原因是加了浮動,

解決辦法是 list-style-position:outside;改成list-style-position: inside;或去掉浮動設置


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM