css ul、ol、dl區別

html中共有3種列表：無序列表ul、有序列表ol、定義列表dl。

1、無序列表：
<ul>
 <li>……</li>
 <li>……</li>
</ul>

 看一款關於ul li菜單一實例

 

* { margin:0; padding:0; }
ul{ list-style:none;}
ul#nav { background:#f3c; height: 245px; width: 133px; padding-top:10px; }
ul#nav li a{ display:block;height: 20px; width: 133px; text-align:center; padding:10px 0;}

html代碼

<ul id="nav">
  <li><a href="clothes.jsp教程">服飾</a></li>
  <li><a href="food.jsp" >食品</a></li>
  <li><a href="digital.jsp" >數位</a></li>
  <li><a href="computer.jsp" >電腦耗材</a></li>
  <li><a href="makeup.jsp" >日用品</a></li>
  <li><a href="decorations.jsp" >裝飾品</a></li>
</ul>

　　ul是最常用到的列表，一般的新聞列表都是通過ul實現的。其中li是沒有順序性的，就是並列關係。通過設定list-style樣式可以控制li前邊顯示點或圈等（具體查看線上手冊）。在具體操作中，列表前邊的小表徵圖都是通過背景圖來實現的。

　　2、有序列表：
<ol>
 <li>……</li>
 <li>……</li>
 <li>……</li>
</ol>

　　有序列表在實際中用到的比較少，顧名思義，裡邊的li是有順序的。可以通過設定來實現li前邊顯示“1，2，3”或其他順序（具體查看線上手冊）。

　　1、定義列表：
<dl>
 <dt>標題</dt>
 <dd>內容1</dd>
 <dd>內容2</dd>
</dl>