類似淘寶一樣的純CSS導航菜單

2024-09-05 12:19:34

字體：大中小

來源：轉載

供稿：網友

非常精致的類似淘寶一樣的菜單導航條，鼠標滑過變色，這里用到一個背景圖片，請運行時自行下載。本導航條用純CSS代碼實現，沒有用到任何的JS代碼，因此實用性和兼容性大大增強，有時候JS的東西在火狐及其它瀏覽器內會存在不兼容的問題，這一個絕對你會喜歡哦！

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS類似淘寶一樣的導航菜單</title><style>.tab{float:left; font-size:12px; line-height:1.8}.tab li{display:inline;}.tab li a{background:url(/jscss/demoimg/200904/xgb.gif) no-repeat;float:left;text-decoration:none;}.tab li a span{ display:block; background:url(/jscss/demoimg/200904/xgb.gif) no-repeat; padding:5px 10px 5px 20px;}.tab a:link,.tab a:visited{ background-position:right -51px; text-decoration:none}.tab a:hover,.tab a:active,.tab a.on,.tab a.on:link,.tab a.on:visited{ background-position:right -162px;}.tab a:link span,.tab a:visited span{ background-position:0 0; color:#FFF; text-decoration:none}.tab a:hover span,.tab a:active span,.tab a.on span,.tab a.on:link span,.tab a.on:visited span{ background-position:0 -107px; color:#000;}.tab .one a:link span,.tab .one a:visited span{ background-position:left -262px; padding-left:30px;}.tab .one a:hover span,.tab .one a:active span,.tab .one .on:link span,.tab .one .on:visited span{ background-position:left -212px; padding-left:30px; color:#000}</style></head><body><ul class="tab"> <li id="iwvjtn8m0" class="one">開源首頁</li> <li>聊天留言</li><li>企業建站</li><li>論壇社區</li><li>新聞文章</li><li>CMS系統</li><li>博客日記</li><li>影音視頻</li><li>商務商城</li><li>小偷采集</li></ul></body></html>

上一篇：CSS實現Windows風格的菜單按鈕

下一篇：另類個性豎向純CSS導航欄