模仿google导航效果

来源：互联网发布：java 封装性通过编辑：程序博客网时间：2024/05/16 06:14

示例下载点这里

google.js

测试index.html

<!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>编程设计网--google导航效果</title> <mce:script type="text/javascript" src="google.js" mce_src="google.js"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.top{height:150px;background:url(../images/topbg.gif) no-repeat;position:relative;}.top a{font-weight:bold;font-size:14px;}.top .picbg{position:absolute;bottom:20px;right:0px;}.top .picbg li{height:35px;}.top .picbg li a{display:block;margin:0px auto;height:35px;width:50px;background-image:url(guider.gif);}.top .picbg li a.home{background-position:0px -109px;}.top .picbg li a.intro{background-position:0px -220px;}.top .picbg li a.dblog{background-position:0px 1px;}.top .picbg li a.bblog{background-position:0px -72px;}.top .picbg li a.design{background-position:0px -34px;}.top .picbg li a.code{background-position:0px -145px;}.top .picbg li a.msg{background-position:0px -183px;}.top .word{position:absolute;bottom:0px;right:0px;line-height:20px;height:20px;vertical-align:middle;}.top .word li,.top li{width:78px;float:right;text-align:center;}</style> </head><body> <div class="top" id="dvGuider"> <ul class="picbg"> <li><a href="message.aspx" mce_href="message.aspx" class="msg"></a></li> <li><a href="code.aspx" mce_href="code.aspx" class="code"></a></li> <li><a href="design.aspx" mce_href="design.aspx" class="design"></a></li> <li><a href="bblog.aspx" mce_href="bblog.aspx" class="bblog"></a></li> <li><a href="dblog.aspx" mce_href="dblog.aspx" class="dblog"></a></li> <li><a href="intro.aspx" mce_href="intro.aspx" class="intro"></a></li> <li><a href="/" mce_href="" class="home"></a></li></ul> <ul class="word"> <li><a href="message.aspx" mce_href="message.aspx">访客留言</a></li> <li><a href="code.aspx" mce_href="code.aspx">代码下载</a></li> <li><a href="design.aspx" mce_href="design.aspx">设计作品</a></li> <li><a href="bblog.aspx" mce_href="bblog.aspx">B博文</a></li> <li><a href="dblog.aspx" mce_href="dblog.aspx">D博文</a></li> <li><a href="intro.aspx" mce_href="intro.aspx">个人介绍</a></li> <li><a href="/" mce_href="">首页</a></li></ul> </div> <mce:script type="text/javascript"></mce:script> </body></html>

本文来自http://www.coding123.net/blogdetail288.html