設計具有超連結效果的 HTML ul li 項目清單

HTML ul li 項目清單可以讓我們清楚的條列出各式各樣的清單內容，不過單純的條列清單內容是乎不是這麼實用，有的時候我們會需要讓這些條列式的清單內容變成超連結的形式，讓我們的讀者可以選擇他們想看的內容繼續看下去，要如何設計具有超連結效果的 HTML ul li 項目清單呢？其實很簡單，只需要把超連結的語法加入到項目清單裡面，我們用範例呈現給各位讀者朋友看。

先來複習一下 HTML ul li 標籤的語法

<ul>
<li>這是一個項目</li>
<li>這是一個項目</li>
<li>這是一個項目</li>
</ul>

其中每一組 <li></li> 就是一個項目，需要幾組自己寫，詳細用法說明：HTML ul li 列表 (項目清單)。

具有超連結效果的 HTML ul li 項目清單範例

<ul>
<li><a href="http://www.google.com.tw" title="Google" target="_blank">Google</a></li>
<li><a href="http://tw.yahoo.com" title="Yahoo奇摩" target="_blank">Yahoo奇摩</a></li>
<li><a href="http://www.webtech.tw" title="WebTech 網頁設計教學站" target="_blank">WebTech 網頁設計教學站</a></li>
</ul>

範例的超連結效果

各位讀者朋友可以在範例中看到我們把 HTML a href 超連結語法與 HTML ul li 列表 (項目清單) 的語法整合在一起，這樣就能創造出具有超連結效果的項目清單，是不是很簡單呢？

延伸閱讀