CSS 列表樣式詳解

標籤：bsp   http   標記   class   ima   開發   size   倚天   完成   

CSS列表用於前端的列表排列。

CSS列表屬性作用如下：

• 設定不同的清單項目標記為有序列表
• 設定不同的清單項目標記為無序列表
• 設定清單項目標記為映像

列表

在HTML中，有兩種類型的列表：

• 無序列表 - 清單項目標記用特殊圖形（如小黑點、小方框等）
• 有序列表 - 清單項目的標記有數字或字母

list-style-type：設定列表標誌類型。

1：無序列表執行個體

 

ul.a {list-style-type:circle;}ul.b {list-style-type:square;}

 

  <p>無序列表執行個體:</p>    <ul class="a">     <li>射鵰英雄傳</li>     <li>笑傲江湖</li>     <li>倚天屠龍記</li>    </ul>        <ul class="b">     <li>鹿鼎記</li>     <li>天龍八部</li>     <li>神鵰俠侶</li>    </ul>

效果：

      

2：有序列表執行個體

 

<p>有序列表執行個體:</p>   <ol class="c">       <li>射鵰英雄傳</li>       <li>笑傲江湖</li>       <li>倚天屠龍記</li>   </ol>        <ol class="d">
     <li>鹿鼎記</li>     <li>天龍八部</li>     <li>神鵰俠侶</li>

  </ol>

效果：

    

還可以設定為圖片，通過  list-style-image

 

ul.cc{    list-style-image: url("http://www.w3school.com.cn/i/eg_arrow.gif")    }

 

<ul class="cc">    <li>三國演義</li>    <li>紅樓夢</li></ul>

 

效果：

      

 

在前端開發中，就可以通過列表 以上的知識來完成網站中相應的列表模組了。

 

CSS 列表樣式詳解