红色美观的滑动门式导航菜单代码

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

导读：烈火网(LieHuo.Net)教程自已写的横排的导航菜单，红色水晶风格，大家可以用啦，不过也有些地方需要高手指教啊，代码里有注释，兼容性还不错，希望一起提高吧。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1

　　烈火网(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=GBK" /> <title>红色美观的滑动门式导航菜单代码 - LIEHUO.NET</title> <style type="text/css"> *{margin:0;padding:0;} body{ margin:auto;font:14px "宋体",Verdana, Arial, Helvetica, sans-serif;color:#333;} ul,li{padding:0; list-style:none;} a:link,a:visited{color:#333;text-decoration:none;} a:hover{color:#d00;text-decoration:none;} #headNav{background:url(http://www.veryhuo.com/uploads/userup/0910/liehuo_navBg.png) 0 -42px repeat-x; border-top:solid 1px #E5B0B1; height:42px;} #headNav ul li{float:left; padding:13px 0; text-align:center; cursor:pointer; } #headNav ul li a{display:block; font-size:14px; padding:0 9px; font-weight:bold; color:#fff;} #headNav ul li a.lineLink{border-left:dotted 1px #fff;} .navNormalLink{background:url(http://www.veryhuo.com/uploads/userup/0910/liehuo_navBg.png) 0 -42px no-repeat; padding-bottom:4px;} .navNormalOver{background:url(http://www.veryhuo.com/uploads/userup/0910/liehuo_navBg.png) no-repeat; padding-bottom:4px;} </style> </head> <body> <div id="headNav"> <ul> <li><a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/" title="">站长首页</a></li> <li><a href="http://www.veryhuo.com/news/" _fcksavedurl="http://www.veryhuo.com/news/" title="">行业资讯</a></li> <li><a href="http://www.veryhuo.com/website/" _fcksavedurl="http://www.veryhuo.com/website/" title="">网站运营</a></li> <li><a href="http://www.veryhuo.com/design/" _fcksavedurl="http://www.veryhuo.com/design/" title="">网站设计</a></li> <li><a href="http://www.veryhuo.com/prog/" _fcksavedurl="http://www.veryhuo.com/prog/" title="">网络编程</a></li> <li><a href="http://www.veryhuo.com/res/" _fcksavedurl="http://www.veryhuo.com/res/" title="">网站资源</a></li> <li><a href="http://www.veryhuo.com/server/" _fcksavedurl="http://www.veryhuo.com/server/" title="">操作系统</a></li> <li><a href="http://www.veryhuo.com/code/" _fcksavedurl="http://www.veryhuo.com/code/" title="">建站程序</a></li> <li><a href="http://www.veryhuo.com/idc/" _fcksavedurl="http://www.veryhuo.com/idc/" title="">玩转IDC</a></li> </ul> </div> </body> </html>
提示：可修改后代码再运行!

（编辑：ASP站长网）