日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
CSSlist-style（列表樣式）
在網(wǎng)頁(yè)中很多地方都會(huì)用到列表，例如導(dǎo)航菜單、新聞列表、商品分類等等。您除了可以使用 HTML 中的一些屬性來(lái)對(duì)列表進(jìn)行簡(jiǎn)單的設(shè)置外，在 CSS 中也提供了幾種專門用來(lái)設(shè)置和格式化列表的屬性，如下所示：

  • list-style-type：設(shè)置列表項(xiàng)前面標(biāo)記的形狀（外觀）；
  • list-style-position：設(shè)置標(biāo)記和列表中文本之間的距離；
  • list-style-image：使用圖像代替默認(rèn)的標(biāo)記；
  • list-style：統(tǒng)一設(shè)置上面的三個(gè)屬性。

1. list-style-type

使用 list-style-type 屬性可以設(shè)置列表中每個(gè)列表項(xiàng)前標(biāo)記的樣式，屬性的可選值如下：

值 描述
none 無(wú)標(biāo)記
disc 默認(rèn)值，標(biāo)記為實(shí)心圓
circle 將標(biāo)記設(shè)置為空心圓
square 將標(biāo)記設(shè)置為實(shí)心方塊
decimal 將標(biāo)記設(shè)置為數(shù)字
decimal-leading-zero 將標(biāo)記設(shè)置為以 0 開頭的數(shù)字標(biāo)記，例如 01、02、03
lower-roman 將標(biāo)記設(shè)置為小寫羅馬數(shù)字，例如 i、ii、iii、iv、v
upper-roman 將標(biāo)記設(shè)置為大寫羅馬數(shù)字，例如 I、II、III、IV、V
lower-alpha 將標(biāo)記設(shè)置為小寫英文字母，例如 a、b、c、d、e
upper-alpha 將標(biāo)記設(shè)置為大寫英文字母，例如 A、B、C、D、E
lower-greek 將標(biāo)記設(shè)置為小寫希臘字母，例如 α、β、γ、δ、ε
lower-latin 將標(biāo)記設(shè)置為小寫拉丁字母，例如 a、b、c、d、e
upper-latin 將標(biāo)記設(shè)置為大寫拉丁字母，例如 A、B、C、D、E
hebrew 將標(biāo)記設(shè)置為傳統(tǒng)的希伯來(lái)編號(hào)
armenian 將標(biāo)記設(shè)置為傳統(tǒng)的亞美尼亞編號(hào)
georgian 將標(biāo)記設(shè)置為傳統(tǒng)的喬治亞編號(hào)
cjk-ideographic 將標(biāo)記設(shè)置為中文數(shù)字，例如 一、二、三、四、五
hiragana 將標(biāo)記設(shè)置為日文平假名字符，例如 あ、い、う、え、お
katakana 將標(biāo)記設(shè)置為日文片假名字符，例如 ア、イ、ウ、エ、オ
hiragana-iroha 將標(biāo)記設(shè)置為日文平假名序號(hào)
katakana-iroha 將標(biāo)記設(shè)置為日文片假名序號(hào)

【示例】使用 list-style-type 屬性改變無(wú)序列表、有序列表中列表項(xiàng)前標(biāo)記的樣式：




    


    
    
        
  • CSS鏈接
    • 
        
  • CSS邊框
    • 
        
  • CSS表格
    • 
    

    
    
        
  1. CSS鏈接
    2. 
        
  2. CSS邊框
    3. 
        
  3. CSS表格
    4. 
    

    
    
        
  1. CSS鏈接
    2. 
        
  2. CSS邊框
    3. 
        
  3. CSS表格
    4. 
    

    
    
        
  1. CSS鏈接
    2. 
        
  2. CSS邊框
    3. 
        
  3. CSS表格
    4.

運(yùn)行結(jié)果如下圖所示：



圖：list-style-type 屬性演示

2. list-style-position

使用 list-style-position 屬性可以設(shè)置在何處放置列表項(xiàng)前的標(biāo)記，屬性的可選值如下：

值 描述
inside 列表項(xiàng)前的標(biāo)記放置在之后的文本以內(nèi)，列表項(xiàng)中的文本會(huì)根據(jù)標(biāo)記對(duì)齊
outside 默認(rèn)值，保持標(biāo)記位于文本的左側(cè)，列表項(xiàng)前的標(biāo)記放置在文本以外，并且列表項(xiàng)中的文本不會(huì)根據(jù)標(biāo)記對(duì)齊
inherit 從父元素繼承 list-style-position 屬性的值

【示例】使用 list-style-position 屬性設(shè)置列表項(xiàng)前標(biāo)記的位置：




    


    
    
        
  1. CSS鏈接
    2. 
        
  2. CSS邊框
    3. 
        
  3. CSS表格
    4. 
    

    
    
        
  1. CSS鏈接
    2. 
        
  2. CSS邊框
    3. 
        
  3. CSS表格
    4.

運(yùn)行結(jié)果如下圖所示：



圖：list-style-position 屬性演示

3. list-style-image

通過(guò) list-style-image 屬性可以將列表項(xiàng)前的標(biāo)記替換為一個(gè)圖像，屬性的可選值如下：

值 描述
URL 圖像的路徑
none 默認(rèn)值，不顯示任何圖像
inherit 從父元素繼承 list-style-image 屬性的值

【示例】使用 list-style-image 屬性將列表項(xiàng)前的標(biāo)記替換為一個(gè)圖像：




    


    
    
        
  • CSS鏈接
    • 
        
  • CSS邊框
    • 
        
  • CSS表格
    •

運(yùn)行結(jié)果如下圖所示：



圖：list-style-image 屬性演示

4. list-style

list-style 屬性是上述三個(gè)屬性（list-style-type、list-style-position、list-style-image）的簡(jiǎn)寫，使用 list-style 可以同時(shí)設(shè)置上面的三個(gè)屬性，其語(yǔ)法格式如下：

list-style: list-style-type || list-style-position || list-style-image;

提示：在使用 list-style 屬性時(shí)，需要按照上面的順序來(lái)為參數(shù)賦值，只要遵守參數(shù)的順序，即使忽略其中的一項(xiàng)或多項(xiàng)也是可以的，例如 list-style: none;、list-style:circle inside;，被忽略的參數(shù)會(huì)設(shè)置為參數(shù)對(duì)應(yīng)的默認(rèn)值。

【示例】使用 list-style 屬性來(lái)統(tǒng)一設(shè)置列表項(xiàng)的標(biāo)記樣式、位置和圖像： 




    


    
    
        
  • CSS鏈接
    • 
        
  • CSS邊框
    • 
        
  • CSS表格
    • 
    

    
    
        
  1. CSS鏈接
    2. 
        
  2. CSS邊框
    3. 
        
  3. CSS表格
    4.

運(yùn)行結(jié)果如下圖所示：



圖：list-style 屬性演示

網(wǎng)站標(biāo)題：CSSlist-style（列表樣式）
文章位置：http://www.dlmjj.cn/article/djcphjj.html