Div+css菜单:一张图片实现翻转效果!
2008-05-09 23:59
846 查看
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com</title>
<style type="text/css">
<!--
#imgmenu{
width: 450px;
height: 25px; /*高度是背景图片的一半*/
background: url(attachments/month_0701/n2007115235458.gif);
list-style-type: none;
padding: 0px;
margin: 0px;
}
#imgmenu li{
float: left;
}
#imgmenu li a{
display: block;
width: 90px;
height: 25px;
}
#imgmenu li#home a:hover,#activeh{
background: url(attachments/month_0701/n2007115235458.gif) 0 -25px;
/*翻转时背景图的位置,左边0px,顶部-25px,
背景图的下半部分,下同*/
}
#imgmenu li#about a:hover,#activea{
background: url(attachments/month_0701/n2007115235458.gif) -90px -25px;
/*第二个菜单的位置距左边90px,
每个菜单的宽度是90px*/
}
#imgmenu li#pro a:hover,#activep{
background: url(attachments/month_0701/n2007115235458.gif) -180px -25px;
}
#imgmenu li#faq a:hover,#activef{
background: url(attachments/month_0701/n2007115235458.gif) -270px -25px;
}
#imgmenu li#contact a:hover,#activec{
background: url(attachments/month_0701/n2007115235458.gif) -360px -25px;
}
-->
</style>
</head>
<body>
<ul >
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.52css.com</title>
<style type="text/css">
<!--
#imgmenu{
width: 450px;
height: 25px; /*高度是背景图片的一半*/
background: url(attachments/month_0701/n2007115235458.gif);
list-style-type: none;
padding: 0px;
margin: 0px;
}
#imgmenu li{
float: left;
}
#imgmenu li a{
display: block;
width: 90px;
height: 25px;
}
#imgmenu li#home a:hover,#activeh{
background: url(attachments/month_0701/n2007115235458.gif) 0 -25px;
/*翻转时背景图的位置,左边0px,顶部-25px,
背景图的下半部分,下同*/
}
#imgmenu li#about a:hover,#activea{
background: url(attachments/month_0701/n2007115235458.gif) -90px -25px;
/*第二个菜单的位置距左边90px,
每个菜单的宽度是90px*/
}
#imgmenu li#pro a:hover,#activep{
background: url(attachments/month_0701/n2007115235458.gif) -180px -25px;
}
#imgmenu li#faq a:hover,#activef{
background: url(attachments/month_0701/n2007115235458.gif) -270px -25px;
}
#imgmenu li#contact a:hover,#activec{
background: url(attachments/month_0701/n2007115235458.gif) -360px -25px;
}
-->
</style>
</head>
<body>
<ul >
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
<li ><a href="#"></a></li>
</ul>
</body>
</html>
相关文章推荐
- 超经典jquery+CSS+DIV实现图片轮换效果
- 纯CSS实现菜单、导航栏的3D翻转动画效果
- CSS常用效果实现004——控制div的背景图片的长宽
- DIV+JS+CSS实现点击弹出图片效果
- 利用纯css实现图片翻转的效果
- DIV+CSS实现仿DreamWeaver界面图形菜单效果代码
- [置顶] CSS实现纯图片替换效果和div模拟下拉条的实现 -- 剔除知识误区
- div+css实现仿猪八戒首页导航菜单效果
- 纯css实现图片翻转效果
- div+css实现仿淘宝的产品分类菜单效果代码
- HTML中用CSS实现图片与内容前后翻转动画效果
- div+css实现蓝色vista风格css导航菜单效果
- 通过CSS切换图片效果,点击这个图片可以实现连接功能,这里的图片在一张大图片中,每个并要切换的图片没有切换,通过disposition定位的方式做
- 纯CSS代码实现翻转菜单的炫酷效果
- css实现随鼠标移动div渐变色效果
- 用div+css实现table效果
- jquery 实现滚动向上滚动图片上一张停顿一下在上一张效果
- div对话框,js+div+css实现好看的提示框效果
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)