程序员如果没有美工的帮助只能在网上找些现成的图片来用,比较费事。我闲逛时偶遇一图片做菜单背景不错,遂拿下来做了一个,效果如下:
上面是短版的,下面是长版的,根据需要取用吧。
菜单样式定义CSS代码如下:
/*这个是窄的*/
#menubar ul{
margin:0;
padding:0;
list-style-type:none;
}
#menubar li{
float:left;
dispaly:block;
}
#menubar li a{
width:85px;
height:25px;
line-height:25px;
font-size:14px;
border-bottom:1px solid #d1d1d1;
color:#333333;
text-decoration:none;
text-align:center;
font-weight:bold;
background:#ffffff url(img/menus.gif) 0px -45px;
}
#menubar li a:hover{
font-size:15px;
color:#0086d2;
background:#ffffff url(img/menus.gif) 0px 0px;
border-bottom:0px solid #d1d1d1;
text-decoration:underline;
}
/*注意下面是宽的*/
#menubarBig ul{
margin:0;
padding:0;
list-style-type:none;
}
#menubarBig li{
float:left;
dispaly:block;
}
#menubarBig li a{
width:116px;
height:25px;
line-height:25px;
font-size:14px;
border-bottom:1px solid #d1d1d1;
color:#333333;
text-decoration:none;
text-align:center;
font-weight:bold;
background:#ffffff url(img/menus.gif) 0px -128px;
}
#menubarBig li a:hover{
font-size:15px;
color:#0086d2;
background:#ffffff url(img/menus.gif) 0px -88px;
border-bottom:0px solid #d1d1d1;
text-decoration:underline;
}
切换的秘密在于图片左上角位置的变化,大家用图片处理软件打开menus.gif对照研究一下就明白了。
全体代码下载:
http://www.blogjava.net/Files/heyang/CSSMenu20090823113544.rar