本文執行個體講述了CSS實現帶有小圖片的LI表徵圖列表菜單。分享給大家供大家參考。具體如下：
這是一款帶有小圖片的Li列表菜單，豎向的表徵圖菜單，滑鼠放上會變色，對滑鼠的響應很符合使用者體驗，且相容性好，代碼簡潔，適宜學習和使用，CSS初學者的一個好範例。
運行效果如下：
具體代碼如下：
複製代碼
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS表徵圖菜單</title><style>ul#nav { list-style-type: none; padding: 0; margin: 0;}#nav a:link, #nav a:visited { display: block; width: 150px; padding: 10px 0 16px 32px; font: bold 80% Arial, Helvetica, sans-serif; color: #FF9900; background: url("images/peppers.gif") top left no-repeat; text-decoration: none;}#nav a:hover { background-position: 0 -69px; color: #B51032;}#nav a:active { background-position: 0 -138px; color: #006E01;}</style></head><body><ul id="nav"> <li><a href="#">我們</a></li> <li><a href="#">聯絡我們</a></li> <li><a href="#">關於我們</a></li> <li><a href="#">購買我們</a></li></ul></body></html>
相關推薦：
CSS3製作圓角圖片和橢圓形圖片
利用純CSS實現動態文字效果執行個體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
