DIV+CSS仿騰訊拍拍網(wǎng)導航菜單

2024-09-05 12:20:15

字體：大中小

來源：轉載

供稿：網(wǎng)友

DIV+CSS仿騰訊拍拍網(wǎng)的導航菜單，現(xiàn)在不少的網(wǎng)站都有類似的效果，尤其是菜單左上方的一個“新”字，是菜單的點晴之筆，考驗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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>DIV+CSS仿騰訊拍拍網(wǎng)導航菜單</title><style>html,body,div,a,sup,li,ul{margin:0;padding:0;}body{font:12px Tahoma, Verdana;text-align:center;background-color:#fff;}ul{list-style-type:none;}a:link,a:visited{color:#333;text-decoration:none;}a:hover,a:active{color:#ff4e00;text-decoration:underline;}#navColumn li,#navColumn a:hover,#navColumn a:active,.navAdditional,.navAdditional div{background:url(/jscss/demoimg/200907/heads.png) no-repeat;}.navAdditional div{background-position:left -212px;padding-left:4px;}.navAdditional{background-position:right -212px;margin-left:8px;float:right;width:250px;padding-right:4px;}#navColumn{width:auto;padding:0 5px 0 6px;margin-top:12px}#navColumn ul{background:url(/jscss/demoimg/200907/heads.png) left -245px repeat-x;padding-left:2px;height:32px;}#navColumn li{float:left;line-height:32px;text-align:center;width:60px;background-position:-149px -287px;}#navColumn li.last{background:none;}#navColumn li.now a:link,#navColumn li.now a:visited{background-position:left -336px;color:#fff;font-size:14px;font-weight:700;}#navColumn a{position:relative;}#navColumn sup{position:absolute;background:url(/jscss/demoimg/200907/heads.png) -120px -445px repeat-x;text-indent:-199em;width:16px;height:19px;top:-6px;overflow:hidden;right:10px;}#navColumn a:link,#navColumn a:visited{width:60px;display:block;}#navColumn a:hover,#navColumn a:active{background-position:left -336px;width:60px;height:32px;display:block;text-decoration:none;color:#fff;font-weight:700;}</style></head><body><div   class="70qarhlowxag"   id="navColumn">  <div   id="70qarhlowxag"   class="navAdditional">    <div>      <ul>        <li>充值<sup>新</sup></li>        <li>特惠</li>        <li>優(yōu)品</li>        <li id="70qarhlowxag"    class="last">酒店</li>      </ul>    </div>  </div></div></body></html>

上一篇：藍色清新菜單，和圖片配合的很完美

下一篇：紫羅蘭風格CSS導航條