仿多玩游戏顶部固定层的菜单导航效果

发布时间：2018-08-24 14:19:30 所属栏目：政策来源：站长网

导读：烈火网(LieHuo.Net)网页特效教程：最近烈火上线了游戏攻略栏目，因为编辑需要，经常到一些游戏网站收集攻略教程，最近看到多玩游戏的菜单不错，于是仿下来给大家学习，这是一个固定的层，无论你如何下拉滚动条，这个层是固定不动的，还记得吗？烈火以前提

　　烈火网(LieHuo.Net)网页特效教程：最近烈火上线了游戏攻略栏目，因为编辑需要，经常到一些游戏网站收集攻略教程，最近看到多玩游戏的菜单不错，于是仿下来给大家学习，这是一个固定的层，无论你如何下拉滚动条，这个层是固定不动的，还记得吗？烈火以前提到的淘宝网的固定层（点这里回顾），这是一样的效果。

　　与此同时，多玩游戏还有一个突出的下载图标，也是利用了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" xml:lang="en" lang="en"> <head> <title>仿多玩游戏顶部固定菜单 - 烈火学院 Liehuo.Net</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <meta name="keywords" content="" /> </head> <body> <style type="text/css"> body{_padding:0;} #dw-site-nav *{margin:0;padding:0;font-family:5b8b4f53;font-size:12px;} #dw-site-nav{position:fixed;_position:relative;top:0;left:0;width:100%;min-width:980px;height:41px;_height:36px;z-index:10000;background:url(/uploads/allimg/1006/bg_site_nav.png) repeat-x 0 0;_background:url(/uploads/allimg/1006/bgs_site_nav.png) repeat-x 0 -40px;color:#555;} #dw-site-nav .bd{position:relative;z-index:10000;width:975px;height:41px;_height:36px;padding:0 5px 0 0;margin:0 auto;background:url(/uploads/allimg/1006/bgs_site_nav.png) no-repeat 100% -125px;} #dw-site-nav .quick-link{float:left;padding:0 0 0 5px;background:url(/uploads/allimg/1006/bgs_site_nav.png) no-repeat -102px -125px;} #dw-site-nav .quick-link b{float:left;width:104px;height:36px;margin:0 2px 0 0;} #dw-site-nav .quick-link b a{text-indent:-999px;width:104px;height:34px;background-position:0 0;padding:0;} #dw-site-nav .quick-link a{float:left;height:36px;line-height:36px;_line-height:37px;overflow:hidden;text-decoration:none;padding:0 6px 0 7px;color:#264764;background:url(/uploads/allimg/1006/bgs_site_nav.png) no-repeat -103px -78px;} #dw-site-nav .quick-link a:hover{color:#F40;} #dw-site-nav .quick-link a.first{background:none;} #dw-site-nav .login-passport{float:right;width:88px;height:22px;margin:7px 0 0;} #dw-site-nav .login-passport a{display:block;width:88px;height:22px;text-align:center;overflow:hidden;line-height:22px;_line-height:23px;text-decoration:none;color:#FFF;background:url(/uploads/allimg/1006/bgs_site_nav.png) no-repeat 0 -81px;} #dw-site-nav .login-passport a:hover{background-position:0 -103px;} #dw-site-nav a.yy-download{width:93px;height:78px;overflow:hidden;position:absolute;top:36px;right:0;} #dw-site-nav a.yy-download img{width:93px;height:78px;display:block;border:0 none;} </style> <div id="dw-site-nav"> <div class="bd"> <div class="quick-link"> <a href="http://www.veryhuo.com">烈火首页</a> <a href="http://www.veryhuo.com/news/" target="_blank">IT 新闻</a> <a href="http://www.veryhuo.com/website/" target="_blank">站长之家</a> <a href="http://www.veryhuo.com/design/" target="_blank">设计在线</a> <a href="http://www.veryhuo.com/design/html/" target="_blank">Web前端</a> <a href="http://www.veryhuo.com/prog/" target="_blank">编程开发</a> <a href="http://www.veryhuo.com/code/" target="_blank">建站程序</a> <a href="http://www.veryhuo.com/res/" target="_blank">免费资源</a> <a href="http://www.veryhuo.com/server/games/" target="_blank">游戏攻略</a> <a href="http://www.veryhuo.com/server/" target="_blank">电脑教程</a> <a href="http://www.veryhuo.com/mobile/" target="_blank">手机学院</a> <a href="http://www.veryhuo.com/a/process/" target="_blank">进程库</a> <a href="http://www.veryhuo.com/infos/" target="_blank">分类信息</a> <a href="http://tool.liehuo.net" target="_blank">站长工具</a> <a href="http://baike.liehuo.net" target="_blank">烈火百科</a> <a href="http://bbs.liehuo.net" target="_blank">论坛交流</a> </div> <div class="login-passport"> <a href="http://www.veryhuo.com/member">通行证登陆</a> </div> <a href="http://www.veryhuo.com/?liehuo_xy" class="yy-download"><img src="/uploads/allimg/1006/liehuo_xy.gif" alt="" title="访问烈火学院"/></a> </div> </div> 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com 烈火学院 www.veryhuo.com  <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　声明：

　　烈火原创文章，欢迎转载，请以超级链接的形式注明出处，否则视为侵权！

（编辑：清远站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!