新浪博客自適應(yīng)寬度的CSS菜單

2024-09-05 12:20:12

字體：大中小

供稿：網(wǎng)友

新浪博客的CSS自適應(yīng)寬度菜單，菜單界面看上去挺大氣，個人感覺挺不錯，運行一下看效果，現(xiàn)在很多網(wǎng)站都有類似風(fēng)格的菜單。

<!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>自適應(yīng)寬度菜單</title><style>*{margin:0;padding:0;list-style:none;}body{font-size: 14px;background:#7798a3} a{color:#336699;text-decoration:none}.on a{color:#fff;}.menu{width:800px;height:80px;background:#9cb8c3;padding:10px;}.menu li{float:left;padding-left:1px;background:url(/jscss/demoimg/200907/08menutag.gif) -1px top;height:34px}.menu li span{float:left;padding:10px 15px 0px 14px;float:left;background:url(/jscss/demoimg/200907/08menutag.gif) right -34px;position:relative;height:24px;} .menu li.on{background-position:-1px -68px;} .menu li.on span{float:left;padding:10px 16px 0px 14px;background-position:right bottom;font-weight:bold;height:24px}</style></head><body><div   id="iwvjtn8m0"   class="menu"><ul><li id="iwvjtn8m0"    class="on"><span>首頁</span></li>     <li><span>源碼學(xué)習(xí)</span></li><li><span>最新更新</span></li><li><span>網(wǎng)站留言</span></li><li><span>網(wǎng)頁特效</span></li></ul></div></body></html>

上一篇：會自動循環(huán)播放的選項卡

下一篇：像滑動門一樣的CSs菜單