[css提高] spritemenu--用css中sprite技术制作的menu

tension

管理员

Rank: 9 Rank: 9 Rank: 9

1^# 大中小发表于 2008-6-13 14:05 只看该作者

spritemenu--用css中sprite技术制作的menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Sprite Menu </title>
	<style type="text/css">
    div#spritemenu {
    	height: 50px;
      width: 400px;
      font-size: 9px;
      background-image: url(http://bbs.pickbar.com/month_0806/20080613_01f2c1d8704e1ad6377b14ikJ95ibtyT.gif);
      overflow: hidden;
    }
    
    div#spritemenu ul li {
      display: inline;
      margin: 0px;
      padding: 0px;
    }
    
    div#spritemenu ul li a {
      display: block;
      position:relative;
      height: 50px;
    }
    
    div#spritemenu ul li a:hover {
      background-image: url(http://bbs.pickbar.com/month_0806/20080613_01f2c1d8704e1ad6377b14ikJ95ibtyT.gif);
    }
    
    div#spritemenu ul {
      margin: 0px;
      padding: 0px;
      list-style-type:none;
      height: 50px;
    }
    
    div#spritemenu span {
      display: none;
    }
    
		div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
		div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
    div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
		div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
		div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
    
		div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
		div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
		div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
		div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
		div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}
	</style>
</head>

<body>
<div id="spritemenu">
  <ul>
  	<li class="buttonA"><a href="#"><span>Home</span></a></li>
  	<li class="buttonB"><a href="#"><span>About</span></a></li>
  	<li class="buttonC"><a href="#"><span>Contact</span></a></li>
  	<li class="buttonD"><a href="#"><span>Forum</span></a></li>
  	<li class="buttonE"><a href="#"><span>Guestbook</span></a></li>
  </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

附件: 您所在的用户组无法下载或查看附件

TOP

‹‹ 上一主题 | 下一主题 ››

393张高清晰web2.0站点截图	425款精品毛笔墨迹+38款墨迹底纹..	10位Master级别的Photoshop高手	绝对漂亮的笔刷
Soul 近期新作品欣赏..	熟女养成日志—长草	魔幻抽象/吸血鬼传说！！	photoshop仿CG滤镜