CSS list style樣式集錦

2021-07-28 04:57:17 字數 1597 閱讀 3064

大家在寫網頁的時候,免不了寫ul  li,並且很多人不喜歡自帶的li樣式,所以一般會將li的樣式設定為none,但是在有的時候,我們需要對一類資源進行編號,如新聞列表,部落格列表,商品列表等等,並且有的需要進行阿拉伯編號,有的需要字母編號,這時候如果自己手寫的話就麻煩了。沒錯,不要忘記list-style這個屬性,它的功能還是蠻強大的哦,請看: 

list-style

定義:用於在乙個宣告中設定乙個列表的所有屬性的簡寫屬性,該屬性是乙個簡寫屬性,涵蓋了所有其他列表樣式屬性,僅作用於具有display值等於list-item的物件(如li物件)。

相關 : list-style-image || list-style-position || list-style-type

● list-style-image

說明: 設定或檢索作為物件的列表項標記的影象。若此屬性值為 none 或指定 url 位址的不能被顯示時,list-style-type 屬性將發生作用。

取值:none :  預設值。不指定影象

url ( url ) :  使用絕對或相對 url 位址指定影象

● list-style-position

說明: 設定或檢索作為物件的列表項標記如何根據文字排列。假如乙個列表專案的左外補丁( margin-left )被設定為 0 ,則列表專案標記不會被顯示。左外補丁( margin-left )最小可以被設定為 30 。僅作用於具有 display 屬性值等於 list-item 的物件。如 li 物件。

取值:outside :  預設值。列表專案標記放置在文字以外,且環繞文字不根據標記對齊

inside :  列表專案標記放置在文字以內,且環繞文字根據標記對齊

● list-style-type

說明: 設定或檢索物件的列表項所使用的預設標記。若 list-style-image 屬性值為 none 或指定 url 位址的不能被顯示時,此屬性將發生作用。

取值:disc :  css1 實心圓

circle :  css1 空心圓

square :  css1 實心方塊

decimal :  css1 阿拉伯數字

lower-roman :  css1 小寫羅馬數字

upper-roman :  css1 大寫羅馬數字

lower-alpha :  css1 小寫英文本母

upper-alpha :  css1 大寫英文本母

none :  css1 不使用專案符號

armenian :  css2 傳統的亞美尼亞數字

cjk-ideographic :  css2 淺白的表意數字

georgian :  css2 傳統的喬治數字

lower-greek :  css2 基本的希臘小寫字母

hebrew :  css2 傳統的希伯萊數字

hiragana :  css2 日文平假名字元

hiragana-iroha :  css2 日文平假名序號

katakana :  css2 日文片假名字元

katakana-iroha :  css2 日文片假名序號

lower-latin :  css2 小寫拉丁字母

upper-latin :  css2 大寫拉丁字母

CSS list style熟悉解釋

原來工作中曾經碰到過ul列表裡一些異常的表現,加上昨天看到了 這個貼子,所以測試了一下list style的各種屬性,發現了乙個有意思的現象 先看一下css手冊中,對於list style的解釋 定義和用法 list style 簡寫屬性在乙個宣告中設定所有的列表屬性。說明 該屬性是乙個簡寫屬性,涵...

滾動條樣式錦集

帶背景顏色的實線邊框滾動條 200px scrollbar shadow color 33cc33 color 006600 scrollbar 3dlight color 33cc33 scrollbar arrow color 33cc33 border bottom black 2px sol...

滾動條樣式錦集

1.帶背景顏色的實線邊框滾動條 200px scrollbar shadow color 33cc33 color 006600 scrollbar 3dlight color 33cc33 scrollbar arrow color 33cc33 border bottom black 2px s...