利用css中的三个样式:图片、位置和重复,即background-image、background-position和background-repeat;也可以直接用background来写。
例如:background:url(nav_bg.gif) 0 0 no-repeat; background:url(nav_bg.gif) 0 -28 no-repeat;
background:url(nav_bg.gif) 0 -26 no-repeat;
#nav ul
{
list-style: none;
margin: 0px auto;
padding: 0px;
border-bottom: 3px solid #E10001;
height: 28px;
width: 360px;
}
#nav li
{
float: left;
margin-left: 2px;
}
#nav a
{
display: block;
width: 87px;
height: 28px;
line-height: 28px;
text-align: center;
color: #000000;
background: url(nav_bg.gif) 0 -28px no-repeat;
text-decoration: none;
}
#nav a:hover
{
color: #f00;
background: url(nav_bg.gif) 0 -56px no-repeat;
}
#nav a#current
{
background: url(nav_bg.gif) 0 0 no-repeat;
font-weight: bold;
color: #fff;
}