WEBTECH 網頁設計教學站
設計具有超連結效果的 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 項目清單結合在一起,這樣有超連結語法的項目就會有連結的效果囉!操作起來是很簡單,你可以透過超連結的參數設定調整需要的效果,例如是否要在新視窗開啟連結?

延伸閱讀

連絡我們