設計具有超連結效果的 HTML ol li 自動排序項目清單

HTML ol li 項目清單提供了項目開頭數字自動排序的功能，也就是說，當我們有很多個項目要條列為清單，同時又希望每個項目前面有數字排序，從1開始接著是 2, 3, 4 類推，就可以使用 HTML ol li 項目清單，不過光是有數字排序還不夠好用，有的時候我們會希望每個項目或個別的項目可以成為一個超連結，讓網友自己選擇想要看哪個項目，這樣會更靈活一點，我們這篇文章就來教大家如何設計具有超連結效果的 HTML ol li 自動排序項目清單。

設計具有超連結效果的 HTML ol li 自動排序項目清單範例
<ol>
<li>這是沒有超連結的項目</li>
<li>這是沒有超連結的項目</li>
<li>這是沒有超連結的項目</li>
</ol>
<ol>
<li><a href="http://www.google.cm.tw" title="Google" target="_blank">Google</a></li>
<li><a href="http://www.youtube.com" title="YouTube" target="_blank">YouTube</a></li>
<li><a href="http://www.facebok.com" title="Facebook" target="_blank">Facebook</a></li>
</ol>
範例的呈現結果
  1. 這是沒有超連結的項目
  2. 這是沒有超連結的項目
  3. 這是沒有超連結的項目
  1. Google
  2. YouTube
  3. Facebook
我們在範例中準備了兩組 HTML ol li 項目標籤，第一組就是預設的沒有超連結效果，雖然也很好用，不過我們要的是有超連結效果的項目清單，所以請直接看第二組，把 HTML a href 超連結功能與 ol li 項目清單結合在一起，這樣有超連結語法的項目就會有連結的效果囉！操作起來是很簡單，你可以透過超連結的參數設定調整需要的效果，例如是否要在新視窗開啟連結？

延伸閱讀
© Copyright webtech.tw Since 2010