DIV+CSS仿腾讯拍拍网导航菜单

2024-09-05 12:20:15

字体：大中小

来源：转载

供稿：网友

DIV+CSS仿腾讯拍拍网的导航菜单，现在不少的网站都有类似的效果，尤其是菜单左上方的一个“新”字，是菜单的点晴之笔，考验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仿腾讯拍拍网导航菜单</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 id="navColumn">  <div class="navAdditional">    <div>      <ul>        <li>充值<sup>新</sup></li>        <li>特惠</li>        <li>优品</li>        <li class="last">酒店</li>      </ul>    </div>  </div></div></body></html>

上一篇：蓝色清新菜单，和图片配合的很完美

下一篇：紫罗兰风格CSS导航条

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注