css中的列表樣式


在網頁設計中,我們經常將某些具有相似功能的標簽放在同一組中,這時我們經常會用到列表標簽(無序列表ul,有序列表ol),在列表標簽中對列表樣式的設計可以使我們的頁面得到一定程度的美化。

css中對列表樣式主要是對列表項目前列表符號的設置,其語法如下:

 

list-style-type : disc | circle | square | decimal |
           lower-roman | upper-roman | lower-alpha | upper-alpha |
           none | armenian | cjk-ideographic | georgian | lower-greek |
          hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |
           lower-latin | upper-latin

 

通過取不同的list-style-type屬性值,我們可以得到不同的項目符號。

例:

ul { list-style-type:disc;} /*實心圓*/

ul { list-style-type:circle;} /*空心圓*/

ul { list-style-type:square;} /*實心方塊*/

ul { list-style-type:none;} /*不顯示項目符號*/

ol { list-style-type:decimal;} /*阿拉伯數字*/

ol { list-style-type:lower-roman;} /*小寫羅馬數字*/

ol { list-style-type:upper-alpha;} /*大寫英文字母*/

 

如果對於css中所規定了的眾多列表符號感到不滿意,我們呀可以自定義列表的符號

list-style-image : none | url ( url )

 

使用這種方式,我們可以為項目列表設置任意的圖片為列表符號。這里,我們所設的值為圖片文件相對於網頁文件的路徑或絕對路徑(來自網站的文件)。

在列表樣式中最為需要注意的是,列表樣式只能在列表標簽中設置(ulol),而不能設置在列表的自標簽中(li)。

 


免責聲明!

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



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