MrYang's Blog

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://www.mryang.org/logs/16101555.html

　　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;
}

• 收入登记
• 数据查询
• 报表查询
• 税率管理
• 系统管理