仿迅雷首页的导航条效果(附源代码)

发布时间：2018-09-09 03:23 所属栏目：30 来源：站长网

导读：烈火网(LieHuo.Net)教程仿做迅雷首页的导航条，拿来与大家分享，先看一下效果图： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadm

　　烈火网(LieHuo.Net)教程仿做迅雷首页的导航条，拿来与大家分享，先看一下效果图：

烈火网(liehuo.net)提示：点击新窗口预览！

<!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>仿迅雷网站导航－烈火网</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.veryhuo.com/uploads/userup/1/0910/kkindex_nav.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(kkindex_nav.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.veryhuo.com/uploads/userup/1/0910/kkindex_nav.png) no-repeat 0 -95px; width:72px; height:30px;} .dhhome{background:url(http://www.veryhuo.com/uploads/userup/1/0910/kkindex_nav.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(kkindex_nav.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="#" _fcksavedurl="#" class="dhhome">首页</a></li> <li><a href="#" _fcksavedurl="#">电影</a></li> <li><a href="#" _fcksavedurl="#">电视剧</a></li> <li><a href="#" _fcksavedurl="#">综艺</a></li> <li><a href="#" _fcksavedurl="#">动漫</a></li> <li><a href="#" _fcksavedurl="#">漫画</a></li> <li><a href="#" _fcksavedurl="#">娱乐</a></li> <li><a href="#" _fcksavedurl="#">排行榜</a></li> </ul> </div> <div class="dhright"> 大片 - 首播 - 新片 - 客服论坛 - 更多 <div class="dhrightimg"></div></div> </div> </body> </html> <br /><center>烈火网更多教程，请访问：<a href=http://www.veryhuo.com/ target=_blank _fcksavedurl="http://www.veryhuo.com/ target=_blank">http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）