WEBTECH 網頁設計教學站
設計具有超連結效果的 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 列表 (項目清單) 的語法整合在一起,這樣就能創造出具有超連結效果的項目清單,是不是很簡單呢?

延伸閱讀

連絡我們