av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

CSSlist-style（列表樣式）

在網(wǎng)頁中很多地方都會用到列表，例如導航菜單、新聞列表、商品分類等等。您除了可以使用 HTML 中的一些屬性來對列表進行簡單的設置外，在 CSS 中也提供了幾種專門用來設置和格式化列表的屬性，如下所示：

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

1. list-style-type

使用 list-style-type 屬性可以設置列表中每個列表項前標記的樣式，屬性的可選值如下：

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

【示例】使用 list-style-type 屬性改變無序列表、有序列表中列表項前標記的樣式：




    


    
    
        
  • 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.

運行結果如下圖所示：



圖：list-style-type 屬性演示

2. list-style-position

使用 list-style-position 屬性可以設置在何處放置列表項前的標記，屬性的可選值如下：

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

【示例】使用 list-style-position 屬性設置列表項前標記的位置：




    


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

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

運行結果如下圖所示：



圖：list-style-position 屬性演示

3. list-style-image

通過 list-style-image 屬性可以將列表項前的標記替換為一個圖像，屬性的可選值如下：

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

【示例】使用 list-style-image 屬性將列表項前的標記替換為一個圖像：




    


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

運行結果如下圖所示：



圖：list-style-image 屬性演示

4. list-style

list-style 屬性是上述三個屬性（list-style-type、list-style-position、list-style-image）的簡寫，使用 list-style 可以同時設置上面的三個屬性，其語法格式如下：

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

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

【示例】使用 list-style 屬性來統(tǒng)一設置列表項的標記樣式、位置和圖像： 




    


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

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

運行結果如下圖所示：



圖：list-style 屬性演示

本文名稱：CSSlist-style（列表樣式）
當前URL：http://uogjgqi.cn/article/djcphjj.html
掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流