仿迅雷看看导航特效

字体大小【小中大】来源：CrazyFrom整理 | 作者：CrazyFrom | 1,157 views | 2010-10-11

迅雷看看的蓝色导航效果：

<!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>迅雷看看导航--crazyfrom.com</title> <style type="text/css"> body{margin:0px;font-size:13px; font-family:Verdana, Arial, Helvetica, sans-serif} #nav{ position:relative; width:964px; height:95px; z-index:1px; margin:10px auto; background:url(http://www.crazyfrom.com/images/2010/10/xunlei.png)} #navli{ position:absolute; width:580px; height:32px; left:35px; top:-2px;} ul {margin:0;} .dh li{width:72px;height:30px; float:left;position:relative; line-height:30px;zoom:1;list-style:none;text-align:center; background:url(http://www.crazyfrom.com/images/2010/10/xunlei.png) no-repeat; background-position:-125px -99px} .dh li a{color:#000000; text-decoration:none} .dh li a:hover{zoom:1;color:#ffffff;text-decoration:none; font-weight:bold; background:url(http://www.crazyfrom.com/images/2010/10/xunlei.png) no-repeat 0 -95px; width:72px; height:30px;} .dhhome{background:url(http://www.crazyfrom.com/images/2010/10/xunlei.png) no-repeat 0 -95px;width:72px;height:30px;zoom:1;color:#ffffff !important; font-weight:bold} .dhright{position:absolute;width:280px;height:31px;left:680px;top:-2px; text-align:center; line-height:30px;} .dhrightimg{ position:absolute;right:-4px; top:10px;background:url(http://www.crazyfrom.com/images/2010/10/xunlei.png) no-repeat; background-position:-954px -115px; padding-right:15px; width:10px;height:10px;} </style> </head> <body> <div id="nav"> <div id="navli"> <ul class="dh"> <li><a href="www.crazyfrom.com" class="dhhome">CrazyFrom</a></li> <li><a href="#">电影</a></li> <li><a href="#">电视剧</a></li> <li><a href="#">综艺</a></li> <li><a href="#">动漫</a></li> <li><a href="#">漫画</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">排行榜</a></li> </ul> </div> <div class="dhright"> 大片 - 首播 - 新片 - 客服论坛 - 更多 <div class="dhrightimg"></div></div> </div> </body> </html>

你还可修改部分代码再运行看看哦

还不快抢沙发我也不甘寂寞

海纳百川: 顶你啊，好书一本。...
高档玩具: 哇哦，收藏了~~...
唯美网: 呵呵，都20多了还好意思拿红包，要自力更生，互联网创业不是想想中那么美好，互联网、计算机等门槛过低，...
青州seo: 99meili确实搞的不错···...
CrazyFrom: 测试...
超声波: 路过，支持支持~...
文帅: 我已经弄好了呵呵还是谢谢您教我的追加设置这个对我的帮助太大了...
CrazyFrom: 应该可以。没有试过...
文帅: 在问您一个问题我想在subitem鼠标移动到上面再显示一个层层里面放图片这个样式好实现吗？...
文帅: 问题解决了谢谢您...