Individuality 笔记样式menu特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Individuality 笔记样式menu特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(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" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为Individuality 笔记样式menu，属于站长常用代码" />
<title>Individuality 笔记样式menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="menu">
	<li><a href="#" class="home">Home<span></span></a></li>
	<li><a href="#" class="about">About<span></span></a></li>
	<li><a href="#" class="rss">RSS<span></span></a></li>
</ul>
</body>
</html>

CSS代码(style.css):

#menu{list-style:none;padding:0;margin:0;width:774px;height:210px;background:url(images/menu-bg.jpg) no-repeat;position:relative;}
#menu span{display:none;position:absolute;}
#menu a{display:block;text-indent:-900%;position:absolute;outline:none;}
#menu a:hover{background-position:left bottom;}
#menu a:hover span{display:block;}
#menu .home{width:144px;height:58px;background:url(images/home.gif) no-repeat;left:96px;top:73px;}
#menu .home span{width:86px;height:14px;background:url(images/home-over.gif) no-repeat;left:28px;top:-20px;}
#menu .about{width:131px;height:51px;background:url(images/about.gif) no-repeat;left:338px;top:97px;}
#menu .about span{width:40px;height:12px;background:url(images/about-over.gif) no-repeat;left:44px;top:54px;}
#menu .rss{width:112px;height:47px;background:url(images/rss.gif) no-repeat;left:588px;top:94px;}
#menu .rss span{width:92px;height:20px;background:url(images/rss-over.gif) no-repeat;left:26px;top:-20px;}

附件:下载该文件资源,减少时间成本(增值服务)