MrYang's Blog

星期一, 四月 10, 2006

DIV+CSS实现菜单特效

  DIV+CSS可以实现很多的页面效果,一下的代码就是利用DIV+CSS实现的菜单效果,当鼠标经过菜单链接时,菜单的页面背景会变化,这里需要两张图片,一张是链接时菜单的背景,另一张是鼠标经过时的图片,当然也可以使用背景颜色,我这里使用的带上圆角的背景图片。效果如下:
具体代码如下:
CSS代码

#topmenu {
height: 30px;
width: 500px;
margin: 0px;
clear: both;
}

#topmenulist{
width: 100%;
margin:0 0 0 6px;
padding: 0;
text-align: center;
}

#topmenulist ul, #topmenulist li{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
border: 0px none;
}

#topmenulist a:link, #topmenulist a:visited{
float: left;
line-height:14px;
font-size: 15px;
font-weight: bold;
margin: 0;
text-decoration: none;
color: #ffffff;
background-image: url(topmenubg.jpg);
padding: 7px 15px 5px 17px;
}

#topmenulist a:hover{
float: left;
line-height:14px;
font-size: 15px;
font-weight: bold;
margin: 0;
text-decoration: none;
color: #9c9a9c;
background-image: url(topmenubgblank.jpg);
padding: 7px 15px 5px 17px;
}




没有评论: